valtech-components 2.0.787 → 2.0.795

package/src/lib/services/confirmation-dialog/confirmation-dialog.service.ts

@@ -0,0 +1,206 @@
+import { Injectable, inject } from '@angular/core';
+import { AlertController } from '@ionic/angular/standalone';
+import {
+  ConfirmationDialogMetadata,
+  ConfirmationResult,
+  ConfirmationButton,
+  DEFAULT_CONFIRM_BUTTON,
+  DEFAULT_CANCEL_BUTTON,
+} from './types';
+
+/**
+ * Service for displaying confirmation dialogs.
+ *
+ * @example Basic usage
+ * const result = await confirmationService.confirm({
+ *   title: 'Delete Item',
+ *   message: 'Are you sure you want to delete this item?',
+ * });
+ *
+ * if (result.confirmed) {
+ *   // User confirmed
+ * }
+ *
+ * @example Custom buttons
+ * const result = await confirmationService.confirm({
+ *   title: 'Save Changes',
+ *   message: 'Do you want to save your changes before leaving?',
+ *   confirmButton: { text: 'Save', color: 'success' },
+ *   cancelButton: { text: 'Discard', color: 'danger' },
+ *   extraButtons: [{ text: 'Cancel', role: 'cancel' }]
+ * });
+ *
+ * @example Destructive action
+ * const result = await confirmationService.confirmDestructive({
+ *   title: 'Delete Account',
+ *   message: 'This action cannot be undone. Are you sure?',
+ * });
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfirmationDialogService {
+  private alertController = inject(AlertController);
+
+  /**
+   * Shows a confirmation dialog and returns the result.
+   * @param options - Configuration for the dialog
+   * @returns Promise resolving to the confirmation result
+   */
+  async confirm(options: ConfirmationDialogMetadata): Promise<ConfirmationResult> {
+    const buttons = this.buildButtons(options);
+
+    // Default: usa val-alert (estilo iOS dark unificado de la lib)
+    const userClasses = options.cssClass
+      ? Array.isArray(options.cssClass)
+        ? options.cssClass
+        : [options.cssClass]
+      : [];
+    const cssClass = ['val-alert', ...userClasses];
+
+    const alert = await this.alertController.create({
+      header: options.title,
+      subHeader: options.subHeader,
+      message: options.message,
+      buttons,
+      backdropDismiss: options.backdropDismiss ?? false,
+      cssClass,
+      mode: options.mode ?? 'ios',
+      translucent: options.translucent ?? true,
+      animated: options.animated ?? true,
+    });
+
+    await alert.present();
+    const { role, data } = await alert.onDidDismiss();
+
+    // 'destructive' es semánticamente una confirmación (acción peligrosa
+    // tomada por el user). 'cancel' o backdrop dismiss → no confirmado.
+    return {
+      confirmed: role === 'confirm' || role === 'destructive',
+      role,
+      data,
+    };
+  }
+
+  /**
+   * Shows a simple confirmation dialog with default buttons.
+   * @param title - Dialog title
+   * @param message - Dialog message
+   * @returns Promise resolving to true if confirmed, false otherwise
+   */
+  async confirmSimple(title: string, message: string): Promise<boolean> {
+    const result = await this.confirm({ title, message });
+    return result.confirmed;
+  }
+
+  /**
+   * Shows a destructive action confirmation with red confirm button.
+   * @param options - Configuration for the dialog
+   * @returns Promise resolving to the confirmation result
+   */
+  async confirmDestructive(
+    options: Omit<ConfirmationDialogMetadata, 'confirmButton'> & {
+      confirmButton?: Partial<ConfirmationButton>;
+    }
+  ): Promise<ConfirmationResult> {
+    // Visualmente idéntico a confirm() — sin colores, solo cambia el role
+    // semánticamente a 'destructive' para a11y/screen readers.
+    return this.confirm({
+      ...options,
+      confirmButton: {
+        text: options.confirmButton?.text || 'Delete',
+        role: 'destructive',
+        ...options.confirmButton,
+      },
+    });
+  }
+
+  /**
+   * Shows an info alert with just an OK button.
+   * @param title - Alert title
+   * @param message - Alert message
+   */
+  async alert(title: string, message: string): Promise<void> {
+    const alert = await this.alertController.create({
+      header: title,
+      message,
+      buttons: [{ text: 'OK', role: 'confirm' }],
+    });
+
+    await alert.present();
+    await alert.onDidDismiss();
+  }
+
+  /**
+   * Shows a three-option dialog (Save, Discard, Cancel).
+   * Common for unsaved changes scenarios.
+   * @param title - Dialog title
+   * @param message - Dialog message
+   * @returns Promise resolving to 'save' | 'discard' | 'cancel'
+   */
+  async confirmSaveDiscard(title: string, message: string): Promise<'save' | 'discard' | 'cancel'> {
+    const alert = await this.alertController.create({
+      header: title,
+      message,
+      backdropDismiss: false,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Discard',
+          role: 'destructive',
+          cssClass: 'text-danger',
+        },
+        {
+          text: 'Save',
+          role: 'confirm',
+        },
+      ],
+    });
+
+    await alert.present();
+    const { role } = await alert.onDidDismiss();
+
+    if (role === 'confirm') return 'save';
+    if (role === 'destructive') return 'discard';
+    return 'cancel';
+  }
+
+  private buildButtons(options: ConfirmationDialogMetadata): any[] {
+    const buttons: any[] = [];
+
+    // Cancel button — sin color ionic por default (el CSS de val-alert se encarga)
+    const cancelBtn = options.cancelButton || DEFAULT_CANCEL_BUTTON;
+    buttons.push({
+      text: cancelBtn.text,
+      role: cancelBtn.role || 'cancel',
+      cssClass: cancelBtn.cssClass,
+      handler: cancelBtn.handler,
+    });
+
+    // Extra buttons (if any)
+    if (options.extraButtons) {
+      options.extraButtons.forEach(btn => {
+        buttons.push({
+          text: btn.text,
+          role: btn.role,
+          cssClass: btn.cssClass,
+          handler: btn.handler,
+        });
+      });
+    }
+
+    // Confirm button
+    const confirmBtn = options.confirmButton || DEFAULT_CONFIRM_BUTTON;
+    buttons.push({
+      text: confirmBtn.text,
+      role: confirmBtn.role || 'confirm',
+      cssClass: confirmBtn.cssClass,
+      handler: confirmBtn.handler,
+    });
+
+    return buttons;
+  }
+}

