valtech-components 2.0.713 → 2.0.714

package/fesm2022/valtech-components.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, makeEnvironmentProviders, APP_INITIALIZER, inject, EventEmitter, Component, Input, Output, computed, HostListener, Pipe, input, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, ElementRef, ContentChild, PLATFORM_ID, Inject, ErrorHandler, DestroyRef, InjectionToken, runInInjectionContext, effect, Optional, TemplateRef, ViewContainerRef, isSignal, Directive, ViewEncapsulation } from '@angular/core';
+import { signal, Injectable, makeEnvironmentProviders, APP_INITIALIZER, inject, EventEmitter, Component, Input, Output, computed, HostListener, Pipe, input, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, ContentChild, PLATFORM_ID, Inject, ErrorHandler, DestroyRef, InjectionToken, runInInjectionContext, effect, Optional, TemplateRef, ViewContainerRef, isSignal, Directive, ElementRef, ViewEncapsulation } from '@angular/core';
 import * as i2$1 from '@ionic/angular/standalone';
 import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonDatetimeButton, IonInput, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonRippleEffect, AlertController, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, NgFor, isPlatformBrowser, NgClass } from '@angular/common';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, shuffleOutline, logoWhatsapp, paperPlaneOutline, mailOutline, trophyOutline, ticketOutline, giftOutline, personOutline, ellipsisVertical, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, documentOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, cameraOutline, bugOutline, bulbOutline, closeCircleOutline, menuOutline } from 'ionicons/icons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, documentOutline, searchOutline, personOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, cameraOutline, bugOutline, bulbOutline, closeCircleOutline, menuOutline } from 'ionicons/icons';
 import * as i1$1 from '@angular/router';
 import { Router, NavigationEnd, RouterLink, RouterOutlet, RouterModule } from '@angular/router';
 import { Browser } from '@capacitor/browser';
