valtech-components 2.0.687 → 2.0.689

package/src/lib/components/templates/simple/simple.component.ts

@@ -0,0 +1,92 @@
+import { NgStyle } from '@angular/common';
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { ThemeService } from '../../../services/theme.service';
+import { DividerComponent } from '../../atoms/divider/divider.component';
+import { ExpandableTextComponent } from '../../molecules/expandable-text/expandable-text.component';
+import { LinkComponent } from '../../molecules/link/link.component';
+import { HeaderComponent } from '../../organisms/header/header.component';
+import { LayoutComponent } from '../layout/layout.component';
+import { SimpleMetadata } from './types';
+
+@Component({
+  selector: 'val-simple',
+  standalone: true,
+  imports: [
+    NgStyle,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    HeaderComponent,
+    LayoutComponent,
+    DividerComponent,
+    LinkComponent,
+    ExpandableTextComponent,
+  ],
+  template: `
+    <val-header [props]="props.header" />
+
+    <ion-content
+      [fullscreen]="true"
+      [ngStyle]="{
+        '--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
+      }"
+      [scrollEvents]="true"
+      (ionScroll)="onScrollHandler($event)"
+    >
+      <ion-header collapse="condense">
+        <ion-toolbar style="--background: transparent;">
+          <ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      @if (props.pageDescription) {
+        <div class="description-container">
+          <val-expandable-text
+            [props]="{
+              limit: 180,
+              content: props.pageDescription,
+              color: 'primary',
+              expandText: 'más',
+            }"
+          />
+        </div>
+      }
+      @if (props.link) {
+        <val-link [props]="props.link" (onClick)="onClickHandler($event)"></val-link>
+      }
+      @if (props.withDivider) {
+        <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
+      }
+      <val-layout>
+        <ng-content select="[inner-container]"></ng-content>
+      </val-layout>
+    </ion-content>
+    <ng-content select="[outter-container]"></ng-content>
+  `,
+  styles: `
+    .description-container {
+      padding: 0px 16px;
+    }
+  `,
+})
+export class SimpleComponent {
+  @Input()
+  props: SimpleMetadata;
+
+  @Output()
+  onClick = new EventEmitter<string>();
+
+  @Output()
+  onScrollEvent = new EventEmitter<boolean>();
+
+  theme = inject(ThemeService);
+
+  onClickHandler(token?: string) {
+    this.onClick.emit(token);
+  }
+
+  onScrollHandler($event: Event) {
+    this.onScrollEvent.emit(true);
+  }
+}

package/src/lib/components/templates/simple/types.ts

@@ -0,0 +1,11 @@
+import { LinkMetadata } from '../../molecules/link/types';
+import { HeaderMetadata } from '../../organisms/header/types';
+
+export interface SimpleMetadata {
+  header: HeaderMetadata;
+  pageTitle: string;
+  pageDescription: string;
+  withDivider: boolean;
+  link?: LinkMetadata;
+  background: string;
+}

package/src/lib/components/types.ts

