valtech-components 2.0.192 → 2.0.193

package/fesm2022/valtech-components.mjs

@@ -15,8 +15,22 @@ import * as i2 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
 import { BehaviorSubject } from 'rxjs';
 
+/**
+ * val-avatar
+ *
+ * Displays a user or profile image, optionally with a box style and different sizes.
+ *
+ * @example
+ * <val-avatar [props]="{ image: 'url', size: 'medium', box: true }" (onClick)="handler()"></val-avatar>
+ *
+ * @input props: AvatarMetadata - Configuration for the avatar (image, size, box, default image)
+ * @output onClick - Emits when the avatar is clicked
+ */
 class AvatarComponent {
     constructor() {
+        /**
+         * Event emitted when the avatar is clicked.
+         */
         this.onClick = new EventEmitter();
     }
     ngOnInit() { }
@@ -44,7 +58,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 /* eslint-disable no-underscore-dangle */
+/**
+ * Service for registering and managing custom Ionicons icons in the application.
+ * Automatically registers a set of commonly used icons on initialization.
+ */
 class IconService {
+    /**
+     * Registers a set of Ionicons icons for use throughout the app.
+     */
     constructor() {
         addIcons({
             addOutline,
@@ -81,8 +102,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * val-box
+ *
+ * A stylized card container for grouping content, with optional icon, color, border, and click event.
+ *
+ * @example
+ * <val-box [props]="{ color: 'primary', rounded: true, icon: 'star' }" (onClick)="handler()">
+ *   <div body>Content here</div>
+ * </val-box>
+ *
+ * @input props: BoxMetadata - Configuration for the box (color, icon, border, etc.)
+ * @output onClick - Emits when the box or its icon is clicked
+ */
 class BoxComponent {
     constructor(icon) {
+        /**
+         * Event emitted when the box or its icon is clicked.
+         */
         this.onClick = new EventEmitter();
     }
     ngOnInit() { }
@@ -196,7 +233,16 @@ var ToolbarActionType;
     ToolbarActionType["BUTTON"] = "BUTTON";
 })(ToolbarActionType || (ToolbarActionType = {}));
 
+/**
+ * Service for downloading files and opening links in new tabs.
+ * Provides utility methods for browser-based file downloads and extracting file names from URLs.
+ */
 class DownloadService {
+    /**
+     * Extracts the file name from a given URL.
+     * @param url The file URL
+     * @returns The file name
+     */
     getFileNameFromUrl(url) {
         try {
             const pathSegments = url.split('/');
@@ -209,6 +255,10 @@ class DownloadService {
             return 'filename';
         }
     }
+    /**
+     * Opens a given URL in a new browser tab and triggers download if possible.
+     * @param url The file URL
+     */
     openNewTab(url) {
         if (url) {
             const fileName = this.getFileNameFromUrl(url);
@@ -224,6 +274,10 @@ class DownloadService {
             console.error('La URL no está definida');
         }
     }
+    /**
+     * Downloads a file from the browser using fetch and triggers a download dialog.
+     * @param url The file URL
+     */
     downloadLinkFromBrowser(url) {
         console.log('trying to download file from url');
         if (url) {
@@ -258,13 +312,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 /* eslint-disable no-underscore-dangle */
+/**
+ * Service for opening URLs using Capacitor's InAppBrowser plugin.
+ * Provides a method to open links in a popover-style browser within the app.
+ */
 class InAppBrowserService {
     constructor() {
+        /**
+         * Default options for the in-app browser.
+         */
         this.options = {
             presentationStyle: 'popover',
             url: '',
         };
     }
+    /**
+     * Opens a URL using Capacitor's InAppBrowser with the configured options.
+     * @param url The URL to open
+     */
     async openWithInAppBrowser(url) {
         await Browser.open({ ...this.options, url });
     }
@@ -278,14 +343,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Service for navigation and routing within the application.
+ * Supports navigation with data transfer, in-app browser, and opening links in new tabs.
+ */
 class NavigationService {
     constructor() {
         this.router = inject(Router);
         this.inAppBrowser = inject(InAppBrowserService);
     }
+    /**
+     * Opens a URL using the in-app browser service.
+     * @param url The URL to open
+     */
     navigateInApp(url) {
         this.inAppBrowser.openWithInAppBrowser(url);
     }
+    /**
+     * Navigates to a route and transfers data using Angular Router state.
+     * @param route The route to navigate to
+     * @param dataTransfer The data to transfer
+     */
     navigateWithData(route, dataTransfer) {
         const navigationExtras = {
             state: {
@@ -294,12 +372,20 @@ class NavigationService {
         };
         this.router.navigate([route], navigationExtras);
     }
+    /**
+     * Navigates to a URL using Angular Router.
+     * @param url The URL to navigate to
+     */
     navigateByUrl(url) {
         this.router
             .navigateByUrl(url)
             .then(response => { })
             .catch(error => { });
     }
+    /**
+     * Opens a URL in a new browser tab.
+     * @param url The URL to open
+     */
     openInNewTab(url) {
         window.open(url, '_blank', 'noopener,noreferrer');
     }
@@ -313,11 +399,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * val-button
+ *
+ * A customizable button supporting icons, loading state, navigation, and custom handlers.
+ *
+ * @example
+ * <val-button [props]="{ text: 'Save', color: 'primary', icon: { name: 'save', slot: 'start' } }" (onClick)="handler()"></val-button>
+ *
+ * @input props: ButtonMetadata - Configuration for the button (text, color, icon, state, etc.)
+ * @output onClick - Emits when the button is clicked
+ */
 class ButtonComponent {
     constructor(download, icon, navigation) {
         this.download = download;
         this.navigation = navigation;
         this.states = ComponentStates;
+        /**
+         * Event emitted when the button is clicked.
+         */
         this.onClick = new EventEmitter();
     }
     ngOnInit() { }
@@ -601,6 +701,16 @@ const SecondarySolidBlockIconHrefButton = (text, icon, href, target) => {
     return { ...SecondarySolidBlockIconButton(text, icon), href, target };
 };
 
+/**
+ * val-display
+ *
+ * Displays prominent text or titles with custom color and size.
+ *
+ * @example
+ * <val-display [props]="{ content: 'Title', color: 'dark', size: 'large' }"></val-display>
+ *
+ * @input props: DisplayMetadata - Configuration for the display (content, color, size)
+ */
 class DisplayComponent {
     constructor() { }
     ngOnInit() { }
@@ -626,7 +736,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
-//TODO: fix the class name colission between medium size and medium color
+/**
+ * val-divider
+ *
+ * A horizontal divider for separating content sections.
+ *
+ * @example
+ * <val-divider [props]="{ size: 'medium', color: 'light', fill: 'solid' }"></val-divider>
+ *
+ * @input props: DividerMetadata - Configuration for the divider (size, color, fill)
+ */
 class DividerComponent {
     constructor() { }
     ngOnInit() { }
@@ -640,6 +759,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-href
+ *
+ * A styled anchor/link element, supporting download and click events.
+ *
+ * @example
+ * <val-href [props]="{ url: 'https://...', text: 'Open', color: 'primary', download: true }" (onClick)="handler()"></val-href>
+ *
+ * @input props: HrefMetadata - Configuration for the link (url, text, color, download, etc.)
+ * @output onClick - Emits when the link is clicked
+ */
 class HrefComponent {
     constructor(downloadService) {
         this.downloadService = downloadService;
@@ -686,6 +816,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * val-icon
+ *
+ * Displays an icon from the Ionicons set, with configurable size and color.
+ *
+ * @example
+ * <val-icon [props]="{ name: 'star', size: 'large', color: 'warning' }"></val-icon>
+ *
+ * @input props: IconMetadata - Configuration for the icon (name, color, size)
+ */
 class IconComponent {
     constructor(service) { }
     ngOnInit() { }
@@ -699,6 +839,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-image
+ *
+ * Displays an image with various display options (bordered, shaded, dark, etc).
+ *
+ * @example
+ * <val-image [props]="{ src: 'url', alt: 'desc', width: 100, height: 100, bordered: true }"></val-image>
+ *
+ * @input props: ImageMetadata - Configuration for the image (src, alt, size, mode, etc.)
+ */
 class ImageComponent {
     constructor() {
         this.available = true;
@@ -715,7 +865,7 @@ class ImageComponent {
       <img
         [ngClass]="['image', props.mode, props.size]"
         [ngStyle]="{
-          content: 'var(' + props.src + ')'
+          content: 'var(' + props.src + ')',
         }"
         [class.bordered]="props.bordered"
         [class.shaded]="props.shaded"
@@ -749,7 +899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <img
         [ngClass]="['image', props.mode, props.size]"
         [ngStyle]="{
-          content: 'var(' + props.src + ')'
+          content: 'var(' + props.src + ')',
         }"
         [class.bordered]="props.bordered"
         [class.shaded]="props.shaded"
@@ -779,6 +929,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-progress-bar
+ *
+ * A progress bar for indicating completion or loading state.
+ *
+ * @example
+ * <val-progress-bar [props]="{ progress: 0.5, color: 'success', size: 'small' }"></val-progress-bar>
+ *
+ * @input props: ProgressBarMetadata - Configuration for the progress bar (progress, color, size, etc.)
+ */
 class ProgressBarComponent {
     constructor() { }
     ngOnInit() { }
@@ -810,6 +970,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-text
+ *
+ * For displaying styled text with color, size, and bold options.
+ *
+ * @example
+ * <val-text [props]="{ content: 'Some text', color: 'medium', size: 'small', bold: true }"></val-text>
+ *
+ * @input props: TextMetadata - Configuration for the text (content, color, size, bold)
+ */
 class TextComponent {
     constructor() { }
     ngOnInit() { }
@@ -831,6 +1001,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-title
+ *
+ * A styled title or heading, with options for size, color, and boldness.
+ *
+ * @example
+ * <val-title [props]="{ content: 'Section', size: 'large', color: 'primary', bold: true }"></val-title>
+ *
+ * @input props: TitleMetadata - Configuration for the title (content, color, size, bold, thin)
+ */
 class TitleComponent {
     constructor() { }
     ngOnInit() { }
@@ -862,6 +1042,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-alert-box
+ *
+ * Displays an alert box with an icon and text, using a styled box container.
+ *
+ * @example
+ * <val-alert-box [props]="{ box: {...}, icon: {...}, text: {...} }"></val-alert-box>
+ *
+ * @input props: AlertBoxMetadata - Configuration for the alert box (box, icon, text)
+ */
 class AlertBoxComponent {
     constructor() { }
     ngOnInit() { }
@@ -889,8 +1079,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-button-group
+ *
+ * Displays a group of buttons with configurable layout and position.
+ *
+ * @example
+ * <val-button-group [props]="{ buttons: [...], position: 'center', columned: false }" (onClick)="handler($event)"></val-button-group>
+ *
+ * @input props: ButtonGroupMetadata - Configuration for the button group (buttons, position, columned)
+ * @output onClick - Emits the token of the clicked button
+ */
 class ButtonGroupComponent {
     constructor() {
+        /**
+         * Event emitted with the token of the clicked button.
+         */
         this.onClick = new EventEmitter();
     }
     ngOnInit() { }
@@ -949,8 +1153,22 @@ var CardSection;
     CardSection[CardSection["footerExtra"] = 4] = "footerExtra";
 })(CardSection || (CardSection = {}));
 
+/**
+ * val-card
+ *
+ * A flexible card component supporting images, titles, content, actions, and custom sections.
+ *
+ * @example
+ * <val-card [props]="{ type: 'native', title: 'Card', image: 'url', content: '...', actions: [...] }" (onClick)="handler($event)"></val-card>
+ *
+ * @input props: CardMetadata - Configuration for the card (type, title, image, content, actions, etc.)
+ * @output onClick - Emits a CardClickEvent when the card or an action is clicked
+ */
 class CardComponent {
     constructor() {
+        /**
+         * Event emitted when the card or an action is clicked.
+         */
         this.onClick = new EventEmitter();
         this.types = CardType;
         this.actionTypes = ToolbarActionType;
@@ -1303,6 +1521,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * val-check-input
+ *
+ * A simple checkbox input for boolean values or agreements.
+ *
+ * @example
+ * <val-check-input></val-check-input>
+ */
 class CheckInputComponent {
     constructor() { }
     ngOnInit() { }
@@ -1314,6 +1540,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: 'val-check-input', standalone: true, imports: [CommonModule, IonCheckbox], template: ` <ion-checkbox>I agree to the terms and conditions</ion-checkbox> ` }]
         }], ctorParameters: () => [] });
 
+/**
+ * val-comment-input
+ *
+ * A textarea input for multi-line comments, integrated with Angular forms.
+ *
+ * @example
+ * <val-comment-input [props]="{ control: myControl, range: { max: 200 } }"></val-comment-input>
+ *
+ * @input props: InputMetadata - Configuration for the textarea (form control, range, etc.)
+ */
 class CommentInputComponent {
     constructor() { }
     ngOnInit() { }
@@ -1331,6 +1567,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-content-loader
+ *
+ * A loading spinner with optional text, for indicating loading states.
+ *
+ * @example
+ * <val-content-loader [props]="{ size: 'large', color: 'primary', text: 'Loading...' }"></val-content-loader>
+ *
+ * @input props: ContentLoaderMetadata - Configuration for the loader (size, color, text, etc.)
+ */
 class ContentLoaderComponent {
     constructor() { }
     ngOnInit() { }
@@ -1358,6 +1604,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-date-input
+ *
+ * A date picker input integrated with Angular forms, using Ionic's datetime component.
+ *
+ * @example
+ * <val-date-input [props]="{ control: myControl, hint: 'Select a date' }"></val-date-input>
+ *
+ * @input props: InputMetadata - Configuration for the date input (form control, hint, etc.)
+ */
 class DateInputComponent {
     constructor() { }
     ngOnInit() { }
@@ -1425,6 +1681,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-email-input
+ *
+ * An email input field integrated with Angular forms.
+ *
+ * @example
+ * <val-email-input [props]="{ control: myControl, placeholder: 'Enter your email' }"></val-email-input>
+ *
+ * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
+ */
 class EmailInputComponent {
     constructor() { }
     ngOnInit() { }
@@ -1438,6 +1704,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Resolves a color string to a valid CSS value for use in styles.
+ * Supports Ionic color names, CSS variables, and custom colors.
+ *
+ * @param color The color name, CSS variable, or custom color string
+ * @returns A valid CSS color value
+ *
+ * @example
+ * resolveColor('primary'); // returns 'var(--ion-color-primary)'
+ * resolveColor('--my-custom-color'); // returns 'var(--my-custom-color)'
+ * resolveColor('#ff0000'); // returns '#ff0000'
+ */
 function resolveColor(color) {
     // Si el color empieza con "--", se asume que es una variable CSS válida
     if (color.startsWith('--')) {
@@ -1463,6 +1741,16 @@ function resolveColor(color) {
     return color;
 }
 
+/**
+ * val-expandable-text
+ *
+ * A text component that can be expanded/collapsed to show more or less content.
+ *
+ * @example
+ * <val-expandable-text [props]="{ content: '...', limit: 180, color: 'primary', expandText: 'más' }"></val-expandable-text>
+ *
+ * @input props: ExpandableTextInput - Configuration for the expandable text (content, limit, color, expandText)
+ */
 class ExpandableTextComponent {
     constructor() {
         this.expanded = false;
@@ -1517,6 +1805,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-file-input
+ *
+ * A file input component for uploading files, integrated with Angular forms.
+ *
+ * @example
+ * <val-file-input [props]="{ control: myControl }"></val-file-input>
+ *
+ * @input props: InputMetadata - Configuration for the file input (form control, etc.)
+ */
 class FileInputComponent {
     constructor() {
         this.contrastButton = {
@@ -1551,7 +1849,7 @@ class FileInputComponent {
       </div>
       <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
     </div>
-  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
@@ -1572,14 +1870,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       </div>
       <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
     </div>
-  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:flex-start}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { fileInput: [{
+  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
-            }], props: [{
-                type: Input
             }] } });
 
+/**
+ * val-hint
+ *
+ * Displays validation error messages for a form input, using Angular forms.
+ *
+ * @example
+ * <val-hint [props]="{ control: myControl, errors: { required: 'Required field' } }"></val-hint>
+ *
+ * @input props: InputMetadata - Configuration for the input (form control, errors, etc.)
+ */
 class HintComponent {
     constructor() { }
     ngOnInit() { }
@@ -1627,6 +1935,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-hour-input
+ *
+ * A time picker input integrated with Angular forms, using Ionic's datetime component.
+ *
+ * @example
+ * <val-hour-input [props]="{ control: myControl }"></val-hour-input>
+ *
+ * @input props: InputMetadata - Configuration for the time input (form control, etc.)
+ */
 class HourInputComponent {
     constructor() { }
     ngOnInit() { }
@@ -1640,6 +1958,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-link
+ *
+ * A stylized link button with navigation support for internal, in-app, or new tab links.
+ *
+ * @example
+ * <val-link [props]="{ text: 'Go', color: 'primary', link: '/home', type: 'internal' }" (onClick)="handler($event)"></val-link>
+ *
+ * @input props: LinkMetadata - Configuration for the link (text, color, link, type, etc.)
+ * @output onClick - Emits the token of the clicked link
+ */
 class LinkComponent {
     constructor() {
         this.onClick = new EventEmitter();
@@ -1687,6 +2016,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * val-links-cake
+ *
+ * Displays a list of links with an optional title, styled as a "cake" of links.
+ *
+ * @example
+ * <val-links-cake [props]="{ title: 'Links', links: [...], size: 'medium' }"></val-links-cake>
+ *
+ * @input props: LinkCakeMetadata - Configuration for the links cake (title, links, size)
+ */
 class LinksCakeComponent {
     constructor() { }
     ngOnInit() { }
@@ -1722,12 +2061,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-notes-box
+ *
+ * Displays a styled notes/info box with optional prefix and configurable color, size, and padding.
+ *
+ * @example
+ * <val-notes-box [props]="{ text: 'Note', prefix: 'Info', color: 'primary', textColor: 'dark', size: 'medium', rounded: true, padding: '8px' }"></val-notes-box>
+ *
+ * @input props: NotesBoxMetadata - Configuration for the notes box (text, prefix, color, textColor, size, rounded, padding)
+ */
 class NotesBoxComponent {
     constructor() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotesBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NotesBoxComponent, isStandalone: true, selector: "val-notes-box", inputs: { props: "props" }, ngImport: i0, template: `
-    <val-box [props]="{ icon: '', bordered: false, color: props.color, leftBorder: true, rounded: props.rounded, padding: props.padding }">
+    <val-box
+      [props]="{
+        icon: '',
+        bordered: false,
+        color: props.color,
+        leftBorder: true,
+        rounded: props.rounded,
+        padding: props.padding,
+      }"
+    >
       <div [ngClass]="['content-container', props.size]" body>
         @if (props.prefix) {
           <val-text
@@ -1742,7 +2100,16 @@ class NotesBoxComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotesBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-notes-box', standalone: true, imports: [CommonModule, BoxComponent, TextComponent], template: `
-    <val-box [props]="{ icon: '', bordered: false, color: props.color, leftBorder: true, rounded: props.rounded, padding: props.padding }">
+    <val-box
+      [props]="{
+        icon: '',
+        bordered: false,
+        color: props.color,
+        leftBorder: true,
+        rounded: props.rounded,
+        padding: props.padding,
+      }"
+    >
       <div [ngClass]="['content-container', props.size]" body>
         @if (props.prefix) {
           <val-text
@@ -1757,6 +2124,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-number-input
+ *
+ * A number input field integrated with Angular forms.
+ *
+ * @example
+ * <val-number-input [props]="{ control: myControl, placeholder: 'Enter a number' }"></val-number-input>
+ *
+ * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
+ */
 class NumberInputComponent {
     constructor() { }
     ngOnInit() { }
@@ -1770,6 +2147,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-password-input
+ *
+ * A password input field with show/hide toggle, integrated with Angular forms.
+ *
+ * @example
+ * <val-password-input [props]="{ control: myControl, placeholder: 'Enter password' }"></val-password-input>
+ *
+ * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
+ */
 class PasswordInputComponent {
     constructor(icon) {
         this.hidePassword = true;
@@ -1809,6 +2196,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-pin-input
+ *
+ * A PIN code input using ng-otp-input, integrated with Angular forms.
+ *
+ * @example
+ * <val-pin-input [props]="{ control: myControl }"></val-pin-input>
+ *
+ * @input props: InputMetadata - Configuration for the PIN input (form control, etc.)
+ */
 class PinInputComponent {
     constructor() {
         this.codeLength = 5;
@@ -1850,6 +2247,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-title-block
+ *
+ * Displays a block of titles (above, main, below) with configurable styles and positions.
+ *
+ * @example
+ * <val-title-block [props]="{ title: {...}, aboveTitle: {...}, bellowTitle: {...}, position: 'center' }"></val-title-block>
+ *
+ * @input props: TitleBlockMetada - Configuration for the title block (title, aboveTitle, bellowTitle, position)
+ */
 class TitleBlockComponent {
     constructor() { }
     ngOnInit() { }
@@ -1924,6 +2331,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 //TODO: support automatic or manual interval for messages. Include the interval number as a parameter.
+/**
+ * val-progress-status
+ *
+ * Displays a progress bar with status messages and titles, useful for multi-step or loading processes.
+ *
+ * @example
+ * <val-progress-status [props]="{ progress: 0.5, color: 'primary', size: 'medium', titles: {...}, messages: [...] }"></val-progress-status>
+ *
+ * @input props: ProgressStatusMetadata - Configuration for the progress status (progress, color, size, titles, messages)
+ */
 class ProgressStatusComponent {
     constructor() {
         this.currentIndex = 0;
@@ -2013,6 +2430,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-prompter
+ *
+ * Displays a prompt/info box with text, actions (buttons/links), and custom styles.
+ *
+ * @example
+ * <val-prompter [props]="{ content: 'Message', buttons: [...], hrefs: [...], color: 'primary', size: 'medium' }"></val-prompter>
+ *
+ * @input props: PrompterMetadata - Configuration for the prompter (content, buttons, hrefs, color, size, etc.)
+ * @output onClick - Emits when an action is clicked
+ */
 class PrompterComponent {
     constructor() {
         this.onClick = new EventEmitter();
@@ -2101,6 +2529,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * val-radio-input
+ *
+ * A radio group input for selecting one option, integrated with Angular forms.
+ *
+ * @example
+ * <val-radio-input [props]="{ control: myControl, options: [{ id: '1', name: 'Option 1' }] }"></val-radio-input>
+ *
+ * @input props: InputMetadata - Configuration for the radio input (form control, options, etc.)
+ */
 class RadioInputComponent {
     constructor() { }
     ngOnInit() { }
@@ -2128,13 +2566,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Removes diacritical marks (accents) from a string using Unicode normalization.
+ * Useful for text search and comparison.
+ *
+ * @param text The input string
+ * @returns The normalized string without diacritical marks
+ *
+ * @example
+ * replaceSpecialChars('canción') // returns 'cancion'
+ */
 const replaceSpecialChars = (text) => text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 
+/**
+ * val-searchbar
+ *
+ * A search bar component with debounce and event emitters for filtering, focus, and blur.
+ *
+ * @example
+ * <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()"></val-searchbar>
+ *
+ * @input disabled - Whether the searchbar is disabled.
+ * @output filterEvent - Emits the search term on input.
+ * @output focusEvent - Emits when the searchbar gains focus.
+ * @output blurEvent - Emits when the searchbar loses focus.
+ */
 class SearchbarComponent {
     constructor() {
+        /**
+         * Emits the search term on input.
+         */
+        this.filterEvent = new EventEmitter();
+        /**
+         * Emits when the searchbar gains focus.
+         */
         this.focusEvent = new EventEmitter();
+        /**
+         * Emits when the searchbar loses focus.
+         */
         this.blurEvent = new EventEmitter();
-        this.filterEvent = new EventEmitter();
     }
     onSearch($event) {
         const searchTerm = $event.detail.value;
@@ -2147,7 +2617,7 @@ class SearchbarComponent {
         this.blurEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchbarComponent, isStandalone: true, selector: "val-searchbar", inputs: { disabled: "disabled" }, outputs: { focusEvent: "focusEvent", blurEvent: "blurEvent", filterEvent: "filterEvent" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchbarComponent, isStandalone: true, selector: "val-searchbar", inputs: { disabled: "disabled" }, outputs: { filterEvent: "filterEvent", focusEvent: "focusEvent", blurEvent: "blurEvent" }, ngImport: i0, template: `
     <ion-searchbar
       mode="ios"
       debounce="500"
@@ -2180,14 +2650,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
   `, styles: ["ion-searchbar{--cancel-button-color: var(--ion-color-dark);--background: var(--ion-color-light);font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
+            }], filterEvent: [{
+                type: Output
             }], focusEvent: [{
                 type: Output
             }], blurEvent: [{
                 type: Output
-            }], filterEvent: [{
-                type: Output
             }] } });
 
+/**
+ * val-select-search
+ *
+ * A searchable select/dropdown input with modal and filtering, integrated with Angular forms.
+ *
+ * @example
+ * <val-select-search [props]="{ control: myControl, label: 'Choose', options: [{ id: '1', name: 'Option 1' }] }"></val-select-search>
+ *
+ * @input props: InputMetadata - Configuration for the select input (form control, label, options, etc.)
+ */
 class SelectSearchComponent {
     constructor() {
         this.label = 'Seleccionar';
@@ -2472,7 +2952,7 @@ class SelectSearchComponent {
         </ion-content>
       </ng-template>
     </ion-modal>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled"], outputs: ["focusEvent", "blurEvent", "filterEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectSearchComponent, decorators: [{
             type: Component,
@@ -2531,6 +3011,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-select-input
+ *
+ * A select/dropdown input integrated with Angular forms, using Ionic's select component.
+ *
+ * @example
+ * <val-select-input [props]="{ control: myControl, label: 'Choose', options: [{ id: '1', name: 'Option 1' }] }"></val-select-input>
+ *
+ * @input props: InputMetadata - Configuration for the select input (form control, label, options, etc.)
+ */
 class SearchSelectorComponent {
     constructor() {
         this.customModalOptions = {
@@ -2580,34 +3070,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-text-input
+ *
+ * A text input field integrated with Angular forms.
+ *
+ * @example
+ * <val-text-input [props]="{ control: myControl, placeholder: 'Enter text', ... }"></val-text-input>
+ *
+ * @input props: InputMetadata - Configuration for the input (form control, placeholder, label, etc.)
+ */
 class TextInputComponent {
     constructor() {
         this.states = ComponentStates;
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { props: "props" }, ngImport: i0, template: `
-    <ion-input
-      [formControl]="props.control"
-      type="text"
-      [placeholder]="props.placeholder"
-    />
-  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder" /> `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-text-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: `
-    <ion-input
-      [formControl]="props.control"
-      type="text"
-      [placeholder]="props.placeholder"
-    />
-  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
+            args: [{ selector: 'val-text-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder" /> `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }] } });
 
+/**
+ * val-banner
+ *
+ * Displays a banner with title block, actions, and optional close button.
+ *
+ * @example
+ * <val-banner [props]="{ content: {...}, actions: {...}, closable: true, bordered: true, mode: 'center', alignment: 'center', padding: '8px' }" (onClick)="handler($event)" (onClose)="closeHandler()"></val-banner>
+ *
+ * @input props: BannerMetadata - Configuration for the banner (content, actions, closable, bordered, mode, alignment, padding)
+ * @output onClick - Emits when an action is clicked
+ * @output onClose - Emits when the banner is closed
+ */
 class BannerComponent {
     constructor() {
         this.onClick = new EventEmitter();
@@ -2623,7 +3122,12 @@ class BannerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BannerComponent, isStandalone: true, selector: "val-banner", inputs: { props: "props" }, outputs: { onClick: "onClick", onClose: "onClose" }, ngImport: i0, template: `
     <val-box
-      [props]="{ icon: props.closable ? 'close-outline' : '', bordered: props.bordered, color: '', padding: props.padding }"
+      [props]="{
+        icon: props.closable ? 'close-outline' : '',
+        bordered: props.bordered,
+        color: '',
+        padding: props.padding,
+      }"
       (onClick)="closeHandler()"
     >
       <div [ngClass]="['content-container', props.mode, props.alignment]" body>
@@ -2650,7 +3154,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Component,
             args: [{ selector: 'val-banner', standalone: true, imports: [CommonModule, BoxComponent, TitleBlockComponent, ButtonGroupComponent], template: `
     <val-box
-      [props]="{ icon: props.closable ? 'close-outline' : '', bordered: props.bordered, color: '', padding: props.padding }"
+      [props]="{
+        icon: props.closable ? 'close-outline' : '',
+        bordered: props.bordered,
+        color: '',
+        padding: props.padding,
+      }"
       (onClick)="closeHandler()"
     >
       <div [ngClass]="['content-container', props.mode, props.alignment]" body>
@@ -2680,38 +3189,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * ToolbarComponent
+ *
+ * Componente de barra de herramientas reutilizable para encabezados y pies de página.
+ * Permite acciones, botón de retroceso, menú y personalización de colores y título.
+ *
+ * @example
+ * <val-toolbar [props]="{ title: 'Mi App', withBack: true, actions: [...] }" (onClick)="handleToolbarAction($event)"></val-toolbar>
+ *
+ * @input props {ToolbarMetadata} - Metadatos de la barra de herramientas.
+ * @output onClick - Emite el token de la acción clicada.
+ */
 class ToolbarComponent {
     constructor(navCtrl, icon) {
         this.navCtrl = navCtrl;
+        /**
+         * Evento emitido al hacer click en una acción o botón de la barra.
+         */
         this.onClick = new EventEmitter();
         this.actionTypes = ToolbarActionType;
         addIcons({ chevronBackOutline });
     }
     ngOnInit() { }
+    /**
+     * Emite el token de la acción clicada.
+     * @param token Token de la acción
+     */
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    /**
+     * Navega hacia atrás usando NavController.
+     */
     goBack() {
         this.navCtrl.back();
     }
-    rightActions() {
-        return this.props.actions.filter(x => x.position === 'right');
-    }
-    leftActions() {
-        return this.props.actions.filter(x => x.position === 'left');
-    }
+    /**
+     * Determina si hay acciones a la derecha.
+     */
     someInRight() {
         return !!this.props.actions.find(x => x.position === 'right');
     }
+    /**
+     * Determina si hay acciones a la izquierda.
+     */
     someInLeft() {
         return !!this.props.actions.find(x => x.position === 'left');
     }
-    clickHandler(token) {
-        this.onClick.emit(token);
+    /**
+     * Devuelve las acciones de la derecha.
+     */
+    rightActions() {
+        return this.props.actions.filter(x => x.position === 'right');
+    }
+    /**
+     * Devuelve las acciones de la izquierda.
+     */
+    leftActions() {
+        return this.props.actions.filter(x => x.position === 'left');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i2.NavController }, { token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, isStandalone: true, selector: "val-toolbar", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
       <ng-container *ngIf="props.withBack">
         <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
-          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor">
+          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor" style="margin-left: 8px;">
             <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
             <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
           </ion-button>
@@ -2783,7 +3326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
       <ng-container *ngIf="props.withBack">
         <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
-          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor">
+          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor" style="margin-left: 8px;">
             <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
             <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
           </ion-button>
@@ -2843,11 +3386,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * FooterComponent
+ *
+ * Componente de pie de página reutilizable para aplicaciones Ionic/Angular.
+ * Permite mostrar una barra de herramientas (toolbar) y contenido adicional.
+ *
+ * @example
+ * <val-footer [props]="footerProps" (onClick)="handleFooterAction($event)">
+ *   <div extra>Contenido extra</div>
+ * </val-footer>
+ *
+ * @input props {FooterMetadata} - Metadatos del pie de página y su toolbar.
+ * @output onClick - Emite el token de la acción clicada en la toolbar.
+ */
 class FooterComponent {
     constructor() {
+        /**
+         * Evento emitido al hacer click en una acción de la toolbar.
+         */
         this.onClick = new EventEmitter();
     }
     ngOnInit() { }
+    /**
+     * Emite el token de la acción clicada en la toolbar.
+     * @param token Token de la acción
+     */
     clickHandler(token) {
         this.onClick.emit(token);
     }
@@ -2974,6 +3538,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Scrolls smoothly to the top of the element with the given id.
+ * @param id The id of the element to scroll to
+ */
 const goToTop = (id) => {
     const element = document.getElementById(id);
     if (element) {
@@ -2984,6 +3552,12 @@ const goToTop = (id) => {
         });
     }
 };
+/**
+ * Checks if the bottom of the given ElementRef is within the viewport.
+ * Useful for determining if a form or element is fully visible.
+ * @param elementRef The Angular ElementRef to check
+ * @returns True if the element's bottom is at or above the window's bottom
+ */
 const isAtEnd = (elementRef) => {
     const formElement = elementRef.nativeElement;
     const rect = formElement.getBoundingClientRect();
@@ -3248,11 +3822,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * HeaderComponent
+ *
+ * Componente de encabezado reutilizable para aplicaciones Ionic/Angular.
+ * Permite mostrar una barra de herramientas (toolbar) configurable.
+ *
+ * @example
+ * <val-header [props]="headerProps" (onClick)="handleHeaderAction($event)"></val-header>
+ *
+ * @input props {HeaderMetadata} - Metadatos del encabezado y su toolbar.
+ * @output onClick - Emite el token de la acción clicada en la toolbar.
+ */
 class HeaderComponent {
     constructor() {
+        /**
+         * Evento emitido al hacer click en una acción de la toolbar.
+         */
         this.onClick = new EventEmitter();
     }
     ngOnInit() { }
+    /**
+     * Emite el token de la acción clicada en la toolbar.
+     * @param token Token de la acción
+     */
     clickHandler(token) {
         this.onClick.emit(token);
     }
@@ -3276,20 +3869,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * ItemListComponent
+ *
+ * Componente de lista reutilizable para mostrar una colección de elementos con diferentes modos de visualización (texto, subtítulo, avatar, icono, ruta, acciones).
+ * Permite acciones por elemento, indicadores de no leído, y personalización de estilos.
+ *
+ * @example
+ * <val-item-list [props]="{ title: 'Usuarios', items: [{ text: 'Juan', mode: 'avatar', image: 'avatar.jpg' }] }" (onClick)="handleClick($event)"></val-item-list>
+ *
+ * @input props {ListMetadata} - Metadatos de la lista y sus elementos.
+ * @output onClick - Emite el token del elemento clicado.
+ * @output onActionClick - Emite el token de la acción clicada en un elemento.
+ */
 class ItemListComponent {
     constructor(icon) {
         this.states = ComponentStates;
         this.defaultColor = 'primary';
+        /**
+         * Evento emitido al hacer click en un elemento de la lista.
+         */
         this.onClick = new EventEmitter();
+        /**
+         * Evento emitido al hacer click en una acción de un elemento.
+         */
         this.onActionClick = new EventEmitter();
     }
     ngOnInit() { }
+    /**
+     * Emite el token del elemento clicado.
+     * @param token Token del elemento
+     */
     clickHandler(token) {
         this.onClick.emit(token);
     }
+    /**
+     * Emite el token de la acción clicada.
+     * @param token Token de la acción
+     */
     onActionClickHandler(token) {
         this.onActionClick.emit(token);
     }
+    /**
+     * Devuelve el color de borde de la lista.
+     */
     color() {
         return resolveColor(this.props.color || this.defaultColor);
     }
@@ -3650,11 +4273,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * NoContentComponent
+ *
+ * Componente para mostrar una pantalla de "sin contenido" con imagen y banners opcionales arriba y abajo.
+ * Útil para estados vacíos, errores o mensajes informativos.
+ *
+ * @example
+ * <val-no-content [props]="{ image: { src: 'empty.svg' }, bottomContent: { ... } }"></val-no-content>
+ *
+ * @input props {NoContentMetadata} - Metadatos de la imagen y banners a mostrar.
+ * @output onClick - Emite el token de acción de los banners si corresponde.
+ */
 class NoContentComponent {
     constructor() {
+        /**
+         * Evento emitido al hacer click en un banner.
+         */
         this.onClick = new EventEmitter();
     }
     ngOnInit() { }
+    /**
+     * Emite el token de acción del banner clicado.
+     * @param token Token de la acción
+     */
     onClickHandler(token) {
         this.onClick.emit(token);
     }
@@ -3690,6 +4332,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Enumera los posibles movimientos de navegación en el wizard.
+ */
 var MOTION;
 (function (MOTION) {
     MOTION[MOTION["BACKWARD"] = 0] = "BACKWARD";
@@ -3797,18 +4442,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * WizardComponent
+ *
+ * Componente para flujos de pasos (wizard) reutilizable, con soporte para estados, errores y navegación entre pasos.
+ * Permite mostrar contenido personalizado por paso y manejar acciones de navegación.
+ *
+ * @example
+ * <val-wizard [props]="wizardProps" (onClick)="handleWizardNav($event)">
+ *   <div step>Contenido del paso</div>
+ * </val-wizard>
+ *
+ * @input props {WizardMetadata} - Metadatos del wizard, pasos y estado.
+ * @output onClick - Emite el paso actual y la acción de navegación (MOTION).
+ */
 class WizardComponent {
     constructor() {
+        /**
+         * Evento emitido al hacer click en una acción de navegación.
+         */
         this.onClick = new EventEmitter();
         this.wrapperId = 'wizard-wrapper';
     }
     ngOnInit() { }
+    /**
+     * Cambia el estado del wizard a 'WORKING' y deshabilita los botones del paso actual.
+     */
     working() {
         this.props.state = ComponentStates.WORKING;
         this.Current.buttons.map(x => {
             x.state = ComponentStates.DISABLED;
         });
     }
+    /**
+     * Cambia el estado del wizard a 'ENABLED' y habilita los botones del paso actual.
+     * No realiza cambios si ya está en estado 'ENABLED'.
+     */
     done() {
         if (this.props.state === ComponentStates.ENABLED) {
             return;
@@ -3818,9 +4487,16 @@ class WizardComponent {
             x.state = ComponentStates.ENABLED;
         });
     }
+    /**
+     * Devuelve el paso actual del wizard.
+     */
     get Current() {
         return this.props.steps[this.props.current];
     }
+    /**
+     * Cambia el paso actual del wizard y hace scroll al inicio.
+     * @param newStep Nuevo índice de paso
+     */
     setCurrent(newStep) {
         if (newStep === this.props.current) {
             return;
@@ -3828,6 +4504,10 @@ class WizardComponent {
         this.props.current = newStep;
         goToTop(this.wrapperId);
     }
+    /**
+     * Establece el estado de error y muestra el mensaje de error en el banner inferior.
+     * @param error Mensaje de error a mostrar
+     */
     setError(error) {
         if (this.props.state === ComponentStates.ERROR) {
             return;
@@ -3836,10 +4516,18 @@ class WizardComponent {
         this.props.state = ComponentStates.ERROR;
         goToTop(this.wrapperId);
     }
+    /**
+     * Reinicia el estado de error y vuelve a estado 'ENABLED'.
+     */
     reset() {
         this.props.error.titles.bottomContent.content.bellowTitle.content = '';
         this.done();
     }
+    /**
+     * Maneja el click en el banner de error y emite el evento de navegación.
+     * Si el token contiene 'retry', reinicia el wizard.
+     * @param token Token de la acción clicada
+     */
     clickHandler(token) {
         if (!token) {
             return;
@@ -3922,25 +4610,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
   `, styles: [".layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem;padding-top:.5rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:33.75rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:45rem}}\n"] }]
         }] });
 
+const LANG = 'LANG';
+const THEME = 'THEME';
+
+/**
+ * Utility service for interacting with browser localStorage in a type-safe way.
+ * Provides static methods for setting, getting, removing, and clearing items.
+ */
 class LocalStorageService {
+    /**
+     * Stores a value in localStorage under the given reference key.
+     * @param reference The key to store the value under
+     * @param value The value to store
+     */
     static set(reference, value) {
         localStorage.setItem(reference, JSON.stringify(value));
     }
+    /**
+     * Retrieves a value from localStorage by key.
+     * @param reference The key to retrieve
+     * @returns The parsed value
+     */
     static get(reference) {
         const value = localStorage.getItem(reference);
         return JSON.parse(value);
     }
+    /**
+     * Removes an item from localStorage by key.
+     * @param reference The key to remove
+     */
     static remove(reference) {
         localStorage.removeItem(reference);
     }
+    /**
+     * Clears all items from localStorage.
+     */
     static clear() {
         localStorage.clear();
     }
 }
 
-const LANG = 'LANG';
-const THEME = 'THEME';
-
+/**
+ * Service for managing application themes (light, dark, auto).
+ * Handles user preferences, system theme detection, and theme toggling.
+ * Uses localStorage to persist the selected theme.
+ */
 var ThemeOption;
 (function (ThemeOption) {
     ThemeOption["LIGHT"] = "light";
@@ -3949,12 +4663,33 @@ var ThemeOption;
 })(ThemeOption || (ThemeOption = {}));
 class ThemeService {
     constructor() {
+        /**
+         * Indicates if the light theme is active.
+         */
         this.lightToggle = false;
+        /**
+         * Indicates if the dark theme is active.
+         */
         this.darkToggle = false;
+        /**
+         * Indicates if the auto theme is active.
+         */
         this.autoToggle = false;
+        /**
+         * The current selected theme option.
+         */
         this.currentOption = ThemeOption.AUTO;
+        /**
+         * Enum with all available theme options.
+         */
         this.themeOptions = ThemeOption;
+        /**
+         * Whether the system prefers dark mode.
+         */
         this.prefersDark = false;
+        /**
+         * The default theme option.
+         */
         this.default = ThemeOption.AUTO;
         const current = LocalStorageService.get(THEME);
         console.log('💡 ThemeConfig current::: ', current);
@@ -3989,20 +4724,38 @@ class ThemeService {
         this.toggleTheme(ThemeOption.LIGHT, true);
         this.toggleTheme(ThemeOption.DARK, false);
     }
+    /**
+     * Returns true if the system prefers dark mode.
+     */
     get IsDark() {
         return this.prefersDark;
     }
+    /**
+     * Gets the current theme option.
+     */
     get Theme() {
         return this.theme.value;
     }
+    /**
+     * Sets the current theme option and persists it.
+     */
     set Theme(theme) {
         this.theme.next(theme);
         LocalStorageService.set(THEME, theme);
     }
+    /**
+     * Toggles a theme class on the document body.
+     * @param name The theme name
+     * @param shouldAdd Whether to add or remove the class
+     */
     toggleTheme(name, shouldAdd) {
         console.log('toggleTheme::: ', name, shouldAdd);
         document.body.classList.toggle(name, shouldAdd);
     }
+    /**
+     * Sets the user theme preference and updates toggles and theme classes.
+     * @param option The selected theme option
+     */
     toggleUserPreference(option) {
         this.currentOption = option;
         this.Theme = option;
@@ -4199,10 +4952,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     args: [ValtechConfigService]
                 }] }] });
 
+/**
+ * Service for displaying toast notifications using Ionic's ToastController.
+ * Provides methods to show and present toasts with custom options.
+ */
 class ToastService {
     constructor(toastController) {
         this.toastController = toastController;
     }
+    /**
+     * Presents a toast notification with the given options.
+     * @param request Toast options (message, duration, position, color, etc.)
+     */
     async presentToast(request) {
         const toast = await this.toastController.create({
             message: request.message,
@@ -4212,12 +4973,16 @@ class ToastService {
         });
         await toast.present();
     }
+    /**
+     * Shows a toast notification and logs the result.
+     * @param request Toast options (message, duration, position, color, etc.)
+     */
     show(request) {
         this.presentToast(request)
             .then(() => {
             console.info('Toast created');
         })
-            .catch((error) => {
+            .catch(error => {
             console.error(JSON.stringify(error));
         });
     }