@@ -50,7 +50,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.713';
+const VERSION = '2.0.714';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -14442,498 +14442,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-/**
- * Default legend labels in Spanish.
- */
-const DEFAULT_LEGEND_LABELS = {
-    available: 'Disponible',
-    sold: 'Vendido',
-    reserved: 'Reservado',
-    selected: 'Seleccionado',
-    disabled: 'No disponible',
-};
-
-addIcons({ shuffleOutline });
-/**
- * val-ticket-grid
- *
- * A grid for selecting ticket numbers, commonly used in raffles and lotteries.
- *
- * @example Basic usage
- * ```html
- * <val-ticket-grid
- *   [props]="{
- *     totalTickets: 100,
- *     soldTickets: [1, 5, 12, 23],
- *     selectionMode: 'multiple',
- *     maxSelection: 10
- *   }"
- *   (selectionChange)="onSelectionChange($event)"
- * ></val-ticket-grid>
- * ```
- *
- * @example With legend and search
- * ```html
- * <val-ticket-grid
- *   [props]="{
- *     totalTickets: 500,
- *     soldTickets: soldNumbers,
- *     reservedTickets: reservedNumbers,
- *     columns: 20,
- *     showLegend: true,
- *     showSearch: true,
- *     showRandomSelect: true,
- *     randomSelectCount: 5,
- *     maxSelection: 10
- *   }"
- * ></val-ticket-grid>
- * ```
- */
-class TicketGridComponent {
-    constructor() {
-        this.selectionChange = new EventEmitter();
-        this.ticketClick = new EventEmitter();
-        this.tickets = [];
-        this.displayedTickets = [];
-        this.selectedTickets = [];
-        this.searchTerm = '';
-        this.highlightedNumbers = [];
-    }
-    ngOnInit() {
-        this.buildTickets();
-    }
-    ngOnChanges(changes) {
-        if (changes['props']) {
-            this.buildTickets();
-        }
-    }
-    buildTickets() {
-        const start = this.props.startNumber ?? 1;
-        const total = this.props.totalTickets;
-        const soldSet = new Set(this.props.soldTickets || []);
-        const reservedSet = new Set(this.props.reservedTickets || []);
-        const disabledSet = new Set(this.props.disabledTickets || []);
-        const selectedSet = new Set(this.props.selectedTickets || []);
-        // Initialize selected tickets from props
-        this.selectedTickets = [...(this.props.selectedTickets || [])];
-        // Build ticket array
-        if (this.props.ticketData?.length) {
-            // Use custom ticket data
-            this.tickets = [...this.props.ticketData];
-        }
-        else {
-            // Generate from numbers
-            this.tickets = [];
-            for (let i = start; i < start + total; i++) {
-                let status = 'available';
-                if (disabledSet.has(i)) {
-                    status = 'disabled';
-                }
-                else if (soldSet.has(i)) {
-                    status = 'sold';
-                }
-                else if (reservedSet.has(i)) {
-                    status = 'reserved';
-                }
-                else if (selectedSet.has(i)) {
-                    status = 'selected';
-                }
-                this.tickets.push({ number: i, status });
-            }
-        }
-        this.applySearch();
-    }
-    applySearch() {
-        if (!this.searchTerm) {
-            this.displayedTickets = [...this.tickets];
-            this.highlightedNumbers = [];
-        }
-        else {
-            // Filter/highlight tickets matching search
-            const term = this.searchTerm.trim();
-            this.highlightedNumbers = this.tickets
-                .filter(t => this.formatNumber(t.number).includes(term))
-                .map(t => t.number);
-            this.displayedTickets = [...this.tickets];
-        }
-    }
-    onSearch(event) {
-        this.searchTerm = event.detail.value || '';
-        this.applySearch();
-    }
-    isHighlighted(number) {
-        return this.highlightedNumbers.includes(number);
-    }
-    isSelectable(ticket) {
-        if (this.props.selectionMode === 'none')
-            return false;
-        // Check if sold/reserved and admin override
-        if (ticket.status === 'sold' || ticket.status === 'reserved') {
-            return this.props.allowSelectSold === true;
-        }
-        if (ticket.status === 'disabled')
-            return false;
-        // Check max selection
-        if (ticket.status !== 'selected' &&
-            this.props.maxSelection &&
-            this.selectedTickets.length >= this.props.maxSelection) {
-            return false;
-        }
-        return true;
-    }
-    onTicketClick(ticket) {
-        const isSelected = this.selectedTickets.includes(ticket.number);
-        // Emit click event regardless
-        this.ticketClick.emit({
-            number: ticket.number,
-            status: ticket.status,
-            selected: this.isSelectable(ticket) ? !isSelected : null,
-        });
-        if (!this.isSelectable(ticket) && ticket.status !== 'selected') {
-            return;
-        }
-        // Handle selection
-        if (isSelected) {
-            // Deselect
-            this.selectedTickets = this.selectedTickets.filter(n => n !== ticket.number);
-            ticket.status = 'available';
-            this.selectionChange.emit({
-                selectedTickets: [...this.selectedTickets],
-                changedTicket: ticket.number,
-                action: 'deselect',
-                count: this.selectedTickets.length,
-                maxReached: false,
-            });
-        }
-        else {
-            // Select
-            if (this.props.selectionMode === 'single') {
-                // Deselect previous
-                this.selectedTickets.forEach(num => {
-                    const t = this.tickets.find(x => x.number === num);
-                    if (t)
-                        t.status = 'available';
-                });
-                this.selectedTickets = [ticket.number];
-            }
-            else {
-                this.selectedTickets.push(ticket.number);
-            }
-            ticket.status = 'selected';
-            this.selectionChange.emit({
-                selectedTickets: [...this.selectedTickets],
-                changedTicket: ticket.number,
-                action: 'select',
-                count: this.selectedTickets.length,
-                maxReached: this.props.maxSelection
-                    ? this.selectedTickets.length >= this.props.maxSelection
-                    : false,
-            });
-        }
-    }
-    selectRandom() {
-        const count = this.props.randomSelectCount || 1;
-        const available = this.tickets.filter(t => t.status === 'available' && !this.selectedTickets.includes(t.number));
-        // Determine how many we can select
-        const maxCanSelect = this.props.maxSelection
-            ? Math.min(count, this.props.maxSelection - this.selectedTickets.length)
-            : count;
-        if (available.length === 0 || maxCanSelect <= 0)
-            return;
-        // Random shuffle and pick
-        const shuffled = [...available].sort(() => Math.random() - 0.5);
-        const toSelect = shuffled.slice(0, Math.min(maxCanSelect, available.length));
-        toSelect.forEach(ticket => {
-            ticket.status = 'selected';
-            this.selectedTickets.push(ticket.number);
-        });
-        this.selectionChange.emit({
-            selectedTickets: [...this.selectedTickets],
-            changedTicket: toSelect[toSelect.length - 1].number,
-            action: 'select',
-            count: this.selectedTickets.length,
-            maxReached: this.props.maxSelection
-                ? this.selectedTickets.length >= this.props.maxSelection
-                : false,
-        });
-    }
-    /**
-     * Clear all selections.
-     */
-    clearSelection() {
-        this.selectedTickets.forEach(num => {
-            const ticket = this.tickets.find(t => t.number === num);
-            if (ticket)
-                ticket.status = 'available';
-        });
-        this.selectedTickets = [];
-    }
-    /**
-     * Get selected ticket numbers.
-     */
-    getSelectedTickets() {
-        return [...this.selectedTickets];
-    }
-    get availableCount() {
-        return this.tickets.filter(t => t.status === 'available').length;
-    }
-    get soldCount() {
-        return this.tickets.filter(t => t.status === 'sold').length;
-    }
-    getLegendItems() {
-        if (this.props.legendItems) {
-            return this.props.legendItems;
-        }
-        const items = [
-            { status: 'available', label: DEFAULT_LEGEND_LABELS.available, count: this.availableCount },
-            { status: 'selected', label: DEFAULT_LEGEND_LABELS.selected, count: this.selectedTickets.length },
-        ];
-        if (this.props.soldTickets?.length) {
-            items.push({ status: 'sold', label: DEFAULT_LEGEND_LABELS.sold, count: this.soldCount });
-        }
-        if (this.props.reservedTickets?.length) {
-            items.push({
-                status: 'reserved',
-                label: DEFAULT_LEGEND_LABELS.reserved,
-                count: this.props.reservedTickets.length,
-            });
-        }
-        return items;
-    }
-    formatNumber(num) {
-        if (this.props.numberPadding) {
-            return String(num).padStart(this.props.numberPadding, '0');
-        }
-        return String(num);
-    }
-    getTicketAriaLabel(ticket) {
-        const statusLabel = DEFAULT_LEGEND_LABELS[ticket.status];
-        return `Boleto ${this.formatNumber(ticket.number)}, ${statusLabel}`;
-    }
-    getSearchPlaceholder() {
-        return this.props.searchPlaceholder || 'Buscar número...';
-    }
-    getRandomSelectLabel() {
-        return this.props.randomSelectLabel || 'Aleatorio';
-    }
-    getColor() {
-        if (this.props.color) {
-            return `var(--ion-color-${this.props.color})`;
-        }
-        return 'var(--ion-color-primary)';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TicketGridComponent, isStandalone: true, selector: "val-ticket-grid", inputs: { props: "props" }, outputs: { selectionChange: "selectionChange", ticketClick: "ticketClick" }, usesOnChanges: true, ngImport: i0, template: `
-    <div
-      class="ticket-grid-container"
-      [class]="props.cssClass"
-      [class.size-small]="props.ticketSize === 'small'"
-      [class.size-medium]="props.ticketSize === 'medium' || !props.ticketSize"
-      [class.size-large]="props.ticketSize === 'large'"
-      [style.--grid-columns]="props.columns || 10"
-      [style.--grid-gap]="(props.gap || 4) + 'px'"
-      [style.--selected-color]="getColor()"
-    >
-      <!-- Search and controls -->
-      @if (props.showSearch || props.showRandomSelect) {
-        <div class="grid-controls">
-          @if (props.showSearch) {
-            <ion-searchbar
-              [placeholder]="getSearchPlaceholder()"
-              [debounce]="300"
-              (ionInput)="onSearch($event)"
-              class="ticket-search"
-            ></ion-searchbar>
-          }
-
-          @if (props.showRandomSelect && props.selectionMode !== 'none') {
-            <ion-button
-              fill="outline"
-              [color]="props.color || 'primary'"
-              (click)="selectRandom()"
-              [disabled]="availableCount < (props.randomSelectCount || 1)"
-            >
-              <ion-icon slot="start" name="shuffle-outline"></ion-icon>
-              {{ getRandomSelectLabel() }}
-            </ion-button>
-          }
-        </div>
-      }
-
-      <!-- Legend (top) -->
-      @if (props.showLegend && props.legendPosition !== 'bottom') {
-        <div class="ticket-legend">
-          @for (item of getLegendItems(); track item.status) {
-            <div class="legend-item">
-              <span class="legend-color" [class]="'status-' + item.status"></span>
-              <span class="legend-label">{{ item.label }}</span>
-              @if (item.count !== undefined) {
-                <span class="legend-count">({{ item.count }})</span>
-              }
-            </div>
-          }
-        </div>
-      }
-
-      <!-- Summary -->
-      @if (props.showSummary) {
-        <div class="ticket-summary">
-          <span class="summary-item">
-            <strong>{{ selectedTickets.length }}</strong> seleccionado{{ selectedTickets.length !== 1 ? 's' : '' }}
-          </span>
-          @if (props.maxSelection) {
-            <span class="summary-item">
-              (máx: {{ props.maxSelection }})
-            </span>
-          }
-        </div>
-      }
-
-      <!-- Grid -->
-      <div class="ticket-grid" role="grid">
-        @for (ticket of displayedTickets; track ticket.number) {
-          <button
-            type="button"
-            class="ticket-cell"
-            [class]="'status-' + ticket.status"
-            [class.highlighted]="isHighlighted(ticket.number)"
-            [disabled]="!isSelectable(ticket)"
-            [attr.aria-label]="getTicketAriaLabel(ticket)"
-            [attr.aria-pressed]="ticket.status === 'selected'"
-            (click)="onTicketClick(ticket)"
-          >
-            {{ formatNumber(ticket.number) }}
-          </button>
-        }
-      </div>
-
-      <!-- Legend (bottom) -->
-      @if (props.showLegend && props.legendPosition === 'bottom') {
-        <div class="ticket-legend bottom">
-          @for (item of getLegendItems(); track item.status) {
-            <div class="legend-item">
-              <span class="legend-color" [class]="'status-' + item.status"></span>
-              <span class="legend-label">{{ item.label }}</span>
-              @if (item.count !== undefined) {
-                <span class="legend-count">({{ item.count }})</span>
-              }
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block}.ticket-grid-container{--grid-columns: 10;--grid-gap: 4px;--selected-color: var(--ion-color-primary);display:flex;flex-direction:column;gap:16px}.grid-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.ticket-search{flex:1;min-width:200px;max-width:300px;--border-radius: 8px}.ticket-legend{display:flex;flex-wrap:wrap;gap:16px;padding:8px 0}.ticket-legend.bottom{border-top:1px solid var(--ion-color-light-shade);padding-top:12px;margin-top:8px}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ion-color-medium-shade)}.legend-color{width:16px;height:16px;border-radius:4px;border:1px solid var(--ion-color-medium)}.legend-color.status-available{background:var(--ion-color-light);border-color:var(--ion-color-medium)}.legend-color.status-selected{background:var(--selected-color);border-color:var(--selected-color)}.legend-color.status-sold{background:var(--ion-color-medium);border-color:var(--ion-color-medium-shade)}.legend-color.status-reserved{background:var(--ion-color-warning-tint);border-color:var(--ion-color-warning)}.legend-color.status-disabled{background:var(--ion-color-light-shade);border-color:var(--ion-color-medium);opacity:.5}.legend-count{color:var(--ion-color-medium);font-size:11px}.ticket-summary{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ion-color-dark);padding:8px 12px;background:var(--ion-color-light);border-radius:8px}.summary-item:not(:last-child):after{content:\"\\2022\";margin-left:8px;color:var(--ion-color-medium)}.ticket-grid{display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);gap:var(--grid-gap)}.ticket-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--ion-color-medium);border-radius:4px;background:var(--ion-color-light);font-size:12px;font-weight:500;color:var(--ion-color-dark);cursor:pointer;transition:all .15s ease;padding:0;font-family:inherit}.ticket-cell:hover:not(:disabled){border-color:var(--selected-color);transform:scale(1.05);z-index:1}.ticket-cell:focus{outline:2px solid var(--selected-color);outline-offset:1px}.ticket-cell.status-available{background:var(--ion-color-light);border-color:var(--ion-color-medium)}.ticket-cell.status-available:hover:not(:disabled){background:var(--ion-color-light-shade)}.ticket-cell.status-selected{background:var(--selected-color);border-color:var(--selected-color);color:#fff;font-weight:600}.ticket-cell.status-sold{background:var(--ion-color-medium);border-color:var(--ion-color-medium-shade);color:var(--ion-color-medium-contrast);cursor:not-allowed;opacity:.7}.ticket-cell.status-reserved{background:var(--ion-color-warning-tint);border-color:var(--ion-color-warning);color:var(--ion-color-warning-shade);cursor:not-allowed}.ticket-cell.status-disabled{background:var(--ion-color-light-shade);border-color:var(--ion-color-medium);color:var(--ion-color-medium);cursor:not-allowed;opacity:.5}.ticket-cell.highlighted{box-shadow:0 0 0 2px var(--ion-color-tertiary);z-index:2}.ticket-cell:disabled{cursor:not-allowed}.size-small .ticket-grid{--grid-gap: 2px}.size-small .ticket-cell{font-size:10px;border-radius:2px}.size-small .ticket-legend{gap:12px}.size-small .legend-color{width:12px;height:12px}.size-small .legend-item{font-size:11px}.size-large .ticket-grid{--grid-gap: 6px}.size-large .ticket-cell{font-size:14px;border-radius:6px;font-weight:600}.size-large .ticket-legend{gap:20px}.size-large .legend-color{width:20px;height:20px}.size-large .legend-item{font-size:14px}@media (max-width: 576px){.grid-controls{flex-direction:column;align-items:stretch}.ticket-search{max-width:100%}.ticket-legend{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketGridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-ticket-grid', standalone: true, imports: [CommonModule, FormsModule, IonButton, IonIcon, IonSearchbar], template: `
-    <div
-      class="ticket-grid-container"
-      [class]="props.cssClass"
-      [class.size-small]="props.ticketSize === 'small'"
-      [class.size-medium]="props.ticketSize === 'medium' || !props.ticketSize"
-      [class.size-large]="props.ticketSize === 'large'"
-      [style.--grid-columns]="props.columns || 10"
-      [style.--grid-gap]="(props.gap || 4) + 'px'"
-      [style.--selected-color]="getColor()"
-    >
-      <!-- Search and controls -->
-      @if (props.showSearch || props.showRandomSelect) {
-        <div class="grid-controls">
-          @if (props.showSearch) {
-            <ion-searchbar
-              [placeholder]="getSearchPlaceholder()"
-              [debounce]="300"
-              (ionInput)="onSearch($event)"
-              class="ticket-search"
-            ></ion-searchbar>
-          }
-
-          @if (props.showRandomSelect && props.selectionMode !== 'none') {
-            <ion-button
-              fill="outline"
-              [color]="props.color || 'primary'"
-              (click)="selectRandom()"
-              [disabled]="availableCount < (props.randomSelectCount || 1)"
-            >
-              <ion-icon slot="start" name="shuffle-outline"></ion-icon>
-              {{ getRandomSelectLabel() }}
-            </ion-button>
-          }
-        </div>
-      }
-
-      <!-- Legend (top) -->
-      @if (props.showLegend && props.legendPosition !== 'bottom') {
-        <div class="ticket-legend">
-          @for (item of getLegendItems(); track item.status) {
-            <div class="legend-item">
-              <span class="legend-color" [class]="'status-' + item.status"></span>
-              <span class="legend-label">{{ item.label }}</span>
-              @if (item.count !== undefined) {
-                <span class="legend-count">({{ item.count }})</span>
-              }
-            </div>
-          }
-        </div>
-      }
-
-      <!-- Summary -->
-      @if (props.showSummary) {
-        <div class="ticket-summary">
-          <span class="summary-item">
-            <strong>{{ selectedTickets.length }}</strong> seleccionado{{ selectedTickets.length !== 1 ? 's' : '' }}
-          </span>
-          @if (props.maxSelection) {
-            <span class="summary-item">
-              (máx: {{ props.maxSelection }})
-            </span>
-          }
-        </div>
-      }
-
-      <!-- Grid -->
-      <div class="ticket-grid" role="grid">
-        @for (ticket of displayedTickets; track ticket.number) {
-          <button
-            type="button"
-            class="ticket-cell"
-            [class]="'status-' + ticket.status"
-            [class.highlighted]="isHighlighted(ticket.number)"
-            [disabled]="!isSelectable(ticket)"
-            [attr.aria-label]="getTicketAriaLabel(ticket)"
-            [attr.aria-pressed]="ticket.status === 'selected'"
-            (click)="onTicketClick(ticket)"
-          >
-            {{ formatNumber(ticket.number) }}
-          </button>
-        }
-      </div>
-
-      <!-- Legend (bottom) -->
-      @if (props.showLegend && props.legendPosition === 'bottom') {
-        <div class="ticket-legend bottom">
-          @for (item of getLegendItems(); track item.status) {
-            <div class="legend-item">
-              <span class="legend-color" [class]="'status-' + item.status"></span>
-              <span class="legend-label">{{ item.label }}</span>
-              @if (item.count !== undefined) {
-                <span class="legend-count">({{ item.count }})</span>
-              }
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `, styles: ["@charset \"UTF-8\";:host{display:block}.ticket-grid-container{--grid-columns: 10;--grid-gap: 4px;--selected-color: var(--ion-color-primary);display:flex;flex-direction:column;gap:16px}.grid-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.ticket-search{flex:1;min-width:200px;max-width:300px;--border-radius: 8px}.ticket-legend{display:flex;flex-wrap:wrap;gap:16px;padding:8px 0}.ticket-legend.bottom{border-top:1px solid var(--ion-color-light-shade);padding-top:12px;margin-top:8px}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ion-color-medium-shade)}.legend-color{width:16px;height:16px;border-radius:4px;border:1px solid var(--ion-color-medium)}.legend-color.status-available{background:var(--ion-color-light);border-color:var(--ion-color-medium)}.legend-color.status-selected{background:var(--selected-color);border-color:var(--selected-color)}.legend-color.status-sold{background:var(--ion-color-medium);border-color:var(--ion-color-medium-shade)}.legend-color.status-reserved{background:var(--ion-color-warning-tint);border-color:var(--ion-color-warning)}.legend-color.status-disabled{background:var(--ion-color-light-shade);border-color:var(--ion-color-medium);opacity:.5}.legend-count{color:var(--ion-color-medium);font-size:11px}.ticket-summary{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ion-color-dark);padding:8px 12px;background:var(--ion-color-light);border-radius:8px}.summary-item:not(:last-child):after{content:\"\\2022\";margin-left:8px;color:var(--ion-color-medium)}.ticket-grid{display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);gap:var(--grid-gap)}.ticket-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--ion-color-medium);border-radius:4px;background:var(--ion-color-light);font-size:12px;font-weight:500;color:var(--ion-color-dark);cursor:pointer;transition:all .15s ease;padding:0;font-family:inherit}.ticket-cell:hover:not(:disabled){border-color:var(--selected-color);transform:scale(1.05);z-index:1}.ticket-cell:focus{outline:2px solid var(--selected-color);outline-offset:1px}.ticket-cell.status-available{background:var(--ion-color-light);border-color:var(--ion-color-medium)}.ticket-cell.status-available:hover:not(:disabled){background:var(--ion-color-light-shade)}.ticket-cell.status-selected{background:var(--selected-color);border-color:var(--selected-color);color:#fff;font-weight:600}.ticket-cell.status-sold{background:var(--ion-color-medium);border-color:var(--ion-color-medium-shade);color:var(--ion-color-medium-contrast);cursor:not-allowed;opacity:.7}.ticket-cell.status-reserved{background:var(--ion-color-warning-tint);border-color:var(--ion-color-warning);color:var(--ion-color-warning-shade);cursor:not-allowed}.ticket-cell.status-disabled{background:var(--ion-color-light-shade);border-color:var(--ion-color-medium);color:var(--ion-color-medium);cursor:not-allowed;opacity:.5}.ticket-cell.highlighted{box-shadow:0 0 0 2px var(--ion-color-tertiary);z-index:2}.ticket-cell:disabled{cursor:not-allowed}.size-small .ticket-grid{--grid-gap: 2px}.size-small .ticket-cell{font-size:10px;border-radius:2px}.size-small .ticket-legend{gap:12px}.size-small .legend-color{width:12px;height:12px}.size-small .legend-item{font-size:11px}.size-large .ticket-grid{--grid-gap: 6px}.size-large .ticket-cell{font-size:14px;border-radius:6px;font-weight:600}.size-large .ticket-legend{gap:20px}.size-large .legend-color{width:20px;height:20px}.size-large .legend-item{font-size:14px}@media (max-width: 576px){.grid-controls{flex-direction:column;align-items:stretch}.ticket-search{max-width:100%}.ticket-legend{justify-content:center}}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], ticketClick: [{
-                type: Output
-            }] } });
-
 /**
  * Default platform configurations.
  */
@@ -15288,1380 +14796,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-/**
- * Default labels.
- */
-const DEFAULT_WINNER_LABELS = {
-    winner: '¡Ganador!',
-    ticket: 'Boleto #',
-    prize: 'Premio:',
-};
-
-addIcons({ trophyOutline, ticketOutline, giftOutline, locationOutline });
-/**
- * val-winner-display
- *
- * A component for displaying raffle winners with celebration animations.
- *
- * @example Basic usage
- * ```html
- * <val-winner-display
- *   [props]="{
- *     winner: {
- *       name: 'Juan Pérez',
- *       ticketNumber: 42
- *     }
- *   }"
- * ></val-winner-display>
- * ```
- *
- * @example Full celebration mode
- * ```html
- * <val-winner-display
- *   [props]="{
- *     winner: {
- *       name: 'María García',
- *       ticketNumber: 156,
- *       prize: 'iPhone 15 Pro',
- *       prizeValue: 25000,
- *       location: 'CDMX, México',
- *       avatar: { image: 'avatar.jpg' }
- *     },
- *     mode: 'celebration',
- *     showConfetti: true,
- *     animation: 'zoom',
- *     color: 'warning'
- *   }"
- *   (animationComplete)="onReveal($event)"
- * ></val-winner-display>
- * ```
- */
-class WinnerDisplayComponent {
-    constructor() {
-        this.animationComplete = new EventEmitter();
-        this.isAnimating = false;
-        this.isRevealed = false;
-        this.showConfetti = false;
-        this.confettiPieces = Array.from({ length: 50 }, (_, i) => i);
-        this.revealTimeout = null;
-        this.animationTimeout = null;
-        this.elementRef = inject(ElementRef);
-    }
-    ngOnInit() {
-        if (this.props.autoPlay !== false) {
-            this.startReveal();
-        }
-    }
-    ngAfterViewInit() {
-        // Additional setup if needed
-    }
-    ngOnDestroy() {
-        if (this.revealTimeout)
-            clearTimeout(this.revealTimeout);
-        if (this.animationTimeout)
-            clearTimeout(this.animationTimeout);
-    }
-    startReveal() {
-        const delay = this.props.revealDelay || 0;
-        this.revealTimeout = setTimeout(() => {
-            this.isAnimating = true;
-            const animationDuration = this.props.animationDuration || 800;
-            this.animationTimeout = setTimeout(() => {
-                this.isAnimating = false;
-                this.isRevealed = true;
-                if (this.props.showConfetti) {
-                    this.showConfetti = true;
-                }
-                this.animationComplete.emit({
-                    animation: this.props.animation || 'fade',
-                    winner: this.props.winner,
-                });
-            }, animationDuration);
-        }, delay);
-    }
-    /**
-     * Manually trigger the reveal animation.
-     */
-    reveal() {
-        this.isRevealed = false;
-        this.showConfetti = false;
-        this.startReveal();
-    }
-    /**
-     * Reset to initial state.
-     */
-    reset() {
-        this.isAnimating = false;
-        this.isRevealed = false;
-        this.showConfetti = false;
-    }
-    formatTicketNumber() {
-        const num = this.props.winner.ticketNumber;
-        if (this.props.numberPadding) {
-            return String(num).padStart(this.props.numberPadding, '0');
-        }
-        return String(num);
-    }
-    formatPrizeValue() {
-        if (!this.props.winner.prizeValue)
-            return '';
-        return `$${this.props.winner.prizeValue.toLocaleString('es-MX')}`;
-    }
-    getRandomX(index) {
-        return `${(index * 17) % 100}%`;
-    }
-    getRandomRotation(index) {
-        return `${(index * 37) % 360}deg`;
-    }
-    getWinnerLabel() {
-        return this.props.winnerLabel || DEFAULT_WINNER_LABELS.winner;
-    }
-    getTicketLabel() {
-        return this.props.ticketLabel || DEFAULT_WINNER_LABELS.ticket;
-    }
-    getPrizeLabel() {
-        return this.props.prizeLabel || DEFAULT_WINNER_LABELS.prize;
-    }
-    getColor() {
-        if (this.props.color) {
-            return `var(--ion-color-${this.props.color})`;
-        }
-        return 'var(--ion-color-warning)';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WinnerDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WinnerDisplayComponent, isStandalone: true, selector: "val-winner-display", inputs: { props: "props" }, outputs: { animationComplete: "animationComplete" }, ngImport: i0, template: `
-    <div
-      class="winner-display-container"
-      [class]="props.cssClass"
-      [class.mode-compact]="props.mode === 'compact'"
-      [class.mode-standard]="props.mode === 'standard' || !props.mode"
-      [class.mode-full]="props.mode === 'full'"
-      [class.mode-celebration]="props.mode === 'celebration'"
-      [class.size-small]="props.size === 'small'"
-      [class.size-medium]="props.size === 'medium' || !props.size"
-      [class.size-large]="props.size === 'large'"
-      [class.bg-solid]="props.background === 'solid' || !props.background"
-      [class.bg-gradient]="props.background === 'gradient'"
-      [class.bg-transparent]="props.background === 'transparent'"
-      [class.animating]="isAnimating"
-      [class.revealed]="isRevealed"
-      [class.animation-fade]="props.animation === 'fade'"
-      [class.animation-zoom]="props.animation === 'zoom'"
-      [class.animation-slide]="props.animation === 'slide'"
-      [class.animation-spotlight]="props.animation === 'spotlight'"
-      [style.--winner-color]="getColor()"
-      [style.--animation-duration]="(props.animationDuration || 800) + 'ms'"
-    >
-      <!-- Confetti overlay -->
-      @if (props.showConfetti && (props.mode === 'celebration' || props.mode === 'full')) {
-        <div class="confetti-container" [class.active]="showConfetti">
-          @for (i of confettiPieces; track i) {
-            <div
-              class="confetti-piece"
-              [style.--delay]="i * 0.1 + 's'"
-              [style.--x]="getRandomX(i)"
-              [style.--rotation]="getRandomRotation(i)"
-            ></div>
-          }
-        </div>
-      }
-
-      <!-- Trophy icon -->
-      @if (props.showTrophy !== false) {
-        <div class="trophy-container">
-          <ion-icon name="trophy-outline" class="trophy-icon"></ion-icon>
-        </div>
-      }
-
-      <!-- Winner label -->
-      <div class="winner-label">{{ getWinnerLabel() }}</div>
-
-      <!-- Winner info -->
-      <div class="winner-info">
-        <!-- Avatar -->
-        @if (props.winner.avatar && (props.mode === 'full' || props.mode === 'celebration')) {
-          <val-avatar [props]="props.winner.avatar" class="winner-avatar"></val-avatar>
-        }
-
-        <!-- Name -->
-        <h2 class="winner-name">{{ props.winner.name }}</h2>
-
-        <!-- Location -->
-        @if (props.showLocation !== false && props.winner.location) {
-          <div class="winner-location">
-            <ion-icon name="location-outline"></ion-icon>
-            <span>{{ props.winner.location }}</span>
-          </div>
-        }
-
-        <!-- Ticket number -->
-        @if (props.showTicketNumber !== false) {
-          <div class="ticket-info">
-            <ion-icon name="ticket-outline"></ion-icon>
-            <span class="ticket-label">{{ getTicketLabel() }}</span>
-            <span class="ticket-number">{{ formatTicketNumber() }}</span>
-          </div>
-        }
-      </div>
-
-      <!-- Prize info -->
-      @if (props.showPrize !== false && props.winner.prize) {
-        <div class="prize-info">
-          @if (props.winner.prizeImage && (props.mode === 'full' || props.mode === 'celebration')) {
-            <div class="prize-image">
-              <img [src]="props.winner.prizeImage" [alt]="props.winner.prize" />
-            </div>
-          }
-
-          <div class="prize-details">
-            <div class="prize-header">
-              <ion-icon name="gift-outline"></ion-icon>
-              <span class="prize-label">{{ getPrizeLabel() }}</span>
-            </div>
-            <h3 class="prize-name">{{ props.winner.prize }}</h3>
-
-            @if (props.winner.prizeDescription) {
-              <p class="prize-description">{{ props.winner.prizeDescription }}</p>
-            }
-
-            @if (props.showPrizeValue !== false && props.winner.prizeValue) {
-              <div class="prize-value">
-                {{ formatPrizeValue() }}
-              </div>
-            }
-          </div>
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:block}.winner-display-container{--winner-color: var(--ion-color-warning);--animation-duration: .8s;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;border-radius:16px;overflow:hidden}.bg-solid{background:var(--ion-color-light);border:2px solid var(--winner-color)}.bg-gradient{background:linear-gradient(135deg,var(--ion-color-light) 0%,rgba(var(--ion-color-warning-rgb),.1) 100%);border:2px solid var(--winner-color)}.bg-transparent{background:transparent}.trophy-container{margin-bottom:16px}.trophy-icon{font-size:56px;color:var(--winner-color);filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.winner-label{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--winner-color);margin-bottom:8px}.winner-info{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}.winner-avatar{margin-bottom:8px}.winner-name{font-size:28px;font-weight:700;color:var(--ion-color-dark);margin:0;line-height:1.2}.winner-location{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--ion-color-medium-shade)}.winner-location ion-icon{font-size:16px}.ticket-info{display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(var(--ion-color-dark-rgb),.05);border-radius:24px;margin-top:8px}.ticket-info ion-icon{font-size:20px;color:var(--winner-color)}.ticket-label{font-size:14px;color:var(--ion-color-medium-shade)}.ticket-number{font-size:18px;font-weight:700;color:var(--ion-color-dark);font-variant-numeric:tabular-nums}.prize-info{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;background:var(--ion-color-light-shade);border-radius:12px;width:100%;max-width:400px}.prize-image{width:120px;height:120px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 4px 12px #0000001a}.prize-image img{width:100%;height:100%;object-fit:cover}.prize-details{display:flex;flex-direction:column;align-items:center;gap:4px}.prize-header{display:flex;align-items:center;gap:4px;color:var(--ion-color-medium-shade);font-size:12px}.prize-header ion-icon{font-size:16px;color:var(--winner-color)}.prize-label{text-transform:uppercase;letter-spacing:1px}.prize-name{font-size:20px;font-weight:600;color:var(--ion-color-dark);margin:0}.prize-description{font-size:14px;color:var(--ion-color-medium-shade);margin:4px 0 0}.prize-value{font-size:24px;font-weight:700;color:var(--winner-color);margin-top:8px}.confetti-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .3s}.confetti-container.active{opacity:1}.confetti-piece{position:absolute;width:10px;height:10px;top:-20px;left:var(--x, 50%);background:var(--winner-color);opacity:0;animation:confetti-fall 3s ease-out var(--delay, 0s) forwards}.confetti-piece:nth-child(2n){background:var(--ion-color-primary);width:8px;height:12px}.confetti-piece:nth-child(3n){background:var(--ion-color-danger);border-radius:50%}.confetti-piece:nth-child(5n){background:var(--ion-color-success);width:6px;height:14px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(400px) rotate(var(--rotation, 720deg))}}.animation-fade:not(.revealed) .winner-info,.animation-fade:not(.revealed) .prize-info{opacity:0}.animation-fade.animating .winner-info,.animation-fade.animating .prize-info{animation:fade-in var(--animation-duration) ease-out forwards}.animation-zoom:not(.revealed) .winner-info,.animation-zoom:not(.revealed) .prize-info{opacity:0;transform:scale(.5)}.animation-zoom.animating .winner-info,.animation-zoom.animating .prize-info{animation:zoom-in var(--animation-duration) cubic-bezier(.34,1.56,.64,1) forwards}.animation-slide:not(.revealed) .winner-info,.animation-slide:not(.revealed) .prize-info{opacity:0;transform:translateY(40px)}.animation-slide.animating .winner-info,.animation-slide.animating .prize-info{animation:slide-up var(--animation-duration) ease-out forwards}.animation-slide.animating .prize-info{animation-delay:.2s}.animation-spotlight:not(.revealed) .winner-info,.animation-spotlight:not(.revealed) .prize-info{opacity:0}.animation-spotlight:not(.revealed):before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,.8) 0%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%)}.animation-spotlight.animating:before{animation:spotlight var(--animation-duration) ease-out forwards}.animation-spotlight.animating .winner-info,.animation-spotlight.animating .prize-info{animation:fade-in calc(var(--animation-duration) * .5) ease-out calc(var(--animation-duration) * .5) forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes zoom-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes slide-up{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes spotlight{0%{width:0;height:0}to{width:200%;height:200%}}.size-small{padding:20px 16px}.size-small .trophy-icon{font-size:40px}.size-small .winner-label{font-size:12px}.size-small .winner-name{font-size:20px}.size-small .ticket-number,.size-small .prize-name{font-size:16px}.size-small .prize-value{font-size:18px}.size-large{padding:48px 32px}.size-large .trophy-icon{font-size:80px}.size-large .winner-label{font-size:18px;letter-spacing:3px}.size-large .winner-name{font-size:40px}.size-large .ticket-number{font-size:24px}.size-large .prize-image{width:160px;height:160px}.size-large .prize-name{font-size:28px}.size-large .prize-value{font-size:32px}.mode-compact{padding:16px}.mode-compact .trophy-container,.mode-compact .prize-info{display:none}.mode-compact .winner-label{font-size:11px;margin-bottom:4px}.mode-compact .winner-name{font-size:18px}.mode-celebration .trophy-icon{animation:trophy-bounce 1s ease-in-out infinite}.mode-celebration.revealed .winner-name{animation:glow 2s ease-in-out infinite}@keyframes trophy-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes glow{0%,to{text-shadow:0 0 10px rgba(var(--ion-color-warning-rgb),.3)}50%{text-shadow:0 0 20px rgba(var(--ion-color-warning-rgb),.6)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WinnerDisplayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-winner-display', standalone: true, imports: [CommonModule, IonIcon, AvatarComponent], template: `
-    <div
-      class="winner-display-container"
-      [class]="props.cssClass"
-      [class.mode-compact]="props.mode === 'compact'"
-      [class.mode-standard]="props.mode === 'standard' || !props.mode"
-      [class.mode-full]="props.mode === 'full'"
-      [class.mode-celebration]="props.mode === 'celebration'"
-      [class.size-small]="props.size === 'small'"
-      [class.size-medium]="props.size === 'medium' || !props.size"
-      [class.size-large]="props.size === 'large'"
-      [class.bg-solid]="props.background === 'solid' || !props.background"
-      [class.bg-gradient]="props.background === 'gradient'"
-      [class.bg-transparent]="props.background === 'transparent'"
-      [class.animating]="isAnimating"
-      [class.revealed]="isRevealed"
-      [class.animation-fade]="props.animation === 'fade'"
-      [class.animation-zoom]="props.animation === 'zoom'"
-      [class.animation-slide]="props.animation === 'slide'"
-      [class.animation-spotlight]="props.animation === 'spotlight'"
-      [style.--winner-color]="getColor()"
-      [style.--animation-duration]="(props.animationDuration || 800) + 'ms'"
-    >
-      <!-- Confetti overlay -->
-      @if (props.showConfetti && (props.mode === 'celebration' || props.mode === 'full')) {
-        <div class="confetti-container" [class.active]="showConfetti">
-          @for (i of confettiPieces; track i) {
-            <div
-              class="confetti-piece"
-              [style.--delay]="i * 0.1 + 's'"
-              [style.--x]="getRandomX(i)"
-              [style.--rotation]="getRandomRotation(i)"
-            ></div>
-          }
-        </div>
-      }
-
-      <!-- Trophy icon -->
-      @if (props.showTrophy !== false) {
-        <div class="trophy-container">
-          <ion-icon name="trophy-outline" class="trophy-icon"></ion-icon>
-        </div>
-      }
-
-      <!-- Winner label -->
-      <div class="winner-label">{{ getWinnerLabel() }}</div>
-
-      <!-- Winner info -->
-      <div class="winner-info">
-        <!-- Avatar -->
-        @if (props.winner.avatar && (props.mode === 'full' || props.mode === 'celebration')) {
-          <val-avatar [props]="props.winner.avatar" class="winner-avatar"></val-avatar>
-        }
-
-        <!-- Name -->
-        <h2 class="winner-name">{{ props.winner.name }}</h2>
-
-        <!-- Location -->
-        @if (props.showLocation !== false && props.winner.location) {
-          <div class="winner-location">
-            <ion-icon name="location-outline"></ion-icon>
-            <span>{{ props.winner.location }}</span>
-          </div>
-        }
-
-        <!-- Ticket number -->
-        @if (props.showTicketNumber !== false) {
-          <div class="ticket-info">
-            <ion-icon name="ticket-outline"></ion-icon>
-            <span class="ticket-label">{{ getTicketLabel() }}</span>
-            <span class="ticket-number">{{ formatTicketNumber() }}</span>
-          </div>
-        }
-      </div>
-
-      <!-- Prize info -->
-      @if (props.showPrize !== false && props.winner.prize) {
-        <div class="prize-info">
-          @if (props.winner.prizeImage && (props.mode === 'full' || props.mode === 'celebration')) {
-            <div class="prize-image">
-              <img [src]="props.winner.prizeImage" [alt]="props.winner.prize" />
-            </div>
-          }
-
-          <div class="prize-details">
-            <div class="prize-header">
-              <ion-icon name="gift-outline"></ion-icon>
-              <span class="prize-label">{{ getPrizeLabel() }}</span>
-            </div>
-            <h3 class="prize-name">{{ props.winner.prize }}</h3>
-
-            @if (props.winner.prizeDescription) {
-              <p class="prize-description">{{ props.winner.prizeDescription }}</p>
-            }
-
-            @if (props.showPrizeValue !== false && props.winner.prizeValue) {
-              <div class="prize-value">
-                {{ formatPrizeValue() }}
-              </div>
-            }
-          </div>
-        </div>
-      }
-    </div>
-  `, styles: [":host{display:block}.winner-display-container{--winner-color: var(--ion-color-warning);--animation-duration: .8s;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;border-radius:16px;overflow:hidden}.bg-solid{background:var(--ion-color-light);border:2px solid var(--winner-color)}.bg-gradient{background:linear-gradient(135deg,var(--ion-color-light) 0%,rgba(var(--ion-color-warning-rgb),.1) 100%);border:2px solid var(--winner-color)}.bg-transparent{background:transparent}.trophy-container{margin-bottom:16px}.trophy-icon{font-size:56px;color:var(--winner-color);filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.winner-label{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--winner-color);margin-bottom:8px}.winner-info{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}.winner-avatar{margin-bottom:8px}.winner-name{font-size:28px;font-weight:700;color:var(--ion-color-dark);margin:0;line-height:1.2}.winner-location{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--ion-color-medium-shade)}.winner-location ion-icon{font-size:16px}.ticket-info{display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(var(--ion-color-dark-rgb),.05);border-radius:24px;margin-top:8px}.ticket-info ion-icon{font-size:20px;color:var(--winner-color)}.ticket-label{font-size:14px;color:var(--ion-color-medium-shade)}.ticket-number{font-size:18px;font-weight:700;color:var(--ion-color-dark);font-variant-numeric:tabular-nums}.prize-info{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;background:var(--ion-color-light-shade);border-radius:12px;width:100%;max-width:400px}.prize-image{width:120px;height:120px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 4px 12px #0000001a}.prize-image img{width:100%;height:100%;object-fit:cover}.prize-details{display:flex;flex-direction:column;align-items:center;gap:4px}.prize-header{display:flex;align-items:center;gap:4px;color:var(--ion-color-medium-shade);font-size:12px}.prize-header ion-icon{font-size:16px;color:var(--winner-color)}.prize-label{text-transform:uppercase;letter-spacing:1px}.prize-name{font-size:20px;font-weight:600;color:var(--ion-color-dark);margin:0}.prize-description{font-size:14px;color:var(--ion-color-medium-shade);margin:4px 0 0}.prize-value{font-size:24px;font-weight:700;color:var(--winner-color);margin-top:8px}.confetti-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .3s}.confetti-container.active{opacity:1}.confetti-piece{position:absolute;width:10px;height:10px;top:-20px;left:var(--x, 50%);background:var(--winner-color);opacity:0;animation:confetti-fall 3s ease-out var(--delay, 0s) forwards}.confetti-piece:nth-child(2n){background:var(--ion-color-primary);width:8px;height:12px}.confetti-piece:nth-child(3n){background:var(--ion-color-danger);border-radius:50%}.confetti-piece:nth-child(5n){background:var(--ion-color-success);width:6px;height:14px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(400px) rotate(var(--rotation, 720deg))}}.animation-fade:not(.revealed) .winner-info,.animation-fade:not(.revealed) .prize-info{opacity:0}.animation-fade.animating .winner-info,.animation-fade.animating .prize-info{animation:fade-in var(--animation-duration) ease-out forwards}.animation-zoom:not(.revealed) .winner-info,.animation-zoom:not(.revealed) .prize-info{opacity:0;transform:scale(.5)}.animation-zoom.animating .winner-info,.animation-zoom.animating .prize-info{animation:zoom-in var(--animation-duration) cubic-bezier(.34,1.56,.64,1) forwards}.animation-slide:not(.revealed) .winner-info,.animation-slide:not(.revealed) .prize-info{opacity:0;transform:translateY(40px)}.animation-slide.animating .winner-info,.animation-slide.animating .prize-info{animation:slide-up var(--animation-duration) ease-out forwards}.animation-slide.animating .prize-info{animation-delay:.2s}.animation-spotlight:not(.revealed) .winner-info,.animation-spotlight:not(.revealed) .prize-info{opacity:0}.animation-spotlight:not(.revealed):before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,.8) 0%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%)}.animation-spotlight.animating:before{animation:spotlight var(--animation-duration) ease-out forwards}.animation-spotlight.animating .winner-info,.animation-spotlight.animating .prize-info{animation:fade-in calc(var(--animation-duration) * .5) ease-out calc(var(--animation-duration) * .5) forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes zoom-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes slide-up{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes spotlight{0%{width:0;height:0}to{width:200%;height:200%}}.size-small{padding:20px 16px}.size-small .trophy-icon{font-size:40px}.size-small .winner-label{font-size:12px}.size-small .winner-name{font-size:20px}.size-small .ticket-number,.size-small .prize-name{font-size:16px}.size-small .prize-value{font-size:18px}.size-large{padding:48px 32px}.size-large .trophy-icon{font-size:80px}.size-large .winner-label{font-size:18px;letter-spacing:3px}.size-large .winner-name{font-size:40px}.size-large .ticket-number{font-size:24px}.size-large .prize-image{width:160px;height:160px}.size-large .prize-name{font-size:28px}.size-large .prize-value{font-size:32px}.mode-compact{padding:16px}.mode-compact .trophy-container,.mode-compact .prize-info{display:none}.mode-compact .winner-label{font-size:11px;margin-bottom:4px}.mode-compact .winner-name{font-size:18px}.mode-celebration .trophy-icon{animation:trophy-bounce 1s ease-in-out infinite}.mode-celebration.revealed .winner-name{animation:glow 2s ease-in-out infinite}@keyframes trophy-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes glow{0%,to{text-shadow:0 0 10px rgba(var(--ion-color-warning-rgb),.3)}50%{text-shadow:0 0 20px rgba(var(--ion-color-warning-rgb),.6)}}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }], animationComplete: [{
-                type: Output
-            }] } });
-
-/**
- * Default status labels.
- */
-const DEFAULT_STATUS_LABELS = {
-    upcoming: 'Próximamente',
-    active: 'Activo',
-    sold_out: 'Agotado',
-    drawing: 'Sorteando',
-    completed: 'Finalizado',
-    cancelled: 'Cancelado',
-};
-/**
- * Default status colors.
- */
-const DEFAULT_STATUS_COLORS = {
-    upcoming: 'medium',
-    active: 'success',
-    sold_out: 'warning',
-    drawing: 'tertiary',
-    completed: 'primary',
-    cancelled: 'danger',
-};
-
-addIcons({
-    ticketOutline,
-    calendarOutline,
-    giftOutline,
-    heartOutline,
-    timeOutline,
-});
-/**
- * val-raffle-status-card
- *
- * A card component for displaying raffle status and information.
- *
- * @example Basic usage
- * ```html
- * <val-raffle-status-card
- *   [props]="{
- *     title: 'Rifa Benéfica 2024',
- *     status: 'active',
- *     ticketPrice: 50,
- *     progress: {
- *       totalTickets: 1000,
- *       soldTickets: 450
- *     }
- *   }"
- * ></val-raffle-status-card>
- * ```
- *
- * @example Featured with prize
- * ```html
- * <val-raffle-status-card
- *   [props]="{
- *     title: 'Gran Sorteo iPhone 15',
- *     description: 'Participa y gana un iPhone 15 Pro Max',
- *     status: 'active',
- *     variant: 'featured',
- *     coverImage: { src: 'cover.jpg' },
- *     prize: {
- *       name: 'iPhone 15 Pro Max 256GB',
- *       value: 32000,
- *       image: { src: 'iphone.jpg' }
- *     },
- *     ticketPrice: 100,
- *     endDate: '2024-12-25',
- *     showCountdown: true,
- *     primaryAction: {
- *       label: 'Comprar boletos',
- *       color: 'success'
- *     }
- *   }"
- * ></val-raffle-status-card>
- * ```
- */
-class RaffleStatusCardComponent {
-    constructor() {
-        this.primaryActionClick = new EventEmitter();
-        this.secondaryActionClick = new EventEmitter();
-    }
-    get isActiveOrUpcoming() {
-        return this.props.status === 'active' || this.props.status === 'upcoming';
-    }
-    get progressPercentage() {
-        if (!this.props.progress)
-            return 0;
-        const { soldTickets, totalTickets } = this.props.progress;
-        if (totalTickets === 0)
-            return 0;
-        return Math.round((soldTickets / totalTickets) * 100);
-    }
-    getStatusLabel() {
-        const labels = { ...DEFAULT_STATUS_LABELS, ...this.props.statusLabels };
-        return labels[this.props.status] || this.props.status;
-    }
-    getStatusColor() {
-        if (this.props.statusColor)
-            return this.props.statusColor;
-        return DEFAULT_STATUS_COLORS[this.props.status] || 'medium';
-    }
-    getProgressColor() {
-        if (this.progressPercentage >= 100)
-            return 'success';
-        if (this.progressPercentage >= 75)
-            return 'warning';
-        return 'primary';
-    }
-    getTitle() {
-        return this.props.title || '';
-    }
-    getDescription() {
-        return this.props.description || '';
-    }
-    formatCurrency(amount) {
-        const symbol = this.props.currencySymbol || '$';
-        return `${symbol}${amount.toLocaleString('es-MX')}`;
-    }
-    formatDate(date) {
-        const d = typeof date === 'string' ? new Date(date) : date;
-        return d.toLocaleDateString('es-MX', {
-            day: 'numeric',
-            month: 'short',
-            year: 'numeric',
-        });
-    }
-    onPrimaryAction() {
-        this.primaryActionClick.emit();
-    }
-    onSecondaryAction() {
-        this.secondaryActionClick.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RaffleStatusCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RaffleStatusCardComponent, isStandalone: true, selector: "val-raffle-status-card", inputs: { props: "props" }, outputs: { primaryActionClick: "primaryActionClick", secondaryActionClick: "secondaryActionClick" }, ngImport: i0, template: `
-    <article
-      class="raffle-card"
-      [class]="props.cssClass"
-      [class.variant-default]="props.variant === 'default' || !props.variant"
-      [class.variant-featured]="props.variant === 'featured'"
-      [class.variant-compact]="props.variant === 'compact'"
-      [class.variant-horizontal]="props.variant === 'horizontal'"
-      [class.size-small]="props.size === 'small'"
-      [class.size-medium]="props.size === 'medium' || !props.size"
-      [class.size-large]="props.size === 'large'"
-      [class]="'status-' + props.status"
-    >
-      <!-- Cover image -->
-      @if (props.coverImage && props.variant !== 'compact') {
-        <div class="card-image">
-          <val-image [props]="props.coverImage"></val-image>
-
-          <!-- Status badge over image -->
-          @if (props.showStatusBadge !== false) {
-            <ion-badge [color]="getStatusColor()" class="status-badge">
-              {{ getStatusLabel() }}
-            </ion-badge>
-          }
-
-          <!-- Countdown overlay -->
-          @if (props.showCountdown && props.endDate && isActiveOrUpcoming) {
-            <div class="countdown-overlay">
-              <val-countdown
-                [props]="{
-                  targetDate: props.endDate,
-                  format: 'compact',
-                  size: 'small',
-                  color: 'light'
-                }"
-              ></val-countdown>
-            </div>
-          }
-        </div>
-      }
-
-      <div class="card-content">
-        <!-- Header -->
-        <header class="card-header">
-          @if (props.showStatusBadge !== false && (props.variant === 'compact' || !props.coverImage)) {
-            <ion-badge [color]="getStatusColor()" class="status-badge inline">
-              {{ getStatusLabel() }}
-            </ion-badge>
-          }
-
-          <h3 class="card-title">{{ getTitle() }}</h3>
-
-          @if (props.description) {
-            <p class="card-description">{{ getDescription() }}</p>
-          }
-        </header>
-
-        <!-- Beneficiary -->
-        @if (props.beneficiary) {
-          <div class="beneficiary-info">
-            <ion-icon name="heart-outline"></ion-icon>
-            @if (props.beneficiaryImage) {
-              <val-image [props]="props.beneficiaryImage" class="beneficiary-image"></val-image>
-            }
-            <span>{{ props.beneficiary }}</span>
-          </div>
-        }
-
-        <!-- Prize preview -->
-        @if (props.prize && props.variant !== 'compact') {
-          <div class="prize-preview">
-            <div class="prize-header">
-              <ion-icon name="gift-outline"></ion-icon>
-              <span>Premio</span>
-            </div>
-            <div class="prize-name">{{ props.prize.name }}</div>
-            @if (props.prize.value) {
-              <div class="prize-value">
-                {{ formatCurrency(props.prize.value) }}
-              </div>
-            }
-          </div>
-        }
-
-        <!-- Progress -->
-        @if (props.showProgress !== false && props.progress) {
-          <div class="progress-section">
-            <div class="progress-header">
-              <span class="progress-label">Progreso</span>
-              <span class="progress-value">{{ progressPercentage }}%</span>
-            </div>
-            <ion-progress-bar
-              [value]="progressPercentage / 100"
-              [color]="getProgressColor()"
-            ></ion-progress-bar>
-          </div>
-        }
-
-        <!-- Ticket stats -->
-        @if (props.showTicketStats !== false && props.progress) {
-          <div class="ticket-stats">
-            <div class="stat">
-              <ion-icon name="ticket-outline"></ion-icon>
-              <span class="stat-value">{{ props.progress.soldTickets }}</span>
-              <span class="stat-label">vendidos</span>
-            </div>
-            <div class="stat-divider"></div>
-            <div class="stat">
-              <span class="stat-value">{{ props.progress.totalTickets - props.progress.soldTickets }}</span>
-              <span class="stat-label">disponibles</span>
-            </div>
-          </div>
-        }
-
-        <!-- Price -->
-        @if (props.showPrice !== false && props.ticketPrice) {
-          <div class="price-section">
-            <val-price-tag
-              [props]="{
-                amount: props.ticketPrice,
-                currency: props.currency || 'MXN',
-                currencySymbol: props.currencySymbol,
-                period: 'por boleto',
-                size: props.size === 'large' ? 'large' : 'medium',
-                variant: 'highlight'
-              }"
-            ></val-price-tag>
-          </div>
-        }
-
-        <!-- Dates -->
-        @if (props.showDates !== false && (props.startDate || props.endDate)) {
-          <div class="dates-section">
-            @if (props.startDate) {
-              <div class="date-item">
-                <ion-icon name="calendar-outline"></ion-icon>
-                <span>Inicia: {{ formatDate(props.startDate) }}</span>
-              </div>
-            }
-            @if (props.endDate) {
-              <div class="date-item">
-                <ion-icon name="time-outline"></ion-icon>
-                <span>Sorteo: {{ formatDate(props.endDate) }}</span>
-              </div>
-            }
-          </div>
-        }
-
-        <!-- Actions -->
-        @if (props.primaryAction || props.secondaryAction) {
-          <div class="card-actions">
-            @if (props.primaryAction) {
-              <val-button
-                [props]="props.primaryAction"
-                (click)="onPrimaryAction()"
-              ></val-button>
-            }
-            @if (props.secondaryAction) {
-              <val-button
-                [props]="props.secondaryAction"
-                (click)="onSecondaryAction()"
-              ></val-button>
-            }
-          </div>
-        }
-      </div>
-    </article>
-  `, isInline: true, styles: [":host{display:block}.raffle-card{display:flex;flex-direction:column;background:var(--ion-color-light);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #00000014;transition:transform .2s,box-shadow .2s}.raffle-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.card-image{position:relative;aspect-ratio:16/9;overflow:hidden}.card-image val-image{width:100%;height:100%}.card-image val-image ::ng-deep img{width:100%;height:100%;object-fit:cover}.status-badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:4px}.status-badge.inline{position:static;margin-bottom:8px}.countdown-overlay{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,#000000b3)}.card-content{display:flex;flex-direction:column;gap:12px;padding:16px}.card-header{display:flex;flex-direction:column;gap:4px}.card-title{font-size:18px;font-weight:600;color:var(--ion-color-dark);margin:0;line-height:1.3}.card-description{font-size:14px;color:var(--ion-color-medium-shade);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.beneficiary-info{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ion-color-medium-shade)}.beneficiary-info ion-icon{font-size:16px;color:var(--ion-color-danger)}.beneficiary-info .beneficiary-image{width:24px;height:24px;border-radius:50%;overflow:hidden}.prize-preview{padding:12px;background:var(--ion-color-light-shade);border-radius:8px}.prize-header{display:flex;align-items:center;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium);margin-bottom:4px}.prize-header ion-icon{font-size:14px;color:var(--ion-color-warning)}.prize-name{font-size:15px;font-weight:600;color:var(--ion-color-dark)}.prize-value{font-size:18px;font-weight:700;color:var(--ion-color-success);margin-top:4px}.progress-section{display:flex;flex-direction:column;gap:6px}.progress-header{display:flex;justify-content:space-between;align-items:center}.progress-label{font-size:12px;color:var(--ion-color-medium-shade)}.progress-value{font-size:14px;font-weight:600;color:var(--ion-color-dark)}ion-progress-bar{height:8px;border-radius:4px;--background: var(--ion-color-light-shade)}.ticket-stats{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;background:var(--ion-color-light-shade);border-radius:8px}.stat{display:flex;align-items:center;gap:6px;font-size:13px}.stat ion-icon{font-size:18px;color:var(--ion-color-primary)}.stat-value{font-weight:700;color:var(--ion-color-dark);font-size:16px}.stat-label{color:var(--ion-color-medium-shade)}.stat-divider{width:1px;height:24px;background:var(--ion-color-medium-tint)}.price-section{display:flex;justify-content:center;padding:8px 0}.dates-section{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ion-color-medium-shade)}.date-item{display:flex;align-items:center;gap:6px}.date-item ion-icon{font-size:16px;color:var(--ion-color-primary)}.card-actions{display:flex;gap:8px;margin-top:4px}.card-actions val-button{flex:1}.variant-featured{border:2px solid var(--ion-color-warning)}.variant-featured .card-image{aspect-ratio:2/1}.variant-featured .card-title{font-size:22px}.variant-compact .card-content{padding:12px;gap:8px}.variant-compact .card-title{font-size:15px}.variant-compact .card-description{font-size:13px;-webkit-line-clamp:1}.variant-compact .ticket-stats,.variant-compact .dates-section{display:none}.variant-horizontal{flex-direction:row}.variant-horizontal .card-image{width:40%;min-width:150px;aspect-ratio:1}.variant-horizontal .card-content{flex:1;justify-content:center}.size-small .card-content{padding:12px;gap:8px}.size-small .card-title{font-size:15px}.size-small .card-description{font-size:12px}.size-small .ticket-stats{padding:8px}.size-small .stat-value{font-size:14px}.size-large .card-content{padding:24px;gap:16px}.size-large .card-title{font-size:24px}.size-large .card-description{font-size:16px}.size-large .prize-name{font-size:18px}.size-large .prize-value{font-size:22px}.status-upcoming{opacity:.9}.status-sold_out .card-image:after{content:\"\";position:absolute;inset:0;background:#0000004d}.status-completed .card-actions{opacity:.5;pointer-events:none}.status-cancelled{opacity:.6}.status-cancelled .card-image:after{content:\"\";position:absolute;inset:0;background:#0006}@media (max-width: 480px){.variant-horizontal{flex-direction:column}.variant-horizontal .card-image{width:100%;aspect-ratio:16/9}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: CountdownComponent, selector: "val-countdown", inputs: ["props"], outputs: ["complete", "tick"] }, { kind: "component", type: PriceTagComponent, selector: "val-price-tag", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RaffleStatusCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-raffle-status-card', standalone: true, imports: [
-                        CommonModule,
-                        IonIcon,
-                        IonBadge,
-                        IonProgressBar,
-                        ImageComponent,
-                        ButtonComponent,
-                        CountdownComponent,
-                        PriceTagComponent,
-                    ], template: `
-    <article
-      class="raffle-card"
-      [class]="props.cssClass"
-      [class.variant-default]="props.variant === 'default' || !props.variant"
-      [class.variant-featured]="props.variant === 'featured'"
-      [class.variant-compact]="props.variant === 'compact'"
-      [class.variant-horizontal]="props.variant === 'horizontal'"
-      [class.size-small]="props.size === 'small'"
-      [class.size-medium]="props.size === 'medium' || !props.size"
-      [class.size-large]="props.size === 'large'"
-      [class]="'status-' + props.status"
-    >
-      <!-- Cover image -->
-      @if (props.coverImage && props.variant !== 'compact') {
-        <div class="card-image">
-          <val-image [props]="props.coverImage"></val-image>
-
-          <!-- Status badge over image -->
-          @if (props.showStatusBadge !== false) {
-            <ion-badge [color]="getStatusColor()" class="status-badge">
-              {{ getStatusLabel() }}
-            </ion-badge>
-          }
-
-          <!-- Countdown overlay -->
-          @if (props.showCountdown && props.endDate && isActiveOrUpcoming) {
-            <div class="countdown-overlay">
-              <val-countdown
-                [props]="{
-                  targetDate: props.endDate,
-                  format: 'compact',
-                  size: 'small',
-                  color: 'light'
-                }"
-              ></val-countdown>
-            </div>
-          }
-        </div>
-      }
-
-      <div class="card-content">
-        <!-- Header -->
-        <header class="card-header">
-          @if (props.showStatusBadge !== false && (props.variant === 'compact' || !props.coverImage)) {
-            <ion-badge [color]="getStatusColor()" class="status-badge inline">
-              {{ getStatusLabel() }}
-            </ion-badge>
-          }
-
-          <h3 class="card-title">{{ getTitle() }}</h3>
-
-          @if (props.description) {
-            <p class="card-description">{{ getDescription() }}</p>
-          }
-        </header>
-
-        <!-- Beneficiary -->
-        @if (props.beneficiary) {
-          <div class="beneficiary-info">
-            <ion-icon name="heart-outline"></ion-icon>
-            @if (props.beneficiaryImage) {
-              <val-image [props]="props.beneficiaryImage" class="beneficiary-image"></val-image>
-            }
-            <span>{{ props.beneficiary }}</span>
-          </div>
-        }
-
-        <!-- Prize preview -->
-        @if (props.prize && props.variant !== 'compact') {
-          <div class="prize-preview">
-            <div class="prize-header">
-              <ion-icon name="gift-outline"></ion-icon>
-              <span>Premio</span>
-            </div>
-            <div class="prize-name">{{ props.prize.name }}</div>
-            @if (props.prize.value) {
-              <div class="prize-value">
-                {{ formatCurrency(props.prize.value) }}
-              </div>
-            }
-          </div>
-        }
-
-        <!-- Progress -->
-        @if (props.showProgress !== false && props.progress) {
-          <div class="progress-section">
-            <div class="progress-header">
-              <span class="progress-label">Progreso</span>
-              <span class="progress-value">{{ progressPercentage }}%</span>
-            </div>
-            <ion-progress-bar
-              [value]="progressPercentage / 100"
-              [color]="getProgressColor()"
-            ></ion-progress-bar>
-          </div>
-        }
-
-        <!-- Ticket stats -->
-        @if (props.showTicketStats !== false && props.progress) {
-          <div class="ticket-stats">
-            <div class="stat">
-              <ion-icon name="ticket-outline"></ion-icon>
-              <span class="stat-value">{{ props.progress.soldTickets }}</span>
-              <span class="stat-label">vendidos</span>
-            </div>
-            <div class="stat-divider"></div>
-            <div class="stat">
-              <span class="stat-value">{{ props.progress.totalTickets - props.progress.soldTickets }}</span>
-              <span class="stat-label">disponibles</span>
-            </div>
-          </div>
-        }
-
-        <!-- Price -->
-        @if (props.showPrice !== false && props.ticketPrice) {
-          <div class="price-section">
-            <val-price-tag
-              [props]="{
-                amount: props.ticketPrice,
-                currency: props.currency || 'MXN',
-                currencySymbol: props.currencySymbol,
-                period: 'por boleto',
-                size: props.size === 'large' ? 'large' : 'medium',
-                variant: 'highlight'
-              }"
-            ></val-price-tag>
-          </div>
-        }
-
-        <!-- Dates -->
-        @if (props.showDates !== false && (props.startDate || props.endDate)) {
-          <div class="dates-section">
-            @if (props.startDate) {
-              <div class="date-item">
-                <ion-icon name="calendar-outline"></ion-icon>
-                <span>Inicia: {{ formatDate(props.startDate) }}</span>
-              </div>
-            }
-            @if (props.endDate) {
-              <div class="date-item">
-                <ion-icon name="time-outline"></ion-icon>
-                <span>Sorteo: {{ formatDate(props.endDate) }}</span>
-              </div>
-            }
-          </div>
-        }
-
-        <!-- Actions -->
-        @if (props.primaryAction || props.secondaryAction) {
-          <div class="card-actions">
-            @if (props.primaryAction) {
-              <val-button
-                [props]="props.primaryAction"
-                (click)="onPrimaryAction()"
-              ></val-button>
-            }
-            @if (props.secondaryAction) {
-              <val-button
-                [props]="props.secondaryAction"
-                (click)="onSecondaryAction()"
-              ></val-button>
-            }
-          </div>
-        }
-      </div>
-    </article>
-  `, styles: [":host{display:block}.raffle-card{display:flex;flex-direction:column;background:var(--ion-color-light);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #00000014;transition:transform .2s,box-shadow .2s}.raffle-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.card-image{position:relative;aspect-ratio:16/9;overflow:hidden}.card-image val-image{width:100%;height:100%}.card-image val-image ::ng-deep img{width:100%;height:100%;object-fit:cover}.status-badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:4px}.status-badge.inline{position:static;margin-bottom:8px}.countdown-overlay{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,#000000b3)}.card-content{display:flex;flex-direction:column;gap:12px;padding:16px}.card-header{display:flex;flex-direction:column;gap:4px}.card-title{font-size:18px;font-weight:600;color:var(--ion-color-dark);margin:0;line-height:1.3}.card-description{font-size:14px;color:var(--ion-color-medium-shade);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.beneficiary-info{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ion-color-medium-shade)}.beneficiary-info ion-icon{font-size:16px;color:var(--ion-color-danger)}.beneficiary-info .beneficiary-image{width:24px;height:24px;border-radius:50%;overflow:hidden}.prize-preview{padding:12px;background:var(--ion-color-light-shade);border-radius:8px}.prize-header{display:flex;align-items:center;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium);margin-bottom:4px}.prize-header ion-icon{font-size:14px;color:var(--ion-color-warning)}.prize-name{font-size:15px;font-weight:600;color:var(--ion-color-dark)}.prize-value{font-size:18px;font-weight:700;color:var(--ion-color-success);margin-top:4px}.progress-section{display:flex;flex-direction:column;gap:6px}.progress-header{display:flex;justify-content:space-between;align-items:center}.progress-label{font-size:12px;color:var(--ion-color-medium-shade)}.progress-value{font-size:14px;font-weight:600;color:var(--ion-color-dark)}ion-progress-bar{height:8px;border-radius:4px;--background: var(--ion-color-light-shade)}.ticket-stats{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;background:var(--ion-color-light-shade);border-radius:8px}.stat{display:flex;align-items:center;gap:6px;font-size:13px}.stat ion-icon{font-size:18px;color:var(--ion-color-primary)}.stat-value{font-weight:700;color:var(--ion-color-dark);font-size:16px}.stat-label{color:var(--ion-color-medium-shade)}.stat-divider{width:1px;height:24px;background:var(--ion-color-medium-tint)}.price-section{display:flex;justify-content:center;padding:8px 0}.dates-section{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ion-color-medium-shade)}.date-item{display:flex;align-items:center;gap:6px}.date-item ion-icon{font-size:16px;color:var(--ion-color-primary)}.card-actions{display:flex;gap:8px;margin-top:4px}.card-actions val-button{flex:1}.variant-featured{border:2px solid var(--ion-color-warning)}.variant-featured .card-image{aspect-ratio:2/1}.variant-featured .card-title{font-size:22px}.variant-compact .card-content{padding:12px;gap:8px}.variant-compact .card-title{font-size:15px}.variant-compact .card-description{font-size:13px;-webkit-line-clamp:1}.variant-compact .ticket-stats,.variant-compact .dates-section{display:none}.variant-horizontal{flex-direction:row}.variant-horizontal .card-image{width:40%;min-width:150px;aspect-ratio:1}.variant-horizontal .card-content{flex:1;justify-content:center}.size-small .card-content{padding:12px;gap:8px}.size-small .card-title{font-size:15px}.size-small .card-description{font-size:12px}.size-small .ticket-stats{padding:8px}.size-small .stat-value{font-size:14px}.size-large .card-content{padding:24px;gap:16px}.size-large .card-title{font-size:24px}.size-large .card-description{font-size:16px}.size-large .prize-name{font-size:18px}.size-large .prize-value{font-size:22px}.status-upcoming{opacity:.9}.status-sold_out .card-image:after{content:\"\";position:absolute;inset:0;background:#0000004d}.status-completed .card-actions{opacity:.5;pointer-events:none}.status-cancelled{opacity:.6}.status-cancelled .card-image:after{content:\"\";position:absolute;inset:0;background:#0006}@media (max-width: 480px){.variant-horizontal{flex-direction:column}.variant-horizontal .card-image{width:100%;aspect-ratio:16/9}}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }], primaryActionClick: [{
-                type: Output
-            }], secondaryActionClick: [{
-                type: Output
-            }] } });
-
-/**
- * Default payment status labels.
- */
-const DEFAULT_PAYMENT_STATUS_LABELS = {
-    pending: 'Pendiente',
-    processing: 'Procesando',
-    paid: 'Pagado',
-    refunded: 'Reembolsado',
-    failed: 'Fallido',
-};
-/**
- * Default payment status colors.
- */
-const DEFAULT_PAYMENT_STATUS_COLORS = {
-    pending: 'warning',
-    processing: 'tertiary',
-    paid: 'success',
-    refunded: 'medium',
-    failed: 'danger',
-};
-
-addIcons({
-    personOutline,
-    mailOutline,
-    callOutline,
-    ticketOutline,
-    locationOutline,
-    calendarOutline,
-    trophyOutline,
-    ellipsisVertical,
-    checkmarkCircle,
-    timeOutline,
-    closeCircle,
-});
-/**
- * val-participant-card
- *
- * A card component for displaying participant information in a raffle.
- *
- * @example Basic usage
- * ```html
- * <val-participant-card
- *   [props]="{
- *     participant: {
- *       id: '1',
- *       name: 'Juan Pérez',
- *       email: 'juan@email.com',
- *       tickets: [42, 156, 789],
- *       paymentStatus: 'paid'
- *     }
- *   }"
- * ></val-participant-card>
- * ```
- *
- * @example Admin variant with actions
- * ```html
- * <val-participant-card
- *   [props]="{
- *     participant: participant,
- *     variant: 'admin',
- *     showActions: true,
- *     actions: [
- *       { id: 'edit', label: 'Editar', icon: 'create-outline' },
- *       { id: 'refund', label: 'Reembolsar', icon: 'cash-outline', color: 'warning' },
- *       { id: 'delete', label: 'Eliminar', icon: 'trash-outline', destructive: true }
- *     ]
- *   }"
- *   (cardClick)="onParticipantClick($event)"
- *   (actionClick)="onActionClick($event)"
- * ></val-participant-card>
- * ```
- *
- * @example Winner highlight
- * ```html
- * <val-participant-card
- *   [props]="{
- *     participant: {
- *       id: '1',
- *       name: 'María García',
- *       tickets: [{ number: 42, status: 'winner' }],
- *       isWinner: true,
- *       paymentStatus: 'paid'
- *     },
- *     highlightWinner: true,
- *     variant: 'detailed'
- *   }"
- * ></val-participant-card>
- * ```
- */
-class ParticipantCardComponent {
-    constructor() {
-        this.cardClick = new EventEmitter();
-        this.actionClick = new EventEmitter();
-        this.i18n = inject(I18nService);
-        this.showAllTickets = false;
-    }
-    /** Get winner badge text */
-    getWinnerText() {
-        return this.i18n.t('winner');
-    }
-    /** Get tickets count text */
-    getTicketsCountText(count) {
-        return `${count} ${count !== 1 ? this.i18n.t('tickets') : this.i18n.t('ticket')}`;
-    }
-    /** Get more tickets text */
-    getMoreText(count) {
-        return `+${count} ${this.i18n.t('more')}`;
-    }
-    /** Get notes label */
-    getNotesLabel() {
-        return this.i18n.t('notes');
-    }
-    get ticketNumbers() {
-        return this.props.participant.tickets || [];
-    }
-    get visibleTickets() {
-        const max = this.props.maxTicketsVisible || 5;
-        if (this.showAllTickets || this.ticketNumbers.length <= max) {
-            return this.ticketNumbers;
-        }
-        return this.ticketNumbers.slice(0, max);
-    }
-    get hiddenTicketsCount() {
-        if (this.showAllTickets)
-            return 0;
-        const max = this.props.maxTicketsVisible || 5;
-        return Math.max(0, this.ticketNumbers.length - max);
-    }
-    formatTicketNumber(ticket) {
-        const num = typeof ticket === 'number' ? ticket : ticket.number;
-        if (this.props.numberPadding) {
-            return String(num).padStart(this.props.numberPadding, '0');
-        }
-        return String(num);
-    }
-    getTicketColor(ticket) {
-        if (typeof ticket === 'number')
-            return 'primary';
-        switch (ticket.status) {
-            case 'winner':
-                return 'warning';
-            case 'reserved':
-                return 'tertiary';
-            case 'cancelled':
-                return 'medium';
-            default:
-                return 'primary';
-        }
-    }
-    isWinnerTicket(ticket) {
-        if (typeof ticket === 'number')
-            return false;
-        return ticket.status === 'winner';
-    }
-    getPaymentStatusLabel() {
-        const status = this.props.participant.paymentStatus;
-        if (!status)
-            return '';
-        // If custom labels are provided, use them first
-        if (this.props.paymentStatusLabels?.[status]) {
-            return this.props.paymentStatusLabels[status];
-        }
-        // Use i18n for default labels
-        const i18nKeys = {
-            pending: 'paymentPending',
-            processing: 'paymentProcessing',
-            paid: 'paymentPaid',
-            refunded: 'paymentRefunded',
-            failed: 'paymentFailed',
-        };
-        const key = i18nKeys[status];
-        return key ? this.i18n.t(key) : status;
-    }
-    getPaymentStatusColor() {
-        const status = this.props.participant.paymentStatus;
-        if (!status)
-            return 'medium';
-        return DEFAULT_PAYMENT_STATUS_COLORS[status] || 'medium';
-    }
-    getPaymentStatusIcon() {
-        const status = this.props.participant.paymentStatus;
-        switch (status) {
-            case 'paid':
-                return 'checkmark-circle';
-            case 'pending':
-            case 'processing':
-                return 'time-outline';
-            case 'failed':
-            case 'refunded':
-                return 'close-circle';
-            default:
-                return 'time-outline';
-        }
-    }
-    formatCurrency(amount) {
-        const symbol = this.props.currencySymbol || '$';
-        return `${symbol}${amount.toLocaleString('es-MX')}`;
-    }
-    formatDate(date) {
-        const d = typeof date === 'string' ? new Date(date) : date;
-        return d.toLocaleDateString('es-MX', {
-            day: 'numeric',
-            month: 'short',
-            year: 'numeric',
-        });
-    }
-    toggleShowAllTickets(event) {
-        event.stopPropagation();
-        this.showAllTickets = !this.showAllTickets;
-    }
-    onCardClick() {
-        if (!this.props.clickable)
-            return;
-        this.cardClick.emit({
-            participant: this.props.participant,
-        });
-    }
-    onActionsClick(event) {
-        event.stopPropagation();
-        // In a real implementation, this would open a popover menu
-        // For now, we'll emit the first action
-        if (this.props.actions?.length) {
-            this.actionClick.emit({
-                actionId: this.props.actions[0].id,
-                participant: this.props.participant,
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParticipantCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ParticipantCardComponent, isStandalone: true, selector: "val-participant-card", inputs: { props: "props" }, outputs: { cardClick: "cardClick", actionClick: "actionClick" }, ngImport: i0, template: `
-    <article
-      class="participant-card"
-      [class]="props.cssClass"
-      [class.variant-default]="props.variant === 'default' || !props.variant"
-      [class.variant-compact]="props.variant === 'compact'"
-      [class.variant-detailed]="props.variant === 'detailed'"
-      [class.variant-admin]="props.variant === 'admin'"
-      [class.size-small]="props.size === 'small'"
-      [class.size-medium]="props.size === 'medium' || !props.size"
-      [class.size-large]="props.size === 'large'"
-      [class.is-winner]="props.participant.isWinner && props.highlightWinner !== false"
-      [class.clickable]="props.clickable"
-      (click)="onCardClick()"
-    >
-      <!-- Winner badge -->
-      @if (props.participant.isWinner && props.highlightWinner !== false) {
-        <div class="winner-badge">
-          <ion-icon name="trophy-outline"></ion-icon>
-          <span>{{ getWinnerText() }}</span>
-        </div>
-      }
-
-      <!-- Main content -->
-      <div class="card-main">
-        <!-- Avatar -->
-        @if (props.showAvatar !== false) {
-          <div class="avatar-section">
-            @if (props.participant.avatar) {
-              <val-avatar [props]="props.participant.avatar"></val-avatar>
-            } @else {
-              <div class="default-avatar">
-                <ion-icon name="person-outline"></ion-icon>
-              </div>
-            }
-          </div>
-        }
-
-        <!-- Info -->
-        <div class="info-section">
-          <h4 class="participant-name">{{ props.participant.name }}</h4>
-
-          @if (props.showEmail !== false && props.participant.email) {
-            <div class="info-item">
-              <ion-icon name="mail-outline"></ion-icon>
-              <span>{{ props.participant.email }}</span>
-            </div>
-          }
-
-          @if (props.showPhone !== false && props.participant.phone) {
-            <div class="info-item">
-              <ion-icon name="call-outline"></ion-icon>
-              <span>{{ props.participant.phone }}</span>
-            </div>
-          }
-
-          @if (props.participant.location) {
-            <div class="info-item">
-              <ion-icon name="location-outline"></ion-icon>
-              <span>{{ props.participant.location }}</span>
-            </div>
-          }
-
-          @if (props.showDate !== false && props.participant.registrationDate) {
-            <div class="info-item">
-              <ion-icon name="calendar-outline"></ion-icon>
-              <span>{{ formatDate(props.participant.registrationDate) }}</span>
-            </div>
-          }
-        </div>
-
-        <!-- Status & Amount (right side) -->
-        <div class="status-section">
-          @if (props.showPaymentStatus !== false && props.participant.paymentStatus) {
-            <ion-badge [color]="getPaymentStatusColor()" class="payment-badge">
-              <ion-icon [name]="getPaymentStatusIcon()"></ion-icon>
-              {{ getPaymentStatusLabel() }}
-            </ion-badge>
-          }
-
-          @if (props.showAmount !== false && props.participant.amountPaid) {
-            <div class="amount">
-              {{ formatCurrency(props.participant.amountPaid) }}
-            </div>
-          }
-        </div>
-
-        <!-- Actions menu -->
-        @if (props.showActions && props.actions?.length) {
-          <ion-button
-            fill="clear"
-            class="actions-button"
-            (click)="onActionsClick($event)"
-          >
-            <ion-icon slot="icon-only" name="ellipsis-vertical"></ion-icon>
-          </ion-button>
-        }
-      </div>
-
-      <!-- Tickets section -->
-      @if (props.showTickets !== false && ticketNumbers.length > 0) {
-        <div class="tickets-section">
-          <div class="tickets-header">
-            <ion-icon name="ticket-outline"></ion-icon>
-            <span>{{ getTicketsCountText(ticketNumbers.length) }}</span>
-          </div>
-
-          <div class="tickets-list">
-            @for (ticket of visibleTickets; track $index) {
-              <ion-chip
-                [color]="getTicketColor(ticket)"
-                [class.winner-ticket]="isWinnerTicket(ticket)"
-                class="ticket-chip"
-              >
-                @if (isWinnerTicket(ticket)) {
-                  <ion-icon name="trophy-outline"></ion-icon>
-                }
-                {{ formatTicketNumber(ticket) }}
-              </ion-chip>
-            }
-
-            @if (hiddenTicketsCount > 0) {
-              <ion-chip
-                color="medium"
-                class="more-tickets"
-                (click)="toggleShowAllTickets($event)"
-              >
-                {{ getMoreText(hiddenTicketsCount) }}
-              </ion-chip>
-            }
-          </div>
-        </div>
-      }
-
-      <!-- Notes (admin variant) -->
-      @if (props.variant === 'admin' && props.participant.notes) {
-        <div class="notes-section">
-          <span class="notes-label">{{ getNotesLabel() }}</span>
-          <p class="notes-text">{{ props.participant.notes }}</p>
-        </div>
-      }
-    </article>
-  `, isInline: true, styles: [":host{display:block}.participant-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--ion-color-light);border-radius:12px;border:1px solid var(--ion-color-light-shade);transition:all .2s}.participant-card.clickable{cursor:pointer}.participant-card.clickable:hover{background:var(--ion-color-light-shade);border-color:var(--ion-color-medium-tint)}.participant-card.clickable:active{transform:scale(.99)}.is-winner{border:2px solid var(--ion-color-warning);background:linear-gradient(135deg,var(--ion-color-light) 0%,rgba(var(--ion-color-warning-rgb),.1) 100%)}.winner-badge{position:absolute;top:-1px;right:16px;display:flex;align-items:center;gap:4px;padding:4px 12px;background:var(--ion-color-warning);color:var(--ion-color-warning-contrast);border-radius:0 0 8px 8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.winner-badge ion-icon{font-size:14px}.card-main{display:flex;align-items:flex-start;gap:12px}.avatar-section{flex-shrink:0}.default-avatar{width:48px;height:48px;border-radius:50%;background:var(--ion-color-light-shade);display:flex;align-items:center;justify-content:center}.default-avatar ion-icon{font-size:24px;color:var(--ion-color-medium)}.info-section{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.participant-name{font-size:16px;font-weight:600;color:var(--ion-color-dark);margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.info-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ion-color-medium-shade)}.info-item ion-icon{font-size:14px;color:var(--ion-color-medium);flex-shrink:0}.info-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-section{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}.payment-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:4px 8px}.payment-badge ion-icon{font-size:12px}.amount{font-size:16px;font-weight:700;color:var(--ion-color-success)}.actions-button{--padding-start: 4px;--padding-end: 4px;margin:-8px -8px -8px 0}.tickets-section{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--ion-color-light-shade)}.tickets-header{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ion-color-medium-shade)}.tickets-header ion-icon{font-size:16px;color:var(--ion-color-primary)}.tickets-list{display:flex;flex-wrap:wrap;gap:6px}.ticket-chip{--padding-start: 10px;--padding-end: 10px;height:28px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.ticket-chip ion-icon{font-size:14px;margin-right:4px}.ticket-chip.winner-ticket{--background: var(--ion-color-warning);--color: var(--ion-color-warning-contrast)}.more-tickets{--padding-start: 8px;--padding-end: 8px;cursor:pointer;font-size:12px}.notes-section{padding-top:12px;border-top:1px solid var(--ion-color-light-shade)}.notes-label{font-size:12px;color:var(--ion-color-medium);text-transform:uppercase;letter-spacing:.5px}.notes-text{margin:4px 0 0;font-size:13px;color:var(--ion-color-dark-shade);line-height:1.4}.variant-compact{padding:12px;gap:8px}.variant-compact .avatar-section{display:none}.variant-compact .participant-name{font-size:14px}.variant-compact .info-item{font-size:12px}.variant-compact .tickets-section{padding-top:8px}.variant-detailed .info-section{gap:6px}.variant-detailed .info-item{font-size:14px}.variant-admin{border-left:4px solid var(--ion-color-primary)}.variant-admin.is-winner{border-left-color:var(--ion-color-warning)}.size-small{padding:10px;gap:8px}.size-small .default-avatar{width:36px;height:36px}.size-small .default-avatar ion-icon{font-size:18px}.size-small .participant-name{font-size:14px}.size-small .info-item{font-size:12px}.size-small .amount{font-size:14px}.size-small .ticket-chip{height:24px;font-size:11px;--padding-start: 8px;--padding-end: 8px}.size-large{padding:20px;gap:16px}.size-large .default-avatar{width:64px;height:64px}.size-large .default-avatar ion-icon{font-size:32px}.size-large .participant-name{font-size:20px}.size-large .info-item{font-size:15px}.size-large .info-item ion-icon{font-size:18px}.size-large .amount{font-size:20px}.size-large .ticket-chip{height:32px;font-size:14px}@media (max-width: 480px){.card-main{flex-wrap:wrap}.status-section{flex-direction:row;width:100%;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--ion-color-light-shade)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: 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: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParticipantCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-participant-card', standalone: true, imports: [CommonModule, IonIcon, IonBadge, IonButton, IonChip, AvatarComponent], template: `
-    <article
-      class="participant-card"
-      [class]="props.cssClass"
-      [class.variant-default]="props.variant === 'default' || !props.variant"
-      [class.variant-compact]="props.variant === 'compact'"
-      [class.variant-detailed]="props.variant === 'detailed'"
-      [class.variant-admin]="props.variant === 'admin'"
-      [class.size-small]="props.size === 'small'"
-      [class.size-medium]="props.size === 'medium' || !props.size"
-      [class.size-large]="props.size === 'large'"
-      [class.is-winner]="props.participant.isWinner && props.highlightWinner !== false"
-      [class.clickable]="props.clickable"
-      (click)="onCardClick()"
-    >
-      <!-- Winner badge -->
-      @if (props.participant.isWinner && props.highlightWinner !== false) {
-        <div class="winner-badge">
-          <ion-icon name="trophy-outline"></ion-icon>
-          <span>{{ getWinnerText() }}</span>
-        </div>
-      }
-
-      <!-- Main content -->
-      <div class="card-main">
-        <!-- Avatar -->
-        @if (props.showAvatar !== false) {
-          <div class="avatar-section">
-            @if (props.participant.avatar) {
-              <val-avatar [props]="props.participant.avatar"></val-avatar>
-            } @else {
-              <div class="default-avatar">
-                <ion-icon name="person-outline"></ion-icon>
-              </div>
-            }
-          </div>
-        }
-
-        <!-- Info -->
-        <div class="info-section">
-          <h4 class="participant-name">{{ props.participant.name }}</h4>
-
-          @if (props.showEmail !== false && props.participant.email) {
-            <div class="info-item">
-              <ion-icon name="mail-outline"></ion-icon>
-              <span>{{ props.participant.email }}</span>
-            </div>
-          }
-
-          @if (props.showPhone !== false && props.participant.phone) {
-            <div class="info-item">
-              <ion-icon name="call-outline"></ion-icon>
-              <span>{{ props.participant.phone }}</span>
-            </div>
-          }
-
-          @if (props.participant.location) {
-            <div class="info-item">
-              <ion-icon name="location-outline"></ion-icon>
-              <span>{{ props.participant.location }}</span>
-            </div>
-          }
-
-          @if (props.showDate !== false && props.participant.registrationDate) {
-            <div class="info-item">
-              <ion-icon name="calendar-outline"></ion-icon>
-              <span>{{ formatDate(props.participant.registrationDate) }}</span>
-            </div>
-          }
-        </div>
-
-        <!-- Status & Amount (right side) -->
-        <div class="status-section">
-          @if (props.showPaymentStatus !== false && props.participant.paymentStatus) {
-            <ion-badge [color]="getPaymentStatusColor()" class="payment-badge">
-              <ion-icon [name]="getPaymentStatusIcon()"></ion-icon>
-              {{ getPaymentStatusLabel() }}
-            </ion-badge>
-          }
-
-          @if (props.showAmount !== false && props.participant.amountPaid) {
-            <div class="amount">
-              {{ formatCurrency(props.participant.amountPaid) }}
-            </div>
-          }
-        </div>
-
-        <!-- Actions menu -->
-        @if (props.showActions && props.actions?.length) {
-          <ion-button
-            fill="clear"
-            class="actions-button"
-            (click)="onActionsClick($event)"
-          >
-            <ion-icon slot="icon-only" name="ellipsis-vertical"></ion-icon>
-          </ion-button>
-        }
-      </div>
-
-      <!-- Tickets section -->
-      @if (props.showTickets !== false && ticketNumbers.length > 0) {
-        <div class="tickets-section">
-          <div class="tickets-header">
-            <ion-icon name="ticket-outline"></ion-icon>
-            <span>{{ getTicketsCountText(ticketNumbers.length) }}</span>
-          </div>
-
-          <div class="tickets-list">
-            @for (ticket of visibleTickets; track $index) {
-              <ion-chip
-                [color]="getTicketColor(ticket)"
-                [class.winner-ticket]="isWinnerTicket(ticket)"
-                class="ticket-chip"
-              >
-                @if (isWinnerTicket(ticket)) {
-                  <ion-icon name="trophy-outline"></ion-icon>
-                }
-                {{ formatTicketNumber(ticket) }}
-              </ion-chip>
-            }
-
-            @if (hiddenTicketsCount > 0) {
-              <ion-chip
-                color="medium"
-                class="more-tickets"
-                (click)="toggleShowAllTickets($event)"
-              >
-                {{ getMoreText(hiddenTicketsCount) }}
-              </ion-chip>
-            }
-          </div>
-        </div>
-      }
-
-      <!-- Notes (admin variant) -->
-      @if (props.variant === 'admin' && props.participant.notes) {
-        <div class="notes-section">
-          <span class="notes-label">{{ getNotesLabel() }}</span>
-          <p class="notes-text">{{ props.participant.notes }}</p>
-        </div>
-      }
-    </article>
-  `, styles: [":host{display:block}.participant-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--ion-color-light);border-radius:12px;border:1px solid var(--ion-color-light-shade);transition:all .2s}.participant-card.clickable{cursor:pointer}.participant-card.clickable:hover{background:var(--ion-color-light-shade);border-color:var(--ion-color-medium-tint)}.participant-card.clickable:active{transform:scale(.99)}.is-winner{border:2px solid var(--ion-color-warning);background:linear-gradient(135deg,var(--ion-color-light) 0%,rgba(var(--ion-color-warning-rgb),.1) 100%)}.winner-badge{position:absolute;top:-1px;right:16px;display:flex;align-items:center;gap:4px;padding:4px 12px;background:var(--ion-color-warning);color:var(--ion-color-warning-contrast);border-radius:0 0 8px 8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.winner-badge ion-icon{font-size:14px}.card-main{display:flex;align-items:flex-start;gap:12px}.avatar-section{flex-shrink:0}.default-avatar{width:48px;height:48px;border-radius:50%;background:var(--ion-color-light-shade);display:flex;align-items:center;justify-content:center}.default-avatar ion-icon{font-size:24px;color:var(--ion-color-medium)}.info-section{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.participant-name{font-size:16px;font-weight:600;color:var(--ion-color-dark);margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.info-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ion-color-medium-shade)}.info-item ion-icon{font-size:14px;color:var(--ion-color-medium);flex-shrink:0}.info-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-section{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}.payment-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:4px 8px}.payment-badge ion-icon{font-size:12px}.amount{font-size:16px;font-weight:700;color:var(--ion-color-success)}.actions-button{--padding-start: 4px;--padding-end: 4px;margin:-8px -8px -8px 0}.tickets-section{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--ion-color-light-shade)}.tickets-header{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ion-color-medium-shade)}.tickets-header ion-icon{font-size:16px;color:var(--ion-color-primary)}.tickets-list{display:flex;flex-wrap:wrap;gap:6px}.ticket-chip{--padding-start: 10px;--padding-end: 10px;height:28px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.ticket-chip ion-icon{font-size:14px;margin-right:4px}.ticket-chip.winner-ticket{--background: var(--ion-color-warning);--color: var(--ion-color-warning-contrast)}.more-tickets{--padding-start: 8px;--padding-end: 8px;cursor:pointer;font-size:12px}.notes-section{padding-top:12px;border-top:1px solid var(--ion-color-light-shade)}.notes-label{font-size:12px;color:var(--ion-color-medium);text-transform:uppercase;letter-spacing:.5px}.notes-text{margin:4px 0 0;font-size:13px;color:var(--ion-color-dark-shade);line-height:1.4}.variant-compact{padding:12px;gap:8px}.variant-compact .avatar-section{display:none}.variant-compact .participant-name{font-size:14px}.variant-compact .info-item{font-size:12px}.variant-compact .tickets-section{padding-top:8px}.variant-detailed .info-section{gap:6px}.variant-detailed .info-item{font-size:14px}.variant-admin{border-left:4px solid var(--ion-color-primary)}.variant-admin.is-winner{border-left-color:var(--ion-color-warning)}.size-small{padding:10px;gap:8px}.size-small .default-avatar{width:36px;height:36px}.size-small .default-avatar ion-icon{font-size:18px}.size-small .participant-name{font-size:14px}.size-small .info-item{font-size:12px}.size-small .amount{font-size:14px}.size-small .ticket-chip{height:24px;font-size:11px;--padding-start: 8px;--padding-end: 8px}.size-large{padding:20px;gap:16px}.size-large .default-avatar{width:64px;height:64px}.size-large .default-avatar ion-icon{font-size:32px}.size-large .participant-name{font-size:20px}.size-large .info-item{font-size:15px}.size-large .info-item ion-icon{font-size:18px}.size-large .amount{font-size:20px}.size-large .ticket-chip{height:32px;font-size:14px}@media (max-width: 480px){.card-main{flex-wrap:wrap}.status-section{flex-direction:row;width:100%;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--ion-color-light-shade)}}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }], cardClick: [{
-                type: Output
-            }], actionClick: [{
-                type: Output
-            }] } });
-
 /**
  * val-glow-card
  *
@@ -17177,77 +15311,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['swiperContainer']
             }] } });
 
-/**
- * val-recap-card
- *
- * A decorative card component with geometric shapes, title, and link.
- * Useful for recap sections, feature highlights, or promotional content.
- *
- * @example
- * <val-recap-card
- *   [props]="{
- *     title: { title: 'Feature Title', subtitle: 'Subtitle here' },
- *     link: { text: 'Learn more', url: '/features' },
- *     color: 'primary',
- *     shapes: [
- *       { color: '#ffffff33', style: { top: '-20px', right: '-20px', width: '100px', height: '100px' } }
- *     ]
- *   }"
- * ></val-recap-card>
- *
- * @input props - Card configuration (title, link, shapes, color)
- */
-class RecapCardComponent {
-    /**
-     * Merges shape color with additional styles.
-     */
-    mergeShapeStyle(shape) {
-        return { 'background-color': shape.color, ...(shape.style || {}) };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RecapCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RecapCardComponent, isStandalone: true, selector: "val-recap-card", inputs: { props: "props" }, ngImport: i0, template: `
-    <ion-card class="recap-card" [color]="props.color || ''">
-      <div class="shapes">
-        <ng-container *ngFor="let shape of props.shapes">
-          <div class="shape" [ngStyle]="mergeShapeStyle(shape)"></div>
-        </ng-container>
-      </div>
-      <ion-card-content
-        class="recap-card__content"
-        [style.min-height]="props.minHeight || '400px'"
-        [style.min-width]="props.width || '280px'"
-        [style.max-width]="props.width || '280px'"
-      >
-        <val-title-block [props]="props.title" />
-        <val-link [props]="props.link" />
-      </ion-card-content>
-    </ion-card>
-  `, isInline: true, styles: [".recap-card{border-radius:24px;box-shadow:0 4px 10px #0000001a;margin:10px;position:relative;overflow:hidden}.recap-card .shapes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.7;pointer-events:none}.recap-card .shapes .shape{position:absolute;border-radius:50%}.recap-card .recap-card__content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:400px;min-width:280px;max-width:280px;padding:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RecapCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-recap-card', standalone: true, imports: [CommonModule, IonCard, IonCardContent, LinkComponent, TitleBlockComponent], template: `
-    <ion-card class="recap-card" [color]="props.color || ''">
-      <div class="shapes">
-        <ng-container *ngFor="let shape of props.shapes">
-          <div class="shape" [ngStyle]="mergeShapeStyle(shape)"></div>
-        </ng-container>
-      </div>
-      <ion-card-content
-        class="recap-card__content"
-        [style.min-height]="props.minHeight || '400px'"
-        [style.min-width]="props.width || '280px'"
-        [style.max-width]="props.width || '280px'"
-      >
-        <val-title-block [props]="props.title" />
-        <val-link [props]="props.link" />
-      </ion-card-content>
-    </ion-card>
-  `, styles: [".recap-card{border-radius:24px;box-shadow:0 4px 10px #0000001a;margin:10px;position:relative;overflow:hidden}.recap-card .shapes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.7;pointer-events:none}.recap-card .shapes .shape{position:absolute;border-radius:50%}.recap-card .recap-card__content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:400px;min-width:280px;max-width:280px;padding:16px}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }] } });
-
 /**
  * val-testimonial-card
  *
@@ -25466,17 +23529,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 /**
  * val-cards-carousel
  *
- * A horizontal carousel of recap cards with optional action header.
- * Combines HorizontalScroll for smooth horizontal scrolling with RecapCard
- * components for consistent card styling.
+ * A horizontal carousel of cards with optional action header.
+ * Combines HorizontalScroll for smooth horizontal scrolling with inline
+ * card rendering for consistent card styling.
  *
  * @example
  * <val-cards-carousel
  *   [props]="{
  *     header: { title: 'Featured Items', actionType: 'link', actionLabel: 'View All' },
  *     cards: [
- *       { title: 'Card 1', description: 'Description', href: '/item/1' },
- *       { title: 'Card 2', description: 'Description', href: '/item/2' }
+ *       { title: { title: 'Card 1' }, link: { text: 'Learn more', url: '/item/1' } },
+ *       { title: { title: 'Card 2' }, link: { text: 'Learn more', url: '/item/2' } }
  *     ]
  *   }"
  * ></val-cards-carousel>
@@ -25490,30 +23553,74 @@ class CardsCarouselComponent {
          */
         this.props = { cards: [] };
     }
+    /**
+     * Merges shape color with additional styles.
+     */
+    mergeShapeStyle(shape) {
+        return { 'background-color': shape.color, ...(shape.style || {}) };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardsCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardsCarouselComponent, isStandalone: true, selector: "val-cards-carousel", inputs: { props: "props" }, ngImport: i0, template: `
     @if (props.header) {
       <val-action-header [props]="props.header" />
     }
 