package/src/lib/services/confirmation-dialog/types.ts

@@ -0,0 +1,74 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Button configuration for confirmation dialog.
+ */
+export interface ConfirmationButton {
+  /** Button text */
+  text: string;
+  /** Button role */
+  role?: 'cancel' | 'destructive' | 'confirm';
+  /** Button color (Ionic color) */
+  color?: Color;
+  /** CSS class for the button */
+  cssClass?: string;
+  /** Handler function called when button is clicked */
+  handler?: () => void | Promise<void> | boolean | Promise<boolean>;
+}
+
+/**
+ * Metadata for the confirmation dialog.
+ */
+export interface ConfirmationDialogMetadata {
+  /** Dialog title */
+  title: string;
+  /** Dialog message/content */
+  message: string;
+  /** Confirm button configuration */
+  confirmButton?: ConfirmationButton;
+  /** Cancel button configuration */
+  cancelButton?: ConfirmationButton;
+  /** Additional buttons (between cancel and confirm) */
+  extraButtons?: ConfirmationButton[];
+  /** Allow dismissing by clicking backdrop */
+  backdropDismiss?: boolean;
+  /** CSS class(es) for the alert */
+  cssClass?: string | string[];
+  /** Alert mode */
+  mode?: 'ios' | 'md';
+  /** Unique token identifier */
+  token?: string;
+  /** Translucent backdrop */
+  translucent?: boolean;
+  /** Animated transitions */
+  animated?: boolean;
+  /** Header subtitle */
+  subHeader?: string;
+}
+
+/**
+ * Result from confirmation dialog.
+ */
+export interface ConfirmationResult {
+  /** Whether the dialog was confirmed */
+  confirmed: boolean;
+  /** The role of the button clicked */
+  role?: string;
+  /** Any data returned */
+  data?: any;
+}
+
+/**
+ * Default confirmation dialog options.
+ */
+export const DEFAULT_CONFIRM_BUTTON: ConfirmationButton = {
+  text: 'Confirm',
+  role: 'confirm',
+  color: 'primary',
+};
+
+export const DEFAULT_CANCEL_BUTTON: ConfirmationButton = {
+  text: 'Cancel',
+  role: 'cancel',
+  color: 'medium',
+};

