valtech-components 2.0.794 → 2.0.795

package/src/lib/services/markdown-article/markdown-article-parser.ts

@@ -0,0 +1,362 @@
+import {
+  ArticleElement,
+  ArticleListElement,
+  ArticleMetadata,
+  ArticleNoteElement,
+  ArticleSubtitleElement,
+  ArticleTitleElement,
+} from '../../components/organisms/article/types';
+
+export type CalloutType = 'NOTE' | 'TIP' | 'INFO' | 'WARNING' | 'CAUTION' | 'IMPORTANT';
+
+/**
+ * Localized label per callout kind. Used as the prefix shown inside the
+ * resulting note element (e.g. `> [!NOTE] …` → `<val-notes-box prefix="Nota">`).
+ *
+ * Defaults to Spanish for back-compat. Pass a different map per locale when
+ * parsing translated documents so the prefix matches the body language.
+ */
+export type CalloutLabels = Record<CalloutType, string>;
+
+/** Built-in label sets for the three platform locales. */
+export const CALLOUT_LABELS: Record<'es' | 'en' | 'pt', CalloutLabels> = {
+  es: {
+    NOTE: 'Nota',
+    TIP: 'Tip',
+    INFO: 'Info',
+    IMPORTANT: 'Importante',
+    WARNING: 'Atención',
+    CAUTION: 'Precaución',
+  },
+  en: {
+    NOTE: 'Note',
+    TIP: 'Tip',
+    INFO: 'Info',
+    IMPORTANT: 'Important',
+    WARNING: 'Warning',
+    CAUTION: 'Caution',
+  },
+  pt: {
+    NOTE: 'Nota',
+    TIP: 'Dica',
+    INFO: 'Info',
+    IMPORTANT: 'Importante',
+    WARNING: 'Atenção',
+    CAUTION: 'Cuidado',
+  },
+};
+
+/**
+ * Per-callout-kind color (Ionic semantic color). Fixed across locales since
+ * red = danger no matter what language you speak.
+ */
+const CALLOUT_COLORS: Record<CalloutType, ArticleNoteElement['props']['color']> = {
+  NOTE: 'primary',
+  TIP: 'success',
+  INFO: 'tertiary',
+  IMPORTANT: 'warning',
+  WARNING: 'warning',
+  CAUTION: 'danger',
+};
+
+/** Optional configuration for the parser. */
+export interface ParseMarkdownArticleOptions extends Partial<ArticleMetadata> {
+  /**
+   * Locale used to pick built-in callout labels. Convenience shortcut so
+   * callers don't have to spread `CALLOUT_LABELS.en` themselves. Ignored
+   * when `calloutLabels` is provided explicitly.
+   */
+  locale?: 'es' | 'en' | 'pt';
+  /** Override every callout label individually. Takes precedence over `locale`. */
+  calloutLabels?: CalloutLabels;
+}
+
+const BOX_DRAWING = /[┌┐└┘├┤┬┴┼─│╔╗╚╝═║]/;
+const CALLOUT_RE = /^>\s*\[!(NOTE|TIP|INFO|WARNING|CAUTION|IMPORTANT)\]\s*(.*)$/i;
+const FENCE_RE = /^```([\w-]*)\s*$/;
+const HEADING_RE = /^(#{1,6})\s+(.+)$/;
+const SEPARATOR_RE = /^\s*(?:-{3,}|\*{3,}|_{3,})\s*$/;
+const UNORDERED_RE = /^\s*[-*+]\s+(.+)$/;
+const CHECKLIST_RE = /^\s*[-*+]\s+\[([ xX])\]\s+(.+)$/;
+const ORDERED_RE = /^\s*\d+\.\s+(.+)$/;
+const TABLE_DIVIDER_RE = /^\s*\|?[\s:|-]+\|?\s*$/;
+const TABLE_ROW_RE = /^\s*\|(.+)\|\s*$/;
+
+/**
+ * Pure Markdown → ArticleMetadata parser. No Angular deps — usable from Node scripts
+ * (build-time generation) and from the Angular `MarkdownArticleParserService` wrapper.
+ *
+ * Supported syntax:
+ * - Headings (#, ##, ### …) → title / subtitle
+ * - Paragraphs → paragraph (with `processLinks` + `allowPartialBold`)
+ * - Lists (-, *, 1.) → unordered / ordered list (- [ ] / - [x] for checklist)
+ * - Blockquotes (>) → quote, with GitHub callouts `> [!NOTE|TIP|INFO|WARNING|CAUTION|IMPORTANT]` mapped to notes
+ * - Code fences (```lang) → code
+ * - Box-drawing ASCII art (┌┐└┘│─) auto-wrapped as code
+ * - Tables → flattened into paragraphs with bold keys
+ * - Horizontal rules (---, ***, ___) → separator
+ */
+export function parseMarkdownArticle(
+  markdown: string,
+  options?: ParseMarkdownArticleOptions
+): ArticleMetadata {
+  const lines = normalize(markdown).split('\n');
+  const elements: ArticleElement[] = [];
+  const labels: CalloutLabels =
+    options?.calloutLabels ??
+    (options?.locale ? CALLOUT_LABELS[options.locale] : CALLOUT_LABELS.es);
+
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+
+    const fence = line.match(FENCE_RE);
+    if (fence) {
+      const lang = fence[1] || undefined;
+      const body: string[] = [];
+      i++;
+      while (i < lines.length && !FENCE_RE.test(lines[i])) {
+        body.push(lines[i]);
+        i++;
+      }
+      i++;
+      elements.push({
+        type: 'code',
+        props: { code: body.join('\n'), language: lang, theme: 'dark' },
+      });
+      continue;
+    }
+
+    if (BOX_DRAWING.test(line)) {
+      const body: string[] = [];
+      while (i < lines.length && (lines[i].trim() === '' || BOX_DRAWING.test(lines[i]))) {
+        body.push(lines[i]);
+        i++;
+      }
+      while (body.length && body[body.length - 1].trim() === '') body.pop();
+      elements.push({
+        type: 'code',
+        props: { code: body.join('\n'), language: 'text', theme: 'dark' },
+      });
+      continue;
+    }
+
+    if (SEPARATOR_RE.test(line)) {
+      elements.push({ type: 'separator', props: { style: 'line' } });
+      i++;
+      continue;
+    }
+
+    const heading = line.match(HEADING_RE);
+    if (heading) {
+      elements.push(makeHeading(heading[1].length, heading[2].trim()));
+      i++;
+      continue;
+    }
+
+    if (line.startsWith('>')) {
+      const block: string[] = [];
+      while (i < lines.length && lines[i].startsWith('>')) {
+        block.push(lines[i]);
+        i++;
+      }
+      elements.push(makeQuoteOrCallout(block, labels));
+      continue;
+    }
+
+    if (TABLE_ROW_RE.test(line)) {
+      const rows: string[] = [];
+      while (i < lines.length && TABLE_ROW_RE.test(lines[i])) {
+        rows.push(lines[i]);
+        i++;
+      }
+      elements.push(...makeTable(rows));
+      continue;
+    }
+
+    if (CHECKLIST_RE.test(line) || UNORDERED_RE.test(line) || ORDERED_RE.test(line)) {
+      const listType: 'checklist' | 'unordered' | 'ordered' = CHECKLIST_RE.test(line)
+        ? 'checklist'
+        : ORDERED_RE.test(line)
+          ? 'ordered'
+          : 'unordered';
+
+      const items: ArticleListElement['props']['items'] = [];
+      while (i < lines.length && lines[i].trim() !== '') {
+        const cur = lines[i];
+        const check = cur.match(CHECKLIST_RE);
+        const unord = cur.match(UNORDERED_RE);
+        const ord = cur.match(ORDERED_RE);
+        if (check) items.push({ text: check[2].trim() });
+        else if (ord && listType === 'ordered') items.push({ text: ord[1].trim() });
+        else if (unord && listType !== 'ordered') items.push({ text: unord[1].trim() });
+        else break;
+        i++;
+      }
+      elements.push({ type: 'list', props: { items, listType } });
+      continue;
+    }
+
+    const paragraph: string[] = [];
+    while (i < lines.length && lines[i].trim() !== '' && !startsNewBlock(lines[i])) {
+      paragraph.push(lines[i]);
+      i++;
+    }
+    const text = paragraph.join(' ').trim();
+    if (text) {
+      elements.push({
+        type: 'paragraph',
+        props: {
+          content: text,
+          size: 'medium',
+          color: 'dark',
+          bold: false,
+          processLinks: true,
+          allowPartialBold: true,
+        },
+      });
+    }
+  }
+
+  // Strip parser-only options before merging into ArticleMetadata
+  const { locale: _l, calloutLabels: _c, ...metadataOverrides } = options ?? {};
+
+  return {
+    elements,
+    maxWidth: '900px',
+    centered: true,
+    theme: 'auto',
+    ...metadataOverrides,
+  };
+}
+
+function normalize(md: string): string {
+  return md.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+}
+
+function startsNewBlock(line: string): boolean {
+  return (
+    HEADING_RE.test(line) ||
+    FENCE_RE.test(line) ||
+    SEPARATOR_RE.test(line) ||
+    TABLE_ROW_RE.test(line) ||
+    UNORDERED_RE.test(line) ||
+    ORDERED_RE.test(line) ||
+    CHECKLIST_RE.test(line) ||
+    line.startsWith('>') ||
+    BOX_DRAWING.test(line)
+  );
+}
+
+function makeHeading(level: number, content: string): ArticleTitleElement | ArticleSubtitleElement {
+  if (level === 1) {
+    return {
+      type: 'title',
+      props: { content, size: 'xlarge', color: 'dark', bold: true },
+    };
+  }
+  const size: 'large' | 'medium' | 'small' =
+    level === 2 ? 'large' : level === 3 ? 'medium' : 'small';
+  return {
+    type: 'subtitle',
+    props: { content, size, color: 'dark', bold: true },
+  };
+}
+
+function makeQuoteOrCallout(block: string[], labels: CalloutLabels): ArticleElement {
+  const first = block[0];
+  const callout = first.match(CALLOUT_RE);
+  const lines = block.map(l => l.replace(/^>\s?/, ''));
+
+  if (callout) {
+    const type = callout[1].toUpperCase() as CalloutType;
+    const firstLineRest = callout[2] || '';
+    const rest = lines.slice(1).join(' ').trim();
+    const text = [firstLineRest, rest].filter(Boolean).join(' ').trim();
+    return makeNote(type, text, labels);
+  }
+
+  const text = lines.join(' ').trim();
+  return {
+    type: 'quote',
+    props: {
+      content: text,
+      size: 'medium',
+      color: 'medium',
+      bold: false,
+      showQuoteMark: true,
+      alignment: 'left',
+    },
+  };
+}
+
+function makeNote(kind: CalloutType, text: string, labels: CalloutLabels): ArticleNoteElement {
+  return {
+    type: 'note',
+    props: {
+      text,
+      prefix: `${labels[kind]}:`,
+      color: CALLOUT_COLORS[kind],
+      textColor: 'dark',
+      size: 'medium',
+      rounded: true,
+      allowPartialBold: true,
+      processLinks: true,
+    },
+  };
+}
+
+function makeTable(rows: string[]): ArticleElement[] {
+  const parsed = rows
+    .filter(r => !TABLE_DIVIDER_RE.test(r))
+    .map(r =>
+      r
+        .trim()
+        .replace(/^\|/, '')
+        .replace(/\|$/, '')
+        .split('|')
+        .map(c => c.trim())
+    );
+  if (parsed.length === 0) return [];
+
+  const header = parsed[0];
+  const dataRows = parsed.slice(1);
+  if (dataRows.length === 0) {
+    return [
+      {
+        type: 'paragraph',
+        props: {
+          content: header.join(' · '),
+          size: 'medium',
+          color: 'dark',
+          bold: false,
+          processLinks: true,
+          allowPartialBold: true,
+        },
+      },
+    ];
+  }
+
+  return dataRows.map(row => {
+    const pairs = row.map((cell, idx) => {
+      const key = header[idx] ?? '';
+      return key ? `**${key}:** ${cell}` : cell;
+    });
+    return {
+      type: 'paragraph',
+      props: {
+        content: pairs.join(' · '),
+        size: 'medium',
+        color: 'dark',
+        bold: false,
+        processLinks: true,
+        allowPartialBold: true,
+      },
+    } as ArticleElement;
+  });
+}