@@ -0,0 +1,311 @@
+import { FormControl, ValidatorFn } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ImageMetadata } from './atoms/image/types';
+
+/**
+ * Possible states for an interactive component.
+ */
+export type ComponentState = 'ENABLED' | 'DISABLED' | 'WORKING' | 'ERROR';
+const ENABLED: ComponentState = 'ENABLED';
+const DISABLED: ComponentState = 'DISABLED';
+const WORKING: ComponentState = 'WORKING';
+const ERROR: ComponentState = 'ERROR';
+
+/**
+ * Object containing all possible component states.
+ */
+export const ComponentStates = { ENABLED, DISABLED, WORKING, ERROR };
+
+/**
+ * Types of actions that a button or link can perform.
+ */
+export enum ActionType {
+  BROWSER_NEW_TAB, // Open in a new browser tab
+  BROWSER_DOWNLOAD, // Download via browser
+  NATIVE_DOWNLOAD, // Download using native capabilities
+  APP_NAVIGATION, // Internal app navigation
+  BROWSER_NAVIGATION, // Navigation in the browser
+}
+
+/**
+ * Represents an executable action for a button or link.
+ */
+export type Action = {
+  /** Action description */
+  description: string;
+  /** Action type */
+  type: ActionType;
+  /** Action source or destination */
+  source: string;
+};
+
+/**
+ * Supported input types for forms.
+ */
+export enum InputType {
+  TEXT,
+  TEXTAREA,
+  EMAIL,
+  PASSWORD,
+  COMMENT,
+  NUMBER,
+  NUMBER_FROM_TO,
+  PIN_CODE,
+  DATE,
+  DATE_RANGE,
+  HOUR,
+  CHECK,
+  RADIO,
+  SELECT,
+  SEARCH_SELECT,
+  MULTI_SELECT,
+  MULTI_SELECT_SIMPLE,
+  FILE,
+  TOGGLE,
+  RANGE,
+  PHONE,
+  CURRENCY,
+}
+
+/**
+ * Option for select, radio, etc. inputs.
+ */
+export type InputOption = {
+  /** Unique option identifier */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Whether the option is selected by default */
+  selected?: boolean;
+  /** Display order */
+  order: number;
+};
+
+/**
+ * Metadata for a form field.
+ */
+export type InputMetadata = {
+  /** Associated form control (optional, created internally by val-form) */
+  control?: FormControl;
+  /** From control (only for NUMBER_FROM_TO type) */
+  fromControl?: FormControl;
+  /** To control (only for NUMBER_FROM_TO type) */
+  toControl?: FormControl;
+  /** Unique token for the input */
+  token: string;
+  /** Display label */
+  label: string;
+  /** Field name */
+  name: string;
+  /** Help text (shown below input, for validation hints) */
+  hint: string;
+  /** Description text (shown below label, explains the field purpose) */
+  description?: string;
+  /** Input placeholder */
+  placeholder: string;
+  /** Input type */
+  type: InputType;
+  /** Display order */
+  order: number;
+  /** Associated validators */
+  validators: ValidatorFn[];
+  /** Options (for select, radio, etc.) */
+  options?: InputOption[];
+  /** Allowed range (for number, date, etc.) */
+  range?: {
+    min: number;
+    max: number;
+  };
+  /** Custom error messages */
+  errors: {
+    [key: string]: string;
+  };
+  /** Initial value for the field */
+  value?: string;
+  /** Default value configuration - string for custom defaults, true for auto defaults */
+  withDefault?: string | boolean;
+  /** Field state */
+  state: ComponentState;
+  /** Label for "from" field (only for NUMBER_FROM_TO type) */
+  fromLabel?: string;
+  /** Label for "to" field (only for NUMBER_FROM_TO type) */
+  toLabel?: string;
+  /** Placeholder for "from" field (only for NUMBER_FROM_TO type) */
+  fromPlaceholder?: string;
+  /** Placeholder for "to" field (only for NUMBER_FROM_TO type) */
+  toPlaceholder?: string;
+
+  // i18n support properties
+  /** Key for content lookup */
+  contentKey?: string;
+  /** Component class name for content lookup */
+  contentClass?: string;
+  /** Fallback text if content key is not found */
+  contentFallback?: string;
+
+  // select-input specific i18n properties
+  /** Custom header text for select modal */
+  modalHeader?: string;
+  /** Custom cancel button text for select modal */
+  cancelText?: string;
+  /** Custom OK button text for select modal */
+  okText?: string;
+
+  // check-input specific properties
+  /** Position of label for checkbox ('start' | 'end') */
+  labelPlacement?: 'start' | 'end';
+
+  // PIN_CODE specific properties
+  /** Number of digits in PIN (default: 5, only for PIN_CODE type) */
+  length?: number;
+  /** Size of the input boxes: 'small' | 'medium' | 'large' (default: 'medium', only for PIN_CODE type) */
+  size?: 'small' | 'medium' | 'large';
+  /** Allow only numbers (default: true, only for PIN_CODE type) */
+  allowNumbersOnly?: boolean;
+  /** Mask input - show dots instead of characters (only for PIN_CODE type) */
+  mask?: boolean;
+  /** Auto focus first input (only for PIN_CODE type) */
+  autoFocus?: boolean;
+  /** Custom input styles (only for PIN_CODE type) */
+  inputStyles?: Record<string, string>;
+};
+
+/**
+ * A section in a form, grouping multiple fields.
+ */
+export type FormSection = {
+  /** Section name */
+  name: string;
+  /** Display order */
+  order: number;
+  /** Fields included in the section */
+  fields: InputMetadata[];
+};
+
+/**
+ * Data sent when submitting a form.
+ */
+export type FormSubmit = {
+  /** Form field values as key-value pairs */
+  fields: Record<string, any>;
+  /** Optional token for the operation */
+  token?: string;
+};
+
+/**
+ * Metadata for a complete form.
+ */
+export type FormMetadata = {
+  /** Form name */
+  name: string;
+  /** Form sections */
+  sections: FormSection[];
+  /** Action buttons configuration */
+  actions: ButtonMetadata;
+  /** Global form state */
+  state: ComponentState;
+};
+
+/**
+ * Possible action types for a toolbar.
+ */
+export enum ToolbarActionType {
+  AVATAR = 'AVATAR',
+  ICON = 'ICON',
+  IMAGE = 'IMAGE',
+  BUTTON = 'BUTTON',
+}
+
+/**
+ * Toolbar action definition.
+ */
+export type ToolbarAction = {
+  /** Action type */
+  type: 'AVATAR' | 'ICON' | 'IMAGE' | 'BUTTON';
+  /** Optional token identifier */
+  token?: string;
+  /** Toolbar position */
+  position: 'left' | 'right' | 'center';
+  /** Optional description */
+  description?: string;
+  /** Associated image (if any) */
+  image?: ImageMetadata;
+};
+
+/**
+ * Metadata for an icon.
+ */
+export interface IconMetada {
+  /** Icon name */
+  name: string;
+  /** Icon slot position */
+  slot: 'start' | 'end';
+}
+
+/**
+ * Button configuration object.
+ * Supports both static and reactive content.
+ * @type {ButtonMetadata}
+ * @property text - Static button label (takes precedence over textConfig).
+ * @property textConfig - Reactive content configuration for button text.
+ * @property color - The button color (Ionic color string).
+ * @property icon - Icon to display (optional).
+ * @property state - Button state (enabled, disabled, working, etc.).
+ * @property expand, fill, size, shape, href, target, download, handler, etc. - See ButtonMetadata for all options.
+ */
+export interface ButtonMetadata {
+  /** Associated action type */
+  actionType?: ActionType;
+  /** Button expansion */
+  expand?: 'full' | 'block';
+  /** Associated link */
+  link?: string;
+  /** Associated href link */
+  href?: string;
+  /** Link target */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  /** Download file name */
+  download?: string;
+  /** Button color */
+  color: Color;
+  /** Button state */
+  state: ComponentState;
+  /** Static display text (takes precedence over reactive content) */
+  text?: string;
+  /** Reactive content configuration for button text */
+  contentKey?: string;
+  /** Component class name for content lookup (required with contentKey) */
+  contentClass?: string;
+  /** Fallback text if contentKey is not found */
+  contentFallback?: string;
+  /** Values to interpolate into the content string */
+  contentInterpolation?: Record<string, string | number>;
+  /** Associated icon */
+  icon?: IconMetada;
+  /** Button shape */
+  shape?: 'round';
+  /** Button size */
+  size?: 'small' | 'default' | 'large';
+  /** Button fill */
+  fill?: 'clear' | 'outline' | 'solid' | 'default';
+  /** Button type */
+  type: 'button' | 'submit' | 'reset';
+  /** Optional token identifier */
+  token?: string;
+  /** Optional reference */
+  ref?: any;
+  /** Action handler */
+  handler?: (value: any) => any | Promise<any>;
+}
+
+/**
+ * Configuration for reactive content in val-button component.
+ * Use this interface when you only need to specify content-related properties.
+ * This follows the same pattern as TextContentConfig for consistency.
+ */
+export interface ButtonContentConfig {
+  contentKey: string;
+  contentClass: string;
+  contentFallback?: string;
+  contentInterpolation?: Record<string, string | number>;
+}