-    <val-horizontal-scroll [items]="props.cards" [itemTemplate]="recapCardTemplate" />
-    <ng-template #recapCardTemplate let-recap>
-      <val-recap-card [props]="recap" />
+    <val-horizontal-scroll [items]="props.cards" [itemTemplate]="cardTemplate" />
+    <ng-template #cardTemplate let-card>
+      <ion-card class="carousel-card" [color]="card.color || ''">
+        <div class="shapes">
+          <ng-container *ngFor="let shape of card.shapes">
+            <div class="shape" [ngStyle]="mergeShapeStyle(shape)"></div>
+          </ng-container>
+        </div>
+        <ion-card-content
+          class="carousel-card__content"
+          [style.min-height]="card.minHeight || '400px'"
+          [style.min-width]="card.width || '280px'"
+          [style.max-width]="card.width || '280px'"
+        >
+          <val-title-block [props]="card.title" />
+          <val-link [props]="card.link" />
+        </ion-card-content>
+      </ion-card>
     </ng-template>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: RecapCardComponent, selector: "val-recap-card", inputs: ["props"] }, { kind: "component", type: HorizontalScrollComponent, selector: "val-horizontal-scroll", inputs: ["items", "itemTemplate", "props"] }, { kind: "component", type: ActionHeaderComponent, selector: "val-action-header", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.carousel-card{border-radius:24px;box-shadow:0 4px 10px #0000001a;margin:10px;position:relative;overflow:hidden;.shapes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.7;pointer-events:none;.shape{position:absolute;border-radius:50%}}.carousel-card__content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HorizontalScrollComponent, selector: "val-horizontal-scroll", inputs: ["items", "itemTemplate", "props"] }, { kind: "component", type: ActionHeaderComponent, selector: "val-action-header", inputs: ["props"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardsCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-cards-carousel', standalone: true, imports: [CommonModule, RecapCardComponent, HorizontalScrollComponent, ActionHeaderComponent], template: `
+            args: [{ selector: 'val-cards-carousel', standalone: true, imports: [
+                        CommonModule,
+                        HorizontalScrollComponent,
+                        ActionHeaderComponent,
+                        IonCard,
+                        IonCardContent,
+                        LinkComponent,
+                        TitleBlockComponent,
+                    ], template: `
     @if (props.header) {
       <val-action-header [props]="props.header" />
     }
 
-    <val-horizontal-scroll [items]="props.cards" [itemTemplate]="recapCardTemplate" />
-    <ng-template #recapCardTemplate let-recap>
-      <val-recap-card [props]="recap" />
+    <val-horizontal-scroll [items]="props.cards" [itemTemplate]="cardTemplate" />
+    <ng-template #cardTemplate let-card>
+      <ion-card class="carousel-card" [color]="card.color || ''">
+        <div class="shapes">
+          <ng-container *ngFor="let shape of card.shapes">
+            <div class="shape" [ngStyle]="mergeShapeStyle(shape)"></div>
+          </ng-container>
+        </div>
+        <ion-card-content
+          class="carousel-card__content"
+          [style.min-height]="card.minHeight || '400px'"
+          [style.min-width]="card.width || '280px'"
+          [style.max-width]="card.width || '280px'"
+        >
+          <val-title-block [props]="card.title" />
+          <val-link [props]="card.link" />
+        </ion-card-content>
+      </ion-card>
     </ng-template>
-  `, styles: [":host{display:block}\n"] }]
+  `, styles: [":host{display:block}.carousel-card{border-radius:24px;box-shadow:0 4px 10px #0000001a;margin:10px;position:relative;overflow:hidden;.shapes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.7;pointer-events:none;.shape{position:absolute;border-radius:50%}}.carousel-card__content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:16px}}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }] } });
@@ -30829,13 +28936,16 @@ class AuthService {
             this.stateService.updateRefreshToken(response.refreshToken); // NUEVO: guardar refresh rotado
             this.storageService.saveAccessToken(response.accessToken, expiresAt);
             this.storageService.saveRefreshToken(response.refreshToken); // NUEVO: persistir refresh rotado
+            if (this.config.enableFirebaseIntegration && response.firebaseToken) {
+                this.signInWithFirebase(response.firebaseToken);
+            }
             this.startRefreshTimer();
             this.syncService.broadcast({
                 type: 'TOKEN_REFRESH',
                 payload: {
                     accessToken: response.accessToken,
                     refreshToken: response.refreshToken, // NUEVO: sincronizar entre tabs
-                    expiresAt
+                    expiresAt,
                 },
             });
         }), catchError$1(error => {
@@ -30977,9 +29087,7 @@ class AuthService {
      * ```
      */
     switchOrg(organizationId) {
-        return this.http
-            .post(`${this.baseUrl}/switch-org`, { organizationId })
-            .pipe(switchMap$1(response => {
+        return this.http.post(`${this.baseUrl}/switch-org`, { organizationId }).pipe(switchMap$1(response => {
             // Re-autenticar en Firebase con el nuevo token
             // Usar switchMap + from para esperar a que Firebase complete
             const firebaseAuth$ = response.firebaseToken
@@ -31350,7 +29458,7 @@ class AuthService {
             console.warn('[ValtechAuth] MessagingService not available');
             return { granted: false };
         }
-        if (!await this.messagingService.isSupported()) {
+        if (!(await this.messagingService.isSupported())) {
             console.warn('[ValtechAuth] Push notifications not supported');
             return { granted: false };
         }
@@ -31389,9 +29497,11 @@ class AuthService {
             const token = this.messagingService.currentToken;
             if (token) {
                 // Eliminar del backend
-                await firstValueFrom(this.http.request('DELETE', `${this.config.apiUrl}/v2/users/me/devices/by-token`, {
-                    body: { token }
-                }).pipe(catchError$1(() => of(null))));
+                await firstValueFrom(this.http
+                    .request('DELETE', `${this.config.apiUrl}/v2/users/me/devices/by-token`, {
+                    body: { token },
+                })
+                    .pipe(catchError$1(() => of(null))));
                 // Eliminar token de FCM
                 await this.messagingService.deleteToken();
                 console.log('[ValtechAuth] Notifications disabled');
@@ -31448,7 +29558,7 @@ class AuthService {
             let token = providedToken || this.messagingService?.currentToken;
             // Si no hay token, intentar obtenerlo del MessagingService
             if (!token && this.messagingService) {
-                if (!await this.messagingService.isSupported()) {
+                if (!(await this.messagingService.isSupported())) {
                     return { registered: false, error: 'FCM no soportado en este navegador' };
                 }
                 token = await this.messagingService.getToken();
@@ -31458,7 +29568,12 @@ class AuthService {
             }
             // Registrar en backend
             const { platform, browser, os } = this.detectPlatformInfo();
-            const response = await firstValueFrom(this.http.post(`${this.config.apiUrl}/v2/users/me/devices`, { token, platform, browser, os }));
+            const response = await firstValueFrom(this.http.post(`${this.config.apiUrl}/v2/users/me/devices`, {
+                token,
+                platform,
+                browser,
+                os,
+            }));
             console.log('[ValtechAuth] Device registered manually:', response.device.deviceId);
             return { registered: true, deviceId: response.device.deviceId, token };
         }
@@ -31466,7 +29581,7 @@ class AuthService {
             console.warn('[ValtechAuth] Manual device registration failed:', error);
             return {
                 registered: false,
-                error: error?.error?.message || error?.message || 'Error al registrar dispositivo'
+                error: error?.error?.message || error?.message || 'Error al registrar dispositivo',
             };
         }
     }
@@ -31481,7 +29596,7 @@ class AuthService {
         }
         try {
             // Verificar si FCM está soportado
-            if (!await this.messagingService.isSupported()) {
+            if (!(await this.messagingService.isSupported())) {
                 return false;
             }
             // Verificar si ya tiene permisos
@@ -31496,7 +29611,12 @@ class AuthService {
             }
             // Registrar en backend
             const { platform, browser, os } = this.detectPlatformInfo();
-            await firstValueFrom(this.http.post(`${this.config.apiUrl}/v2/users/me/devices`, { token, platform, browser, os }));
+            await firstValueFrom(this.http.post(`${this.config.apiUrl}/v2/users/me/devices`, {
+                token,
+                platform,
+                browser,
+                os,
+            }));
             console.log('[ValtechAuth] Device registered successfully');
             return true;
         }
@@ -31517,9 +29637,12 @@ class AuthService {
             const token = this.messagingService.currentToken;
             if (token) {
                 // Delete from backend (fire and forget)
-                this.http.request('DELETE', `${this.config.apiUrl}/v2/users/me/devices/by-token`, {
-                    body: { token }
-                }).pipe(catchError$1(() => of(null))).subscribe();
+                this.http
+                    .request('DELETE', `${this.config.apiUrl}/v2/users/me/devices/by-token`, {
+                    body: { token },
+                })
+                    .pipe(catchError$1(() => of(null)))
+                    .subscribe();
                 // Delete from FCM
                 await this.messagingService.deleteToken();
                 console.log('[ValtechAuth] Device unregistered');
@@ -34569,23 +32692,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-class LayoutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LayoutComponent, isStandalone: true, selector: "val-layout", ngImport: i0, template: `
-    <div class="layout-container">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.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"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-layout', standalone: true, imports: [], template: `
-    <div class="layout-container">
-      <ng-content></ng-content>
-    </div>
-  `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.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"] }]
-        }] });
-
 class SimpleComponent {
     constructor() {
         this.onClick = new EventEmitter();
@@ -34633,12 +32739,12 @@ class SimpleComponent {
       @if (props.withDivider) {
         <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
       }
-      <val-layout>
+      <div class="layout-container">
         <ng-content select="[inner-container]"></ng-content>
-      </val-layout>
+      </div>
     </ion-content>
     <ng-content select="[outter-container]"></ng-content>
-  `, isInline: true, styles: [".description-container{padding:0 16px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.description-container{padding:0 16px}.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"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleComponent, decorators: [{
             type: Component,
@@ -34649,7 +32755,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonTitle,
                         IonContent,
                         HeaderComponent,
-                        LayoutComponent,
                         DividerComponent,
                         LinkComponent,
                         ExpandableTextComponent,
@@ -34687,12 +32792,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       @if (props.withDivider) {
         <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
       }
-      <val-layout>
+      <div class="layout-container">
         <ng-content select="[inner-container]"></ng-content>
-      </val-layout>
+      </div>
     </ion-content>
     <ng-content select="[outter-container]"></ng-content>
-  `, styles: [".description-container{padding:0 16px}\n"] }]
+  `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.description-container{padding:0 16px}.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"] }]
         }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
@@ -43370,5 +41475,5 @@ function buildFooterLinks(links, t) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_SPACING, AVATAR_UPLOAD_DEFAULTS, AccordionComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AppConfigService, ArticleBuilder, ArticleComponent, AuthBackgroundComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContentLoaderComponent, ContentReactionComponent, ContentTransformer, CountdownComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_LEGEND_LABELS, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAYMENT_STATUS_COLORS, DEFAULT_PAYMENT_STATUS_LABELS, DEFAULT_PLATFORMS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_STATUS_COLORS, DEFAULT_STATUS_LABELS, DEFAULT_WINNER_LABELS, DataTableComponent, DateInputComponent, DateRangeInputComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FabComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FormSkeletonComponent, FunHeaderComponent, GlowCardComponent, GridSkeletonComponent, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LOGIN_DEFAULTS, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginComponent, MODAL_SIZES, MOTION, MaintenancePageComponent, MenuComponent, MessagingService, MetaService, ModalService, MultiSelectSearchComponent, NavigationService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PLATFORM_CONFIGS, PageContentComponent, PageTemplateComponent, PageWrapperComponent, PaginationComponent, PaginationService, ParticipantCardComponent, PasswordInputComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProfileSkeletonComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, RadioInputComponent, RaffleStatusCardComponent, RangeInputComponent, RatingComponent, RecapCardComponent, RefresherComponent, RightsFooterComponent, RotatingTextComponent, SKELETON_PRESETS, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, SessionService, ShareButtonsComponent, SimpleComponent, SkeletonComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketGridComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TranslatePipe, TypedCollection, UpdateBannerComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_DEFAULT_CONTENT, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_SOCIAL_LINKS, VERSION, WinnerDisplayComponent, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, blogPost, buildFooterLinks, buildPath, collections, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createTitleProps, docs, extractPathParams, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, goToTop, guestGuard, hasEmulators, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, news, permissionGuard, permissionGuardFromRoute, provideValtechAds, provideValtechAppConfig, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechPresets, provideValtechSkeleton, query, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_SPACING, AVATAR_UPLOAD_DEFAULTS, AccordionComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AppConfigService, ArticleBuilder, ArticleComponent, AuthBackgroundComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContentLoaderComponent, ContentReactionComponent, ContentTransformer, CountdownComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DataTableComponent, DateInputComponent, DateRangeInputComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FabComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FormSkeletonComponent, FunHeaderComponent, GlowCardComponent, GridSkeletonComponent, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LOGIN_DEFAULTS, LanguageSelectorComponent, LayeredCardComponent, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginComponent, MODAL_SIZES, MOTION, MaintenancePageComponent, MenuComponent, MessagingService, MetaService, ModalService, MultiSelectSearchComponent, NavigationService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PLATFORM_CONFIGS, PageContentComponent, PageTemplateComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProfileSkeletonComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RightsFooterComponent, RotatingTextComponent, SKELETON_PRESETS, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, SessionService, ShareButtonsComponent, SimpleComponent, SkeletonComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TranslatePipe, TypedCollection, UpdateBannerComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_DEFAULT_CONTENT, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_SOCIAL_LINKS, VERSION, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, blogPost, buildFooterLinks, buildPath, collections, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createTitleProps, docs, extractPathParams, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, goToTop, guestGuard, hasEmulators, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, news, permissionGuard, permissionGuardFromRoute, provideValtechAds, provideValtechAppConfig, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechPresets, provideValtechSkeleton, query, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map