package/src/lib/services/meta/meta.service.ts

@@ -0,0 +1,64 @@
+import { Injectable, inject } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { PageMetadata, MetaConfig } from './types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MetaService {
+  private meta = inject(Meta);
+  private titleService = inject(Title);
+
+  private baseUrl = '';
+  private defaultImage = '/assets/images/main-icon.png';
+  private siteName = '';
+
+  /**
+   * Configurar el servicio con valores de la app
+   */
+  configure(config: MetaConfig): void {
+    this.baseUrl = config.baseUrl;
+    this.siteName = config.siteName;
+    if (config.defaultImage) {
+      this.defaultImage = config.defaultImage;
+    }
+  }
+
+  /**
+   * Actualizar meta tags de la página
+   */
+  updatePageMeta(metadata: PageMetadata, path?: string): void {
+    const fullTitle = `${metadata.title} | ${this.siteName}`;
+    const url = path ? `${this.baseUrl}${path}` : this.baseUrl;
+    const ogImage = metadata.ogImage || this.defaultImage;
+    const fullImageUrl = ogImage.startsWith('http') ? ogImage : `${this.baseUrl}${ogImage}`;
+
+    // Title
+    this.titleService.setTitle(fullTitle);
+
+    // Basic meta tags
+    this.meta.updateTag({ name: 'description', content: metadata.description });
+    if (metadata.keywords) {
+      this.meta.updateTag({ name: 'keywords', content: metadata.keywords });
+    }
+
+    // Open Graph
+    this.meta.updateTag({ property: 'og:title', content: fullTitle });
+    this.meta.updateTag({ property: 'og:description', content: metadata.description });
+    this.meta.updateTag({ property: 'og:url', content: url });
+    this.meta.updateTag({ property: 'og:image', content: fullImageUrl });
+    this.meta.updateTag({ property: 'og:type', content: metadata.type || 'website' });
+
+    // Twitter Card
+    this.meta.updateTag({ name: 'twitter:title', content: fullTitle });
+    this.meta.updateTag({ name: 'twitter:description', content: metadata.description });
+    this.meta.updateTag({ name: 'twitter:image', content: fullImageUrl });
+  }
+
+  /**
+   * Resetear a valores por defecto
+   */
+  resetToDefault(metadata: PageMetadata): void {
+    this.updatePageMeta(metadata);
+  }
+}