package/src/lib/config/company-footer.config.ts

@@ -0,0 +1,137 @@
+/**
+ * Shared Company Footer Configuration
+ *
+ * This configuration is shared across all Valtech products:
+ * - ui-docs
+ * - showcase
+ * - myvaltech (company website)
+ *
+ * When links or social profiles change, update here and publish a new version.
+ */
+
+/**
+ * Social media links for Valtech
+ */
+export const VALTECH_SOCIAL_LINKS = [
+  { icon: 'logo-facebook', url: 'https://m.facebook.com/profile.php?id=61557610734470', name: 'Facebook' },
+  { icon: 'logo-instagram', url: 'https://www.instagram.com/valtechltda/', name: 'Instagram' },
+  { icon: 'logo-linkedin', url: 'https://www.linkedin.com/company/valtechltda/', name: 'LinkedIn' },
+  { icon: 'logo-twitter', url: 'https://twitter.com/valtechltda', name: 'Twitter' },
+  { icon: 'logo-youtube', url: 'https://www.youtube.com/channel/UCuF4FGdTiUXxANx1HS4Wi5Q', name: 'YouTube' },
+  { icon: 'logo-tiktok', url: 'https://www.tiktok.com/@valtechltda', name: 'TikTok' },
+];
+
+/**
+ * Footer logo configuration
+ * Uses CSS variable for automatic theme-aware logo switching
+ */
+export const VALTECH_FOOTER_LOGO = {
+  logoCssVariable: '--main-logo',
+  logoAlt: 'Valtech Logo',
+  logoRoute: '/',
+};
+
+/**
+ * Company link definition
+ */
+export interface CompanyLink {
+  /** i18n key for the link text */
+  key: string;
+  /** URL path or external URL */
+  url: string;
+  /** Whether the link opens in a new tab */
+  external?: boolean;
+}
+
+/**
+ * Company links organized by section
+ */
+export const VALTECH_COMPANY_LINKS = {
+  legal: [
+    { key: 'aboutUs', url: '/about', external: false },
+    { key: 'privacyPolicy', url: '/legal/privacy', external: false },
+    { key: 'termsConditions', url: '/legal/terms', external: false },
+  ] as CompanyLink[],
+  support: [
+    { key: 'contactSupport', url: '/contact', external: false },
+    { key: 'faq', url: '/help/faq', external: false },
+    { key: 'feedback', url: '/feedback', external: false },
+  ] as CompanyLink[],
+};
+
+/**
+ * i18n keys for the footer (Layout namespace)
+ * These should be registered in each app's i18n config
+ */
+export const VALTECH_FOOTER_I18N = {
+  es: {
+    // Footer titles
+    footerLeftTitle: 'Sigamos en contacto',
+    footerRightTitle: 'Soporte',
+    // Legal links
+    aboutUs: 'Nosotros',
+    privacyPolicy: 'Política de privacidad',
+    termsConditions: 'Términos y condiciones',
+    // Support links
+    contactSupport: 'Contactar a soporte',
+    faq: 'Preguntas frecuentes',
+    feedback: 'Feedback',
+    // Copyright - {year} is replaced with current year
+    copyrightText: '© {year}, Soluciones Valtech Ltda. o sus empresas afiliadas. Todos los derechos reservados.',
+  },
+  en: {
+    // Footer titles
+    footerLeftTitle: 'Stay in touch',
+    footerRightTitle: 'Support',
+    // Legal links
+    aboutUs: 'About Us',
+    privacyPolicy: 'Privacy Policy',
+    termsConditions: 'Terms & Conditions',
+    // Support links
+    contactSupport: 'Contact Support',
+    faq: 'FAQ',
+    feedback: 'Feedback',
+    // Copyright - {year} is replaced with current year
+    copyrightText: '© {year}, Soluciones Valtech Ltda. or its affiliates. All rights reserved.',
+  },
+};
+
+/**
+ * Default language selector configuration for footer
+ */
+export const VALTECH_LANGUAGE_SELECTOR = {
+  mode: 'default' as const,
+  showFlags: true,
+  showLabel: false,
+  fill: 'outline' as const,
+  size: 'default' as const,
+};
+
+/**
+ * Helper to build footer links from company links config
+ * @param links - Array of company links
+ * @param t - Translation function (key: string) => string
+ * @returns Array of link objects ready for FooterLinksMetadata
+ */
+export function buildFooterLinks(
+  links: CompanyLink[],
+  t: (key: string) => string
+): Array<{
+  url: string;
+  text: string;
+  color: string;
+  token: string;
+  download: boolean;
+  hoverable: boolean;
+  target?: string;
+}> {
+  return links.map(link => ({
+    url: link.url,
+    text: t(link.key),
+    color: 'dark',
+    token: '',
+    download: false,
+    hoverable: true,
+    ...(link.external ? { target: '_blank' } : {}),
+  }));
+}