package/src/lib/services/content/content-types/blog.ts

@@ -0,0 +1,324 @@
+/**
+ * Blog Post Content Type
+ *
+ * Represents a blog post with title, excerpt, cover image,
+ * and structured content blocks.
+ */
+
+import { ArticleMetadata } from '../../../components/organisms/article/types';
+import { ContentDocument, ContentMeta, ContentBlock, ContentConfig } from '../types';
+import { ContentTransformer } from '../transformer';
+
+/**
+ * Blog post document interface
+ */
+export interface BlogPost extends ContentDocument<'blog'> {
+  /** Blog post title */
+  title: string;
+  /** Short excerpt/summary for listings */
+  excerpt: string;
+  /** Cover image URL */
+  coverImage?: string;
+  /** Estimated reading time in minutes */
+  readingTime?: number;
+  /** Featured post flag */
+  featured?: boolean;
+}
+
+/**
+ * Calculates estimated reading time based on word count
+ * @param content - Array of content blocks
+ * @returns Estimated minutes to read
+ */
+function calculateReadingTime(content: ContentBlock[]): number {
+  const wordsPerMinute = 200;
+  let wordCount = 0;
+
+  for (const block of content) {
+    if ('text' in block && typeof block.text === 'string') {
+      wordCount += block.text.split(/\s+/).length;
+    }
+    if (block.type === 'list') {
+      wordCount += block.items.join(' ').split(/\s+/).length;
+    }
+    if (block.type === 'code') {
+      wordCount += block.code.split(/\s+/).length * 0.5; // Code reads faster
+    }
+  }
+
+  return Math.max(1, Math.ceil(wordCount / wordsPerMinute));
+}
+
+/**
+ * BlogPostBuilder provides a fluent API for creating blog posts.
+ *
+ * @example
+ * ```typescript
+ * const post = new BlogPostBuilder()
+ *   .title('My First Post')
+ *   .excerpt('A brief introduction...')
+ *   .author('John Doe', '/avatars/john.jpg')
+ *   .coverImage('/images/post-cover.jpg')
+ *   .heading('Introduction')
+ *   .paragraph('Welcome to my blog...')
+ *   .build();
+ *
+ * // Convert to ArticleMetadata
+ * const article = post.toArticle();
+ * ```
+ */
+export class BlogPostBuilder {
+  private post: Partial<BlogPost> = {
+    type: 'blog',
+    content: [],
+    meta: {},
+    config: { showMeta: true },
+  };
+
+  /**
+   * Sets the blog post title
+   */
+  title(title: string): this {
+    this.post.title = title;
+    return this;
+  }
+
+  /**
+   * Sets the blog post excerpt
+   */
+  excerpt(excerpt: string): this {
+    this.post.excerpt = excerpt;
+    return this;
+  }
+
+  /**
+   * Sets the cover image URL
+   */
+  coverImage(url: string): this {
+    this.post.coverImage = url;
+    return this;
+  }
+
+  /**
+   * Marks the post as featured
+   */
+  featured(value: boolean = true): this {
+    this.post.featured = value;
+    return this;
+  }
+
+  /**
+   * Sets the post author
+   */
+  author(name: string, avatar?: string, role?: string): this {
+    this.post.meta = {
+      ...this.post.meta,
+      author: { name, avatar, role },
+    };
+    return this;
+  }
+
+  /**
+   * Sets the publication date
+   */
+  publishedAt(date: Date | string): this {
+    this.post.meta = {
+      ...this.post.meta,
+      publishedAt: date,
+    };
+    return this;
+  }
+
+  /**
+   * Sets tags for the post
+   */
+  tags(...tags: string[]): this {
+    this.post.meta = {
+      ...this.post.meta,
+      tags,
+    };
+    return this;
+  }
+
+  /**
+   * Sets the category
+   */
+  category(category: string): this {
+    this.post.meta = {
+      ...this.post.meta,
+      category,
+    };
+    return this;
+  }
+
+  /**
+   * Sets the slug
+   */
+  slug(slug: string): this {
+    this.post.meta = {
+      ...this.post.meta,
+      slug,
+    };
+    return this;
+  }
+
+  /**
+   * Sets the ID
+   */
+  id(id: string): this {
+    this.post.meta = {
+      ...this.post.meta,
+      id,
+    };
+    return this;
+  }
+
+  // Content block methods
+
+  /**
+   * Adds a heading block
+   */
+  heading(text: string, level: 1 | 2 | 3 = 2): this {
+    this.post.content!.push({ type: 'heading', level, text });
+    return this;
+  }
+
+  /**
+   * Adds a paragraph block
+   */
+  paragraph(text: string, emphasis?: boolean): this {
+    this.post.content!.push({ type: 'paragraph', text, emphasis });
+    return this;
+  }
+
+  /**
+   * Adds a quote block
+   */
+  quote(text: string, author?: string, source?: string): this {
+    this.post.content!.push({ type: 'quote', text, author, source });
+    return this;
+  }
+
+  /**
+   * Adds a code block
+   */
+  code(code: string, language?: string): this {
+    this.post.content!.push({ type: 'code', code, language });
+    return this;
+  }
+
+  /**
+   * Adds an unordered list
+   */
+  list(items: string[]): this {
+    this.post.content!.push({ type: 'list', items });
+    return this;
+  }
+
+  /**
+   * Adds an ordered/numbered list
+   */
+  orderedList(items: string[]): this {
+    this.post.content!.push({ type: 'list', items, ordered: true });
+    return this;
+  }
+
+  /**
+   * Adds a checklist
+   */
+  checklist(items: string[]): this {
+    this.post.content!.push({ type: 'list', items, checklist: true });
+    return this;
+  }
+
+  /**
+   * Adds an image block
+   */
+  image(src: string, alt: string, caption?: string): this {
+    this.post.content!.push({ type: 'image', src, alt, caption });
+    return this;
+  }
+
+  /**
+   * Adds a callout/note block
+   */
+  callout(text: string, variant: 'info' | 'warning' | 'success' | 'error' = 'info', title?: string): this {
+    this.post.content!.push({ type: 'callout', text, variant, title });
+    return this;
+  }
+
+  /**
+   * Adds a divider
+   */
+  divider(style?: 'line' | 'dots' | 'space'): this {
+    this.post.content!.push({ type: 'divider', style });
+    return this;
+  }
+
+  /**
+   * Adds a button/CTA
+   */
+  button(text: string, href?: string, color?: 'primary' | 'secondary' | 'success'): this {
+    this.post.content!.push({ type: 'button', text, href, color });
+    return this;
+  }
+
+  /**
+   * Configures rendering options
+   */
+  config(config: Partial<ContentConfig>): this {
+    this.post.config = { ...this.post.config, ...config };
+    return this;
+  }
+
+  /**
+   * Builds the final BlogPost object
+   */
+  build(): BlogPost {
+    const content = this.post.content || [];
+
+    // Auto-calculate reading time if not set
+    if (!this.post.readingTime) {
+      this.post.readingTime = calculateReadingTime(content);
+    }
+
+    return {
+      type: 'blog',
+      title: this.post.title || 'Untitled Post',
+      excerpt: this.post.excerpt || '',
+      coverImage: this.post.coverImage,
+      readingTime: this.post.readingTime,
+      featured: this.post.featured,
+      meta: this.post.meta as ContentMeta,
+      content,
+      config: this.post.config,
+    };
+  }
+
+  /**
+   * Builds and converts to ArticleMetadata
+   */
+  toArticle(): ArticleMetadata {
+    return ContentTransformer.toArticle(this.build());
+  }
+
+  /**
+   * Resets the builder for reuse
+   */
+  clear(): this {
+    this.post = {
+      type: 'blog',
+      content: [],
+      meta: {},
+      config: { showMeta: true },
+    };
+    return this;
+  }
+}
+
+/**
+ * Creates a new BlogPostBuilder instance
+ */
+export function blogPost(): BlogPostBuilder {
+  return new BlogPostBuilder();
+}