package/src/lib/services/meta/types.ts

@@ -0,0 +1,13 @@
+export interface PageMetadata {
+  title: string;
+  description: string;
+  keywords?: string;
+  ogImage?: string;
+  type?: 'website' | 'article';
+}
+
+export interface MetaConfig {
+  baseUrl: string;
+  siteName: string;
+  defaultImage?: string;
+}

package/src/lib/services/modal/modal.service.ts

@@ -0,0 +1,244 @@
+import { Injectable, Type } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import {
+  ModalMetadata,
+  SimpleModalMetadata,
+  ModalResult,
+  ModalButton,
+  MODAL_SIZES,
+  DEFAULT_MODAL_CONFIRM_BUTTON,
+  DEFAULT_MODAL_CANCEL_BUTTON,
+} from './types';
+import { SimpleModalContentComponent } from './simple-modal-content.component';
+
+/**
+ * ModalService
+ *
+ * A service for creating and managing modals with various configurations.
+ *
+ * @example Basic component modal
+ * ```typescript
+ * const result = await modalService.open({
+ *   component: MyFormComponent,
+ *   componentProps: { userId: 123 },
+ *   header: { title: 'Edit User', showCloseButton: true },
+ *   size: 'medium'
+ * });
+ *
+ * if (result.role === 'confirm') {
+ *   console.log('Saved:', result.data);
+ * }
+ * ```
+ *
+ * @example Simple content modal
+ * ```typescript
+ * await modalService.openSimple({
+ *   title: 'Terms of Service',
+ *   content: '<p>Terms content here...</p>',
+ *   size: 'large',
+ *   showCloseButton: true
+ * });
+ * ```
+ *
+ * @example Sheet modal (mobile)
+ * ```typescript
+ * const result = await modalService.openSheet({
+ *   component: FilterComponent,
+ *   breakpoints: {
+ *     initialBreakpoint: 0.5,
+ *     breakpoints: [0, 0.5, 1],
+ *     showHandle: true
+ *   }
+ * });
+ * ```
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class ModalService {
+  constructor(private modalController: ModalController) {}
+
+  /**
+   * Opens a modal with a component.
+   * @param options - Modal configuration
+   * @returns Promise resolving to the modal result
+   */
+  async open<T = any, R = any>(options: ModalMetadata<T>): Promise<ModalResult<R>> {
+    const size = MODAL_SIZES[options.size || 'medium'];
+    const cssClasses = this.buildCssClasses(options);
+
+    const modal = await this.modalController.create({
+      component: options.component,
+      componentProps: {
+        ...options.componentProps,
+        // Pass modal reference for dismiss from within component
+        _modalRef: {
+          dismiss: (data?: any, role?: string) => modal.dismiss(data, role),
+        },
+      },
+      id: options.id,
+      showBackdrop: options.showBackdrop ?? true,
+      backdropDismiss: options.backdropDismiss ?? true,
+      keyboardClose: options.keyboardClose ?? true,
+      cssClass: cssClasses,
+      mode: options.mode,
+      animated: options.animated ?? true,
+      canDismiss: this.normalizeCanDismiss(options.canDismiss ?? true),
+      presentingElement: options.presentingElement,
+      // Sheet modal options
+      initialBreakpoint: options.breakpoints?.initialBreakpoint,
+      breakpoints: options.breakpoints?.breakpoints,
+      handle: options.breakpoints?.showHandle,
+      handleBehavior: options.breakpoints?.handleBehavior,
+    });
+
+    // Apply custom size styles
+    if (options.width || options.height || size) {
+      const modalEl = modal as HTMLIonModalElement;
+      modalEl.style.setProperty('--width', options.width || size.width || 'auto');
+      modalEl.style.setProperty('--height', options.height || size.height || '50vh');
+    }
+
+    await modal.present();
+    const { data, role } = await modal.onDidDismiss();
+
+    return { data, role };
+  }
+
+  /**
+   * Opens a simple content modal without a custom component.
+   * Uses Ionic's alert-like styling but with modal capabilities.
+   * @param options - Simple modal configuration
+   * @returns Promise resolving to the modal result
+   */
+  async openSimple(options: SimpleModalMetadata): Promise<ModalResult> {
+    return this.open({
+      component: SimpleModalContentComponent,
+      componentProps: {
+        title: options.title,
+        content: options.content,
+        buttons: options.buttons || [DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON],
+        showCloseButton: options.showCloseButton ?? true,
+      },
+      size: options.size || 'medium',
+      backdropDismiss: options.backdropDismiss ?? true,
+      cssClass: ['simple-modal', options.cssClass].filter(Boolean).join(' '),
+    });
+  }
+
+  /**
+   * Opens a confirmation modal.
+   * @param title - Modal title
+   * @param message - Modal message
+   * @param confirmButton - Confirm button config (optional)
+   * @param cancelButton - Cancel button config (optional)
+   * @returns Promise resolving to true if confirmed
+   */
+  async confirm(
+    title: string,
+    message: string,
+    confirmButton?: Partial<ModalButton>,
+    cancelButton?: Partial<ModalButton>
+  ): Promise<boolean> {
+    const result = await this.openSimple({
+      title,
+      content: message,
+      size: 'small',
+      showCloseButton: false,
+      backdropDismiss: false,
+      buttons: [
+        { ...DEFAULT_MODAL_CANCEL_BUTTON, ...cancelButton },
+        { ...DEFAULT_MODAL_CONFIRM_BUTTON, ...confirmButton },
+      ],
+    });
+
+    return result.role === 'confirm';
+  }
+
+  /**
+   * Opens a sheet modal (iOS-style bottom sheet).
+   * @param options - Modal configuration with sheet-specific options
+   * @returns Promise resolving to the modal result
+   */
+  async openSheet<T = any, R = any>(
+    options: Omit<ModalMetadata<T>, 'breakpoints'> & {
+      initialBreakpoint?: number;
+      breakpoints?: number[];
+      showHandle?: boolean;
+    }
+  ): Promise<ModalResult<R>> {
+    return this.open({
+      ...options,
+      breakpoints: {
+        initialBreakpoint: options.initialBreakpoint ?? 0.5,
+        breakpoints: options.breakpoints ?? [0, 0.5, 1],
+        showHandle: options.showHandle ?? true,
+      },
+      cssClass: ['sheet-modal', options.cssClass].filter(Boolean).join(' '),
+    });
+  }
+
+  /**
+   * Opens a fullscreen modal.
+   * @param options - Modal configuration
+   * @returns Promise resolving to the modal result
+   */
+  async openFullscreen<T = any, R = any>(options: ModalMetadata<T>): Promise<ModalResult<R>> {
+    return this.open({
+      ...options,
+      size: 'full',
+      cssClass: ['fullscreen-modal', options.cssClass].filter(Boolean).join(' '),
+    });
+  }
+
+  /**
+   * Dismisses the top-most modal.
+   * @param data - Optional data to return
+   * @param role - Optional role
+   */
+  async dismiss(data?: any, role?: string): Promise<boolean> {
+    return this.modalController.dismiss(data, role);
+  }
+
+  /**
+   * Gets the top-most modal.
+   */
+  async getTop(): Promise<HTMLIonModalElement | undefined> {
+    return this.modalController.getTop();
+  }
+
+  private normalizeCanDismiss(
+    canDismiss: boolean | (() => boolean | Promise<boolean>)
+  ): boolean | ((data?: any, role?: string) => Promise<boolean>) {
+    if (typeof canDismiss === 'boolean') {
+      return canDismiss;
+    }
+    // Wrap the function to ensure it returns a Promise
+    return async (data?: any, role?: string) => {
+      const result = canDismiss();
+      return Promise.resolve(result);
+    };
+  }
+
+  private buildCssClasses(options: ModalMetadata): string {
+    const classes: string[] = ['val-modal'];
+
+    if (options.size) {
+      classes.push(`modal-${options.size}`);
+    }
+
+    if (options.header) {
+      classes.push('modal-with-header');
+    }
+
+    if (options.footer) {
+      classes.push('modal-with-footer');
+    }
+
+    if (options.cssClass) {
+      classes.push(options.cssClass);
+    }
+
+    return classes.join(' ');
+  }
+}