valtech-components 2.0.795 → 2.0.796

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

@@ -1,362 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,244 +0,0 @@
-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(' ');
-  }
-}