tickera-angular-components 0.0.1-dev.93 → 0.0.1-dev.95

package/fesm2022/tickera-angular-components.mjs

@@ -5,6 +5,10 @@ import { provideTransloco, TranslocoModule, TranslocoService } from '@jsverse/tr
 import { from, throwError, BehaviorSubject, Subject, of, takeUntil as takeUntil$1 } from 'rxjs';
 import * as i1$1 from '@angular/common';
 import { DATE_PIPE_DEFAULT_OPTIONS, isPlatformBrowser, formatDate, CommonModule, DatePipe } from '@angular/common';
+import { provideTippyLoader, provideTippyConfig, popperVariation, tooltipVariation } from '@ngneat/helipopper/config';
+export * from '@ngneat/helipopper/config';
+import { TippyDirective } from '@ngneat/helipopper';
+export { TippyDirective } from '@ngneat/helipopper';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { catchError, distinctUntilChanged, debounceTime, switchMap, takeUntil, map } from 'rxjs/operators';
@@ -401,6 +405,14 @@ function provideTickeraComponents(config) {
             },
             loader: TickeraTranslocoLoader,
         }),
+        provideTippyLoader(() => import('tippy.js')),
+        provideTippyConfig({
+            defaultVariation: 'tooltip',
+            variations: {
+                tooltip: tooltipVariation,
+                popper: popperVariation,
+            },
+        }),
     ]);
 }
 
@@ -2539,13 +2551,18 @@ class PerformanceService {
     constructor(apiService) {
         this.apiService = apiService;
     }
-    fetchPerformances(showId, search) {
+    fetchPerformances({ showId, roomMapId, hallId, search, limit, }) {
         const queryParams = new URLSearchParams();
         if (showId)
             queryParams.append('show_id', showId.toString());
+        if (roomMapId)
+            queryParams.append('room_map_id', roomMapId.toString());
+        if (hallId)
+            queryParams.append('hall_id', hallId.toString());
         if (search)
             queryParams.append('search', search);
-        queryParams.append('limit', '100');
+        if (limit)
+            queryParams.append('search', limit.toString());
         const queryString = queryParams.toString();
         const apiRoute = `${PERFORMANCES_API_ROUTES.findAll}${queryString ? '?' + queryString : ''}`;
         return this.apiService.get(apiRoute);
@@ -2564,7 +2581,7 @@ class PerformanceService {
         return this.apiService.get(apiRoute);
     }
     loadPerformances({ showId, search } = {}) {
-        this.fetchPerformances(showId, search).subscribe({
+        this.fetchPerformances({ showId, search }).subscribe({
             next: ({ data }) => {
                 this.performancesSubject.next(data?.performances ?? []);
             },
@@ -3882,6 +3899,7 @@ class AppButtonComponent {
     size = 'md';
     loadingText = '';
     icon = '';
+    tooltip = '';
     handleClick() {
         this.clicked.emit();
     }
@@ -3897,11 +3915,11 @@ class AppButtonComponent {
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppButtonComponent, isStandalone: true, selector: "app-button", inputs: { disabled: "disabled", loading: "loading", type: "type", variant: "variant", text: "text", size: "size", loadingText: "loadingText", icon: "icon" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"loading || disabled\"\n  [class]=\"buttonClasses\"\n  (click)=\"handleClick()\"\n>\n  @if (icon && !loading) {\n    <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n  }\n\n  @if (loading) {\n    <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</button>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppButtonComponent, isStandalone: true, selector: "app-button", inputs: { disabled: "disabled", loading: "loading", type: "type", variant: "variant", text: "text", size: "size", loadingText: "loadingText", icon: "icon", tooltip: "tooltip" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"loading || disabled\"\n  [class]=\"buttonClasses\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n  (click)=\"handleClick()\"\n>\n  @if (icon && !loading) {\n    <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n  }\n\n  @if (loading) {\n    <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</button>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: "<button\n  [type]=\"type\"\n  [disabled]=\"loading || disabled\"\n  [class]=\"buttonClasses\"\n  (click)=\"handleClick()\"\n>\n  @if (icon && !loading) {\n    <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n  }\n\n  @if (loading) {\n    <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</button>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule, TippyDirective], template: "<button\n  [type]=\"type\"\n  [disabled]=\"loading || disabled\"\n  [class]=\"buttonClasses\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n  (click)=\"handleClick()\"\n>\n  @if (icon && !loading) {\n    <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n  }\n\n  @if (loading) {\n    <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</button>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { clicked: [{
                 type: Output
             }], disabled: [{
@@ -3920,6 +3938,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], tooltip: [{
+                type: Input
             }] } });
 
 class AppLinkButtonComponent {
@@ -3933,6 +3953,7 @@ class AppLinkButtonComponent {
     queryParams = {};
     size = 'md';
     variant = 'primary';
+    tooltip = '';
     get buttonClasses() {
         return [
             'btn',
@@ -3945,11 +3966,11 @@ class AppLinkButtonComponent {
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppLinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppLinkButtonComponent, isStandalone: true, selector: "app-link-button", inputs: { disabled: "disabled", loading: "loading", target: "target", text: "text", icon: "icon", loadingText: "loadingText", route: "route", queryParams: "queryParams", size: "size", variant: "variant" }, ngImport: i0, template: "<a\n  class=\"{{ buttonClasses }}\"\n  [routerLink]=\"!disabled ? route : null\"\n  [queryParams]=\"queryParams\"\n  [target]=\"target\"\n>\n  @if (icon) {\n    <i [class]=\"icon\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</a>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslocoModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppLinkButtonComponent, isStandalone: true, selector: "app-link-button", inputs: { disabled: "disabled", loading: "loading", target: "target", text: "text", icon: "icon", loadingText: "loadingText", route: "route", queryParams: "queryParams", size: "size", variant: "variant", tooltip: "tooltip" }, ngImport: i0, template: "<a\n  class=\"{{ buttonClasses }}\"\n  [routerLink]=\"!disabled ? route : null\"\n  [queryParams]=\"queryParams\"\n  [target]=\"target\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n>\n  @if (icon) {\n    <i [class]=\"icon\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</a>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppLinkButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-link-button', standalone: true, imports: [CommonModule, RouterLink, RouterModule, TranslocoModule], encapsulation: ViewEncapsulation.None, template: "<a\n  class=\"{{ buttonClasses }}\"\n  [routerLink]=\"!disabled ? route : null\"\n  [queryParams]=\"queryParams\"\n  [target]=\"target\"\n>\n  @if (icon) {\n    <i [class]=\"icon\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</a>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'app-link-button', standalone: true, imports: [CommonModule, RouterLink, RouterModule, TranslocoModule, TippyDirective], encapsulation: ViewEncapsulation.None, template: "<a\n  class=\"{{ buttonClasses }}\"\n  [routerLink]=\"!disabled ? route : null\"\n  [queryParams]=\"queryParams\"\n  [target]=\"target\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n>\n  @if (icon) {\n    <i [class]=\"icon\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</a>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;font-weight:500;outline:none}.btn:focus{box-shadow:0 0 0 2px #4f46e5}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], loading: [{
@@ -3970,6 +3991,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], variant: [{
                 type: Input
+            }], tooltip: [{
+                type: Input
             }] } });
 
 class AppAlertComponent {
@@ -4090,7 +4113,7 @@ class FeedbackModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FeedbackModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FeedbackModalComponent, isStandalone: true, selector: "feedback-modal", inputs: { isOpen: "isOpen", type: "type", title: "title", message: "message", showHeader: "showHeader", showCloseButton: "showCloseButton", showTitle: "showTitle", autoClose: "autoClose", autoCloseDuration: "autoCloseDuration", buttonText: "buttonText" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<app-modal\n  [showHeader]=\"showHeader\"\n  [showCloseButton]=\"showCloseButton\"\n  [showTitle]=\"showTitle\"\n  [isOpen]=\"isOpen\"\n  size=\"sm\"\n  (closeModal)=\"closeModal()\"\n>\n  <div class=\"feedback-modal-body\" [ngClass]=\"'feedback-modal-body--' + type\">\n    <div class=\"feedback-modal-icon-wrapper\">\n      @switch (type) {\n        @case ('loading') {\n          <div class=\"feedback-modal-spinner\"></div>\n        }\n        @case ('success') {\n          <i class=\"ri-check-line feedback-modal-icon feedback-modal-icon--success\"></i>\n        }\n        @case ('error') {\n          <i class=\"ri-error-warning-line feedback-modal-icon feedback-modal-icon--error\"></i>\n        }\n        @case ('warning') {\n          <i class=\"ri-alert-line feedback-modal-icon feedback-modal-icon--warning\"></i>\n        }\n        @case ('info') {\n          <i class=\"ri-info-i feedback-modal-icon feedback-modal-icon--info\"></i>\n        }\n      }\n    </div>\n\n    <h3 class=\"feedback-modal-title\">{{ title }}</h3>\n\n    @if (message) {\n      <p class=\"feedback-modal-message\">{{ message }}</p>\n    }\n\n    @if (resolvedButtonText && showCloseButton) {\n      <app-button [text]=\"resolvedButtonText\" [variant]=\"buttonVariant\" (clicked)=\"closeModal()\" />\n    }\n  </div>\n</app-modal>\n", styles: [".feedback-modal-body{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 0;text-align:center}.feedback-modal-icon-wrapper{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:9999px}.feedback-modal-body--loading .feedback-modal-icon-wrapper{width:auto;height:auto}.feedback-modal-body--success .feedback-modal-icon-wrapper{background-color:#f0fdf4}.feedback-modal-body--error .feedback-modal-icon-wrapper{background-color:#fef2f2}.feedback-modal-body--warning .feedback-modal-icon-wrapper{background-color:#fefce8}.feedback-modal-body--info .feedback-modal-icon-wrapper{background-color:#eff6ff}.feedback-modal-icon{font-size:2.5rem}.feedback-modal-icon--success{color:#22c55e}.feedback-modal-icon--error{color:#ef4444}.feedback-modal-icon--warning{color:#eab308}.feedback-modal-icon--info{color:#3b82f6}.feedback-modal-spinner{height:3rem;width:3rem;border-radius:9999px;border:6px solid #fecaca;border-top-color:#ef4444;animation:feedback-modal-spin .8s linear infinite}.feedback-modal-title{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0}.feedback-modal-message{font-size:.875rem;color:#6b7280;margin:0}@keyframes feedback-modal-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FeedbackModalComponent, isStandalone: true, selector: "feedback-modal", inputs: { isOpen: "isOpen", type: "type", title: "title", message: "message", showHeader: "showHeader", showCloseButton: "showCloseButton", showTitle: "showTitle", autoClose: "autoClose", autoCloseDuration: "autoCloseDuration", buttonText: "buttonText" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<app-modal\n  [showHeader]=\"showHeader\"\n  [showCloseButton]=\"showCloseButton\"\n  [showTitle]=\"showTitle\"\n  [isOpen]=\"isOpen\"\n  size=\"sm\"\n  (closeModal)=\"closeModal()\"\n>\n  <div class=\"feedback-modal-body\" [ngClass]=\"'feedback-modal-body--' + type\">\n    <div class=\"feedback-modal-icon-wrapper\">\n      @switch (type) {\n        @case ('loading') {\n          <div class=\"feedback-modal-spinner\"></div>\n        }\n        @case ('success') {\n          <i class=\"ri-check-line feedback-modal-icon feedback-modal-icon--success\"></i>\n        }\n        @case ('error') {\n          <i class=\"ri-error-warning-line feedback-modal-icon feedback-modal-icon--error\"></i>\n        }\n        @case ('warning') {\n          <i class=\"ri-alert-line feedback-modal-icon feedback-modal-icon--warning\"></i>\n        }\n        @case ('info') {\n          <i class=\"ri-info-i feedback-modal-icon feedback-modal-icon--info\"></i>\n        }\n      }\n    </div>\n\n    <h3 class=\"feedback-modal-title\">{{ title }}</h3>\n\n    @if (message) {\n      <p class=\"feedback-modal-message\">{{ message }}</p>\n    }\n\n    @if (resolvedButtonText && showCloseButton) {\n      <app-button [text]=\"resolvedButtonText\" [variant]=\"buttonVariant\" (clicked)=\"closeModal()\" />\n    }\n  </div>\n</app-modal>\n", styles: [".feedback-modal-body{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 0;text-align:center}.feedback-modal-icon-wrapper{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:9999px}.feedback-modal-body--loading .feedback-modal-icon-wrapper{width:auto;height:auto}.feedback-modal-body--success .feedback-modal-icon-wrapper{background-color:#f0fdf4}.feedback-modal-body--error .feedback-modal-icon-wrapper{background-color:#fef2f2}.feedback-modal-body--warning .feedback-modal-icon-wrapper{background-color:#fefce8}.feedback-modal-body--info .feedback-modal-icon-wrapper{background-color:#eff6ff}.feedback-modal-icon{font-size:2.5rem}.feedback-modal-icon--success{color:#22c55e}.feedback-modal-icon--error{color:#ef4444}.feedback-modal-icon--warning{color:#eab308}.feedback-modal-icon--info{color:#3b82f6}.feedback-modal-spinner{height:3rem;width:3rem;border-radius:9999px;border:6px solid #fecaca;border-top-color:#ef4444;animation:feedback-modal-spin .8s linear infinite}.feedback-modal-title{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0}.feedback-modal-message{font-size:.875rem;color:#6b7280;margin:0}@keyframes feedback-modal-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FeedbackModalComponent, decorators: [{
             type: Component,
@@ -4288,7 +4311,7 @@ class DeleteConfirmationComponent {
         this.deleteConfirmationService.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, deps: [{ token: i1$2.FormBuilder }, { token: DeleteConfirmationService }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DeleteConfirmationComponent, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "@if (isOpen()) {\n  <app-modal [title]=\"title\" [isOpen]=\"isOpen\" (closeModal)=\"onCloseModal()\">\n    <form\n      [formGroup]=\"deleteConfirmationForm\"\n      method=\"POST\"\n      class=\"delete-confirmation-content\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <app-alert\n        type=\"warning\"\n        [text]=\"'deleteConfirmation.warning' | transloco\"\n        size=\"sm\"\n        [closeable]=\"false\"\n      />\n\n      <p class=\"delete-confirmation-instructions\">\n        {{ 'deleteConfirmation.instructions' | transloco }}\n\n        <span class=\"delete-confirmation-highlight\">\n          {{ confirmationText }}\n        </span>\n      </p>\n\n      <form-input\n        name=\"confirmationText\"\n        type=\"text\"\n        class=\"delete-confirmation-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirmationText\"\n        [placeholder]=\"\n          transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n        \"\n      />\n\n      <div class=\"delete-confirmation-actions\">\n        <app-button\n          variant=\"tertiary\"\n          [text]=\"'deleteConfirmation.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'deleteConfirmation.delete' | transloco\"\n          [disabled]=\"!isConfirmationValid\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".delete-confirmation-content{display:flex;flex-direction:column;gap:1rem;animation:slideUp .3s ease-out}.delete-confirmation-instructions{font-size:.75rem;color:#4b5563;margin:0}@media(prefers-color-scheme:dark){.delete-confirmation-instructions{color:#9ca3af}}.delete-confirmation-highlight{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;margin-top:.25rem;background-color:#e5e7eb;color:#dc2626;font-weight:600;font-size:.875rem;border-radius:.375rem}@media(prefers-color-scheme:dark){.delete-confirmation-highlight{background-color:#374151}}.delete-confirmation-field{flex:1}.delete-confirmation-actions{display:flex;gap:.75rem}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "minlength", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DeleteConfirmationComponent, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "@if (isOpen()) {\n  <app-modal [title]=\"title\" [isOpen]=\"isOpen\" (closeModal)=\"onCloseModal()\">\n    <form\n      [formGroup]=\"deleteConfirmationForm\"\n      method=\"POST\"\n      class=\"delete-confirmation-content\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <app-alert\n        type=\"warning\"\n        [text]=\"'deleteConfirmation.warning' | transloco\"\n        size=\"sm\"\n        [closeable]=\"false\"\n      />\n\n      <p class=\"delete-confirmation-instructions\">\n        {{ 'deleteConfirmation.instructions' | transloco }}\n\n        <span class=\"delete-confirmation-highlight\">\n          {{ confirmationText }}\n        </span>\n      </p>\n\n      <form-input\n        name=\"confirmationText\"\n        type=\"text\"\n        class=\"delete-confirmation-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirmationText\"\n        [placeholder]=\"\n          transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n        \"\n      />\n\n      <div class=\"delete-confirmation-actions\">\n        <app-button\n          variant=\"tertiary\"\n          [text]=\"'deleteConfirmation.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'deleteConfirmation.delete' | transloco\"\n          [disabled]=\"!isConfirmationValid\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".delete-confirmation-content{display:flex;flex-direction:column;gap:1rem;animation:slideUp .3s ease-out}.delete-confirmation-instructions{font-size:.75rem;color:#4b5563;margin:0}@media(prefers-color-scheme:dark){.delete-confirmation-instructions{color:#9ca3af}}.delete-confirmation-highlight{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;margin-top:.25rem;background-color:#e5e7eb;color:#dc2626;font-weight:600;font-size:.875rem;border-radius:.375rem}@media(prefers-color-scheme:dark){.delete-confirmation-highlight{background-color:#374151}}.delete-confirmation-field{flex:1}.delete-confirmation-actions{display:flex;gap:.75rem}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "minlength", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, decorators: [{
             type: Component,
@@ -4504,7 +4527,7 @@ class ShowCardComponent {
         return new Date(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ShowCardComponent, isStandalone: true, selector: "show-card", inputs: { show: "show", linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "<div class=\"show-card\">\n  <div class=\"show-card__image\">\n    <show-type-badge [show]=\"show\" class=\"show-card__badge\" />\n\n    @if (show.images && show.images.length > 0) {\n      <img [src]=\"show.images[0].full_url\" class=\"show-card__image-img\" />\n    } @else {\n      <img\n        [src]=\"`https://placehold.co/400x400/1f2937/737373?text=${show.title}`\"\n        class=\"show-card__image-placeholder\"\n      />\n    }\n  </div>\n\n  <div class=\"show-card__info\">\n    <p class=\"show-card__title\">\n      {{ show.title }}\n    </p>\n\n    @if (show.next_performance) {\n      <div class=\"show-card__datetime\">\n        <span class=\"show-card__datetime-title\">\n          {{ 'show.next_performance' | transloco }}\n        </span>\n\n        <br />\n\n        <span class=\"show-card__date\">\n          {{ show.next_performance.start_time | date: `EEEE` | titlecase }}\n          {{ show.next_performance.start_time | date: `dd 'de' MMMM, hh:mm a` }}\n        </span>\n      </div>\n    }\n\n    @if (show.days_of_week && show.days_of_week.length > 0) {\n      <div class=\"show-card__days\">\n        @for (day of show.days_of_week; track $index) {\n          <app-badge\n            [text]=\"`common.daysOfWeekByNumber.${day}` | transloco\"\n            [bordered]=\"false\"\n            size=\"xs\"\n            backgroundColor=\"#525252\"\n            textColor=\"#e5e5e5\"\n          />\n        }\n      </div>\n    }\n\n    @if (show.unique_start_times && show.unique_start_times.length > 0) {\n      <div class=\"show-card__times\">\n        @for (time of show.unique_start_times; track $index) {\n          <app-badge\n            [text]=\"dateService.formatDate(formatTimeDate(time), 'hh:mm a')\"\n            [bordered]=\"false\"\n            size=\"xs\"\n            backgroundColor=\"#525252\"\n            textColor=\"#e5e5e5\"\n          />\n        }\n      </div>\n    }\n\n    <app-link-button\n      class=\"show-card__link\"\n      [route]=\"linkUrlFn ? linkUrlFn(show) : '#'\"\n      [queryParams]=\"linkQueryParams ?? {}\"\n      [text]=\"linkText\"\n      icon=\"ri-calendar-line\"\n      variant=\"primary\"\n      size=\"sm\"\n    />\n  </div>\n</div>\n", styles: [".show-card{align-items:center;background-color:#171717;border-radius:.5rem;display:flex;flex-direction:column;gap:0;justify-content:space-between;overflow:hidden;padding:0;position:relative;transition:all .2s ease-in-out;max-width:320px;width:100%}.show-card:hover{border-color:#525252}.show-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.show-card--selected:hover{border-color:#ef4444}.show-card__image{aspect-ratio:1/1;display:flex;border-radius:.125rem;overflow:hidden;position:relative;width:100%}.show-card__image-img{object-fit:cover;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.show-card__image-placeholder{display:flex;background-color:#1f2937;height:100%;width:100%}.show-card__badge{position:absolute;left:1rem;top:1rem}.show-card__info{display:flex;flex-direction:column;flex:1;gap:.5rem;padding:1.5rem;width:100%}.show-card__title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:130%;margin:0}.show-card__datetime{line-height:1}.show-card__datetime-title{color:#a3a3a3;font-size:.75rem;font-weight:700;width:100%}.show-card__date{color:#a3a3a3;font-size:.875rem}.show-card__days,.show-card__times{color:#a3a3a3;display:flex;flex-flow:row wrap;font-size:.875rem;gap:.25rem}.show-card__times{margin-bottom:.5rem}.show-card__link{margin-top:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppLinkButtonComponent, selector: "app-link-button", inputs: ["disabled", "loading", "target", "text", "icon", "loadingText", "route", "queryParams", "size", "variant"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: ShowTypeBadgeComponent, selector: "show-type-badge", inputs: ["show", "size"] }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ShowCardComponent, isStandalone: true, selector: "show-card", inputs: { show: "show", linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "<div class=\"show-card\">\n  <div class=\"show-card__image\">\n    <show-type-badge [show]=\"show\" class=\"show-card__badge\" />\n\n    @if (show.images && show.images.length > 0) {\n      <img [src]=\"show.images[0].full_url\" class=\"show-card__image-img\" />\n    } @else {\n      <img\n        [src]=\"`https://placehold.co/400x400/1f2937/737373?text=${show.title}`\"\n        class=\"show-card__image-placeholder\"\n      />\n    }\n  </div>\n\n  <div class=\"show-card__info\">\n    <p class=\"show-card__title\">\n      {{ show.title }}\n    </p>\n\n    @if (show.next_performance) {\n      <div class=\"show-card__datetime\">\n        <span class=\"show-card__datetime-title\">\n          {{ 'show.next_performance' | transloco }}\n        </span>\n\n        <br />\n\n        <span class=\"show-card__date\">\n          {{ show.next_performance.start_time | date: `EEEE` | titlecase }}\n          {{ show.next_performance.start_time | date: `dd 'de' MMMM, hh:mm a` }}\n        </span>\n      </div>\n    }\n\n    @if (show.days_of_week && show.days_of_week.length > 0) {\n      <div class=\"show-card__days\">\n        @for (day of show.days_of_week; track $index) {\n          <app-badge\n            [text]=\"`common.daysOfWeekByNumber.${day}` | transloco\"\n            [bordered]=\"false\"\n            size=\"xs\"\n            backgroundColor=\"#525252\"\n            textColor=\"#e5e5e5\"\n          />\n        }\n      </div>\n    }\n\n    @if (show.unique_start_times && show.unique_start_times.length > 0) {\n      <div class=\"show-card__times\">\n        @for (time of show.unique_start_times; track $index) {\n          <app-badge\n            [text]=\"dateService.formatDate(formatTimeDate(time), 'hh:mm a')\"\n            [bordered]=\"false\"\n            size=\"xs\"\n            backgroundColor=\"#525252\"\n            textColor=\"#e5e5e5\"\n          />\n        }\n      </div>\n    }\n\n    <app-link-button\n      class=\"show-card__link\"\n      [route]=\"linkUrlFn ? linkUrlFn(show) : '#'\"\n      [queryParams]=\"linkQueryParams ?? {}\"\n      [text]=\"linkText\"\n      icon=\"ri-calendar-line\"\n      variant=\"primary\"\n      size=\"sm\"\n    />\n  </div>\n</div>\n", styles: [".show-card{align-items:center;background-color:#171717;border-radius:.5rem;display:flex;flex-direction:column;gap:0;justify-content:space-between;overflow:hidden;padding:0;position:relative;transition:all .2s ease-in-out;max-width:320px;width:100%}.show-card:hover{border-color:#525252}.show-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.show-card--selected:hover{border-color:#ef4444}.show-card__image{aspect-ratio:1/1;display:flex;border-radius:.125rem;overflow:hidden;position:relative;width:100%}.show-card__image-img{object-fit:cover;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.show-card__image-placeholder{display:flex;background-color:#1f2937;height:100%;width:100%}.show-card__badge{position:absolute;left:1rem;top:1rem}.show-card__info{display:flex;flex-direction:column;flex:1;gap:.5rem;padding:1.5rem;width:100%}.show-card__title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:130%;margin:0}.show-card__datetime{line-height:1}.show-card__datetime-title{color:#a3a3a3;font-size:.75rem;font-weight:700;width:100%}.show-card__date{color:#a3a3a3;font-size:.875rem}.show-card__days,.show-card__times{color:#a3a3a3;display:flex;flex-flow:row wrap;font-size:.875rem;gap:.25rem}.show-card__times{margin-bottom:.5rem}.show-card__link{margin-top:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppLinkButtonComponent, selector: "app-link-button", inputs: ["disabled", "loading", "target", "text", "icon", "loadingText", "route", "queryParams", "size", "variant", "tooltip"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: ShowTypeBadgeComponent, selector: "show-type-badge", inputs: ["show", "size"] }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowCardComponent, decorators: [{
             type: Component,
@@ -5354,7 +5377,7 @@ class FileUploadPreviewComponent {
         return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileUploadPreviewComponent, isStandalone: true, selector: "file-upload-preview", inputs: { file: "file" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"file-preview-item\">\n  <div class=\"file-preview-content\">\n    <!-- File Preview/Icon -->\n    <div class=\"file-preview-icon-wrapper\">\n      @if (file.preview) {\n        <img [src]=\"file.preview\" [alt]=\"file.name\" class=\"file-preview-image\" />\n      } @else {\n        <div class=\"file-preview-icon-placeholder\">\n          <i [class]=\"getFileTypeIcon(file) + ' file-preview-icon'\"></i>\n        </div>\n      }\n    </div>\n\n    <!-- File Info -->\n    <div class=\"file-preview-info\">\n      <p class=\"file-preview-name\">\n        {{ file.name }}\n      </p>\n      <p class=\"file-preview-meta\">\n        @if (!!file.size) {\n          {{ formatFileSize(file.size) }}\n        }\n        @if (file.extension) {\n          \u2022 {{ file.extension.toUpperCase() }}\n        }\n      </p>\n    </div>\n  </div>\n\n  <!-- Actions -->\n  <div class=\"file-preview-actions\">\n    <app-button\n      icon=\"ri-delete-bin-line\"\n      (clicked)=\"removeFile()\"\n      variant=\"primary\"\n      size=\"xs\"\n      title=\"Eliminar archivo\"\n    />\n  </div>\n</div>\n", styles: [".file-preview-item{align-items:center;background-color:#f9fafb;border-radius:.5rem;border:1px solid #e5e7eb;box-sizing:border-box;display:flex;justify-content:space-between;padding:.75rem;width:100%;transition:all .2s ease-in-out}.file-preview-item:hover{background-color:#f3f4f6;border-color:#d1d5db}@media(prefers-color-scheme:dark){.file-preview-item{background-color:#1f2937;border-color:#374151}.file-preview-item:hover{background-color:#111827;border-color:#4b5563}}.file-preview-content{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.file-preview-icon-wrapper{flex-shrink:0}.file-preview-image{width:2.5rem;height:2.5rem;object-fit:cover;border-radius:.375rem}.file-preview-icon-placeholder{width:2.5rem;height:2.5rem;background-color:#e5e7eb;border-radius:.375rem;display:flex;align-items:center;justify-content:center}@media(prefers-color-scheme:dark){.file-preview-icon-placeholder{background-color:#374151}}.file-preview-icon{color:#4b5563;font-size:1.125rem}@media(prefers-color-scheme:dark){.file-preview-icon{color:#9ca3af}}.file-preview-info{flex:1;min-width:0}.file-preview-name{color:#111827;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:500;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-color-scheme:dark){.file-preview-name{color:#f3f4f6}}.file-preview-meta{color:#6b7280;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin:0}@media(prefers-color-scheme:dark){.file-preview-meta{color:#9ca3af}}.file-preview-actions{display:flex;align-items:center;gap:.5rem;margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileUploadPreviewComponent, isStandalone: true, selector: "file-upload-preview", inputs: { file: "file" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"file-preview-item\">\n  <div class=\"file-preview-content\">\n    <!-- File Preview/Icon -->\n    <div class=\"file-preview-icon-wrapper\">\n      @if (file.preview) {\n        <img [src]=\"file.preview\" [alt]=\"file.name\" class=\"file-preview-image\" />\n      } @else {\n        <div class=\"file-preview-icon-placeholder\">\n          <i [class]=\"getFileTypeIcon(file) + ' file-preview-icon'\"></i>\n        </div>\n      }\n    </div>\n\n    <!-- File Info -->\n    <div class=\"file-preview-info\">\n      <p class=\"file-preview-name\">\n        {{ file.name }}\n      </p>\n      <p class=\"file-preview-meta\">\n        @if (!!file.size) {\n          {{ formatFileSize(file.size) }}\n        }\n        @if (file.extension) {\n          \u2022 {{ file.extension.toUpperCase() }}\n        }\n      </p>\n    </div>\n  </div>\n\n  <!-- Actions -->\n  <div class=\"file-preview-actions\">\n    <app-button\n      icon=\"ri-delete-bin-line\"\n      (clicked)=\"removeFile()\"\n      variant=\"primary\"\n      size=\"xs\"\n      title=\"Eliminar archivo\"\n    />\n  </div>\n</div>\n", styles: [".file-preview-item{align-items:center;background-color:#f9fafb;border-radius:.5rem;border:1px solid #e5e7eb;box-sizing:border-box;display:flex;justify-content:space-between;padding:.75rem;width:100%;transition:all .2s ease-in-out}.file-preview-item:hover{background-color:#f3f4f6;border-color:#d1d5db}@media(prefers-color-scheme:dark){.file-preview-item{background-color:#1f2937;border-color:#374151}.file-preview-item:hover{background-color:#111827;border-color:#4b5563}}.file-preview-content{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.file-preview-icon-wrapper{flex-shrink:0}.file-preview-image{width:2.5rem;height:2.5rem;object-fit:cover;border-radius:.375rem}.file-preview-icon-placeholder{width:2.5rem;height:2.5rem;background-color:#e5e7eb;border-radius:.375rem;display:flex;align-items:center;justify-content:center}@media(prefers-color-scheme:dark){.file-preview-icon-placeholder{background-color:#374151}}.file-preview-icon{color:#4b5563;font-size:1.125rem}@media(prefers-color-scheme:dark){.file-preview-icon{color:#9ca3af}}.file-preview-info{flex:1;min-width:0}.file-preview-name{color:#111827;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:500;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-color-scheme:dark){.file-preview-name{color:#f3f4f6}}.file-preview-meta{color:#6b7280;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin:0}@media(prefers-color-scheme:dark){.file-preview-meta{color:#9ca3af}}.file-preview-actions{display:flex;align-items:center;gap:.5rem;margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadPreviewComponent, decorators: [{
             type: Component,
@@ -5888,7 +5911,7 @@ class ChangePasswordFormComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChangePasswordFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: ChangePasswordFormService }, { token: CustomerService }, { token: AdminService }, { token: ToastService }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChangePasswordFormComponent, isStandalone: true, selector: "change-password-form", providers: [AdminService, CustomerService], ngImport: i0, template: "@if (isOpen()) {\n  <app-modal\n    [title]=\"'changePassword.title' | transloco\"\n    [isOpen]=\"isOpen\"\n    (closeModal)=\"onCloseModal()\"\n  >\n    <form\n      [formGroup]=\"changePasswordForm\"\n      method=\"POST\"\n      class=\"change-password-form-body\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <form-input\n        [label]=\"'changePassword.newPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.newPasswordPlaceholder' | transloco\"\n        name=\"password\"\n        type=\"password\"\n        class=\"change-password-form-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"password\"\n      />\n\n      <form-input\n        [label]=\"'changePassword.confirmPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.confirmPasswordPlaceholder' | transloco\"\n        name=\"confirm_password\"\n        type=\"password\"\n        class=\"change-password-form-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirm_password\"\n      />\n\n      <div class=\"change-password-form-actions\">\n        <app-button\n          variant=\"tertiary\"\n          [text]=\"'changePassword.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          [disabled]=\"loading() || changePasswordForm.invalid || changePasswordForm.pristine\"\n          [loading]=\"loading()\"\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'changePassword.save' | transloco\"\n          [loadingText]=\"'changePassword.saving' | transloco\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".change-password-form-body{display:flex;flex-direction:column;gap:1rem}.change-password-form-field{flex:1}.change-password-form-actions{display:flex;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "minlength", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChangePasswordFormComponent, isStandalone: true, selector: "change-password-form", providers: [AdminService, CustomerService], ngImport: i0, template: "@if (isOpen()) {\n  <app-modal\n    [title]=\"'changePassword.title' | transloco\"\n    [isOpen]=\"isOpen\"\n    (closeModal)=\"onCloseModal()\"\n  >\n    <form\n      [formGroup]=\"changePasswordForm\"\n      method=\"POST\"\n      class=\"change-password-form-body\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <form-input\n        [label]=\"'changePassword.newPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.newPasswordPlaceholder' | transloco\"\n        name=\"password\"\n        type=\"password\"\n        class=\"change-password-form-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"password\"\n      />\n\n      <form-input\n        [label]=\"'changePassword.confirmPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.confirmPasswordPlaceholder' | transloco\"\n        name=\"confirm_password\"\n        type=\"password\"\n        class=\"change-password-form-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirm_password\"\n      />\n\n      <div class=\"change-password-form-actions\">\n        <app-button\n          variant=\"tertiary\"\n          [text]=\"'changePassword.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          [disabled]=\"loading() || changePasswordForm.invalid || changePasswordForm.pristine\"\n          [loading]=\"loading()\"\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'changePassword.save' | transloco\"\n          [loadingText]=\"'changePassword.saving' | transloco\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".change-password-form-body{display:flex;flex-direction:column;gap:1rem}.change-password-form-field{flex:1}.change-password-form-actions{display:flex;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "minlength", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChangePasswordFormComponent, decorators: [{
             type: Component,
@@ -7500,7 +7523,7 @@ class PerformanceCardComponent {
         return this.listEventService.selectedPerformance()?.id === this.card.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceCardComponent, deps: [{ token: PerformancesListEventsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PerformanceCardComponent, isStandalone: true, selector: "performance-card", inputs: { card: "card", linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "<div class=\"performance-card\" [class.performance-card--selected]=\"isSelected()\">\n  <div class=\"performance-card-image\">\n    @if (card.show.images && card.show.images.length > 0) {\n      <img [src]=\"card.show.images[0].full_url\" class=\"performance-card-image-img\" />\n    } @else {\n      <img\n        [src]=\"`https://placehold.co/400x400/1f2937/737373?text=${card.show.title}`\"\n        class=\"performance-card-image-placeholder\"\n      />\n    }\n  </div>\n\n  <div class=\"performance-card-info\">\n    <div class=\"performance-card-title\">\n      {{ card.show.title }}\n    </div>\n\n    <div class=\"performance-card-datetime\">\n      <span class=\"performance-card-date\">\n        {{ card.start_time | date: `EEEE` | titlecase }}\n        {{ card.start_time | date: `dd 'de' MMMM,` }}\n      </span>\n\n      <span class=\"performance-card-time\">\n        {{ card.start_time | date: `hh:mm` }}\n      </span>\n\n      <span class=\"performance-card-meridiem\">\n        {{ card.start_time | date: 'a' }}\n      </span>\n    </div>\n\n    <ul class=\"performance-card-location\">\n      @if (card.hall) {\n        <li class=\"performance-card-location__item\">\n          <i class=\"ri-armchair-line\"></i>\n          <strong>Sala:</strong>\n          <span>{{ card.hall.name }}</span>\n        </li>\n      }\n\n      @if (card.venue) {\n        <li class=\"performance-card-location__item\">\n          <i class=\"ri-building-4-line\"></i>\n          <strong>Teatro:</strong>\n          <span>{{ card.venue.name }}</span>\n        </li>\n      }\n    </ul>\n  </div>\n\n  <div class=\"performance-card-actions\">\n    <app-badge\n      [text]=\"`${card.available_tickets_count} entrada(s) disponible(s)`\"\n      size=\"xs\"\n      [color]=\"badgeColor\"\n    />\n\n    <div class=\"performance-card-price\">\n      Desde\n\n      <span class=\"performance-card-price-value\">\n        ${{ card.zone_price_cheapest | number: '1.0-2' }}\n      </span>\n    </div>\n\n    <app-link-button\n      [style.width]=\"'100%'\"\n      [route]=\"linkUrlFn ? linkUrlFn(card) : '#'\"\n      [queryParams]=\"linkQueryParams ?? {}\"\n      [text]=\"linkText\"\n      icon=\"ri-coupon-line\"\n      variant=\"primary\"\n      size=\"xs\"\n    />\n  </div>\n</div>\n", styles: [".performance-card{align-items:center;background-color:#171717;border-radius:.5rem;border:1px solid #404040;display:flex;flex-direction:column;gap:1rem;justify-content:space-between;padding:1rem 1.25rem;transition:all .2s ease-in-out}@media(min-width:640px){.performance-card{flex-direction:row}}.performance-card:hover{border-color:#525252}.performance-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.performance-card--selected:hover{border-color:#ef4444}.performance-card-image{display:flex;border-radius:.125rem;overflow:hidden;height:auto;min-height:6rem;width:100%}@media(min-width:640px){.performance-card-image{height:6rem;width:6rem}}.performance-card-image-img{object-fit:contain;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.performance-card-image-placeholder{display:flex;background-color:#e5e7eb;height:6rem;width:100%}.performance-card-info{display:flex;flex-direction:column;flex:1;gap:.5rem;width:100%}.performance-card-title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:1}.performance-card--selected .performance-card-title{color:#f3f4f6}.performance-card-datetime{line-height:1}.performance-card-date{font-size:.875rem;color:#9ca3af}.performance-card-time{font-weight:800;font-size:1.125rem;color:#e5e7eb}.performance-card-meridiem{font-weight:800;font-size:.875rem;color:#fff}.performance-card--selected .performance-card-meridiem{color:#ef4444}.performance-card-price{font-size:1rem;color:#9ca3af;line-height:1}.performance-card-price-value{color:#d1d5db;font-weight:600}.performance-card-location{align-items:flex-start;display:flex;flex-flow:row wrap;gap:1rem;list-style:none;margin:0;padding:0;width:100%}.performance-card-location__item{color:#a3a3a3;align-self:center;display:flex;flex-flow:row nowrap;font-size:.75rem;justify-content:flex-start;gap:.25rem}.performance-card-actions{align-items:center;display:flex;flex-direction:column;gap:.5rem;width:100%}@media(min-width:640px){.performance-card-actions{max-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppLinkButtonComponent, selector: "app-link-button", inputs: ["disabled", "loading", "target", "text", "icon", "loadingText", "route", "queryParams", "size", "variant"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PerformanceCardComponent, isStandalone: true, selector: "performance-card", inputs: { card: "card", linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "<div class=\"performance-card\" [class.performance-card--selected]=\"isSelected()\">\n  <div class=\"performance-card-image\">\n    @if (card.show.images && card.show.images.length > 0) {\n      <img [src]=\"card.show.images[0].full_url\" class=\"performance-card-image-img\" />\n    } @else {\n      <img\n        [src]=\"`https://placehold.co/400x400/1f2937/737373?text=${card.show.title}`\"\n        class=\"performance-card-image-placeholder\"\n      />\n    }\n  </div>\n\n  <div class=\"performance-card-info\">\n    <div class=\"performance-card-title\">\n      {{ card.show.title }}\n    </div>\n\n    <div class=\"performance-card-datetime\">\n      <span class=\"performance-card-date\">\n        {{ card.start_time | date: `EEEE` | titlecase }}\n        {{ card.start_time | date: `dd 'de' MMMM,` }}\n      </span>\n\n      <span class=\"performance-card-time\">\n        {{ card.start_time | date: `hh:mm` }}\n      </span>\n\n      <span class=\"performance-card-meridiem\">\n        {{ card.start_time | date: 'a' }}\n      </span>\n    </div>\n\n    <ul class=\"performance-card-location\">\n      @if (card.hall) {\n        <li class=\"performance-card-location__item\">\n          <i class=\"ri-armchair-line\"></i>\n          <strong>Sala:</strong>\n          <span>{{ card.hall.name }}</span>\n        </li>\n      }\n\n      @if (card.venue) {\n        <li class=\"performance-card-location__item\">\n          <i class=\"ri-building-4-line\"></i>\n          <strong>Teatro:</strong>\n          <span>{{ card.venue.name }}</span>\n        </li>\n      }\n    </ul>\n  </div>\n\n  <div class=\"performance-card-actions\">\n    <app-badge\n      [text]=\"`${card.available_tickets_count} entrada(s) disponible(s)`\"\n      size=\"xs\"\n      [color]=\"badgeColor\"\n    />\n\n    <div class=\"performance-card-price\">\n      Desde\n\n      <span class=\"performance-card-price-value\">\n        ${{ card.zone_price_cheapest | number: '1.0-2' }}\n      </span>\n    </div>\n\n    <app-link-button\n      [style.width]=\"'100%'\"\n      [route]=\"linkUrlFn ? linkUrlFn(card) : '#'\"\n      [queryParams]=\"linkQueryParams ?? {}\"\n      [text]=\"linkText\"\n      icon=\"ri-coupon-line\"\n      variant=\"primary\"\n      size=\"xs\"\n    />\n  </div>\n</div>\n", styles: [".performance-card{align-items:center;background-color:#171717;border-radius:.5rem;border:1px solid #404040;display:flex;flex-direction:column;gap:1rem;justify-content:space-between;padding:1rem 1.25rem;transition:all .2s ease-in-out}@media(min-width:640px){.performance-card{flex-direction:row}}.performance-card:hover{border-color:#525252}.performance-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.performance-card--selected:hover{border-color:#ef4444}.performance-card-image{display:flex;border-radius:.125rem;overflow:hidden;height:auto;min-height:6rem;width:100%}@media(min-width:640px){.performance-card-image{height:6rem;width:6rem}}.performance-card-image-img{object-fit:contain;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.performance-card-image-placeholder{display:flex;background-color:#e5e7eb;height:6rem;width:100%}.performance-card-info{display:flex;flex-direction:column;flex:1;gap:.5rem;width:100%}.performance-card-title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:1}.performance-card--selected .performance-card-title{color:#f3f4f6}.performance-card-datetime{line-height:1}.performance-card-date{font-size:.875rem;color:#9ca3af}.performance-card-time{font-weight:800;font-size:1.125rem;color:#e5e7eb}.performance-card-meridiem{font-weight:800;font-size:.875rem;color:#fff}.performance-card--selected .performance-card-meridiem{color:#ef4444}.performance-card-price{font-size:1rem;color:#9ca3af;line-height:1}.performance-card-price-value{color:#d1d5db;font-weight:600}.performance-card-location{align-items:flex-start;display:flex;flex-flow:row wrap;gap:1rem;list-style:none;margin:0;padding:0;width:100%}.performance-card-location__item{color:#a3a3a3;align-self:center;display:flex;flex-flow:row nowrap;font-size:.75rem;justify-content:flex-start;gap:.25rem}.performance-card-actions{align-items:center;display:flex;flex-direction:column;gap:.5rem;width:100%}@media(min-width:640px){.performance-card-actions{max-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppLinkButtonComponent, selector: "app-link-button", inputs: ["disabled", "loading", "target", "text", "icon", "loadingText", "route", "queryParams", "size", "variant", "tooltip"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceCardComponent, decorators: [{
             type: Component,
@@ -7667,7 +7690,7 @@ class ShowsFilterComponent {
         this.listEventService.setSelectedPerformance(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowsFilterComponent, deps: [{ token: PLATFORM_ID }, { token: ShowService }, { token: PerformancesListEventsService }, { token: ToastService }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ShowsFilterComponent, isStandalone: true, selector: "shows-filter", ngImport: i0, template: "<div class=\"shows-filter\">\n  <p class=\"shows-filter-heading\">Filtrar por evento</p>\n\n  @if (loadingData()) {\n    @for (i of [1, 2, 3]; track $index) {\n      <div class=\"shows-filter-skeleton\"></div>\n    }\n  }\n\n  @if (!loadingData() && shows().length < 1) {\n    <app-alert text=\"No hay shows disponibles para filtrar\" size=\"xs\" type=\"error\" />\n  }\n\n  @for (show of shows(); track $index) {\n    <div class=\"shows-filter-item\" [class.shows-filter-item--active]=\"isActive(show.id)\">\n      <div class=\"shows-filter-item-info\">\n        <span class=\"shows-filter-item-image\">\n          @if (show.images.length > 0) {\n            <img [src]=\"show.images[0].full_url\" class=\"shows-filter-item-image-img\" />\n          } @else {\n            <span class=\"shows-filter-item-image-placeholder\"></span>\n          }\n        </span>\n\n        <div>\n          <div class=\"shows-filter-item-title\">{{ show.title }}</div>\n          @if (show.performances_quantity && show.performances_quantity > 0) {\n            <div class=\"shows-filter-item-count\">{{ show.performances_quantity }} funciones</div>\n          }\n        </div>\n      </div>\n\n      <div class=\"shows-filter-item-actions\">\n        @if (isActive(show.id)) {\n          <app-button\n            variant=\"tertiary\"\n            icon=\"ri-close-line\"\n            size=\"xs\"\n            (clicked)=\"onFilter(show)\"\n          />\n        } @else {\n          <app-button variant=\"primary\" text=\"Filtrar\" size=\"xs\" (clicked)=\"onFilter(show)\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".shows-filter{display:flex;flex-direction:column;gap:.5rem;width:100%}.shows-filter-heading{font-size:11px;font-weight:600;letter-spacing:.25em;color:#737373;text-transform:uppercase}.shows-filter-skeleton{height:3.75rem;width:100%;border-radius:.5rem;border:1px solid #171717;background-color:#404040;animation:shows-filter-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.shows-filter-item{display:flex;align-items:center;background-color:#171717;border-radius:.5rem;border:1px solid #404040;justify-content:space-between;padding:.75rem;width:100%}.shows-filter-item--active{box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.shows-filter-item-info{display:flex;align-items:center;gap:.75rem}.shows-filter-item-image{height:2.5rem;width:2.5rem;border-radius:.125rem;overflow:hidden}.shows-filter-item-image-img{object-fit:contain;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.shows-filter-item-image-placeholder{display:flex;background-color:#e5e5e5;height:100%;width:100%}.shows-filter-item-title{font-size:.875rem;font-weight:600;color:#d4d4d4}.shows-filter-item-count{font-size:11px;color:#737373}.shows-filter-item-actions{font-size:.875rem;font-weight:700;color:#737373}\n"], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ShowsFilterComponent, isStandalone: true, selector: "shows-filter", ngImport: i0, template: "<div class=\"shows-filter\">\n  <p class=\"shows-filter-heading\">Filtrar por evento</p>\n\n  @if (loadingData()) {\n    @for (i of [1, 2, 3]; track $index) {\n      <div class=\"shows-filter-skeleton\"></div>\n    }\n  }\n\n  @if (!loadingData() && shows().length < 1) {\n    <app-alert text=\"No hay shows disponibles para filtrar\" size=\"xs\" type=\"error\" />\n  }\n\n  @for (show of shows(); track $index) {\n    <div class=\"shows-filter-item\" [class.shows-filter-item--active]=\"isActive(show.id)\">\n      <div class=\"shows-filter-item-info\">\n        <span class=\"shows-filter-item-image\">\n          @if (show.images.length > 0) {\n            <img [src]=\"show.images[0].full_url\" class=\"shows-filter-item-image-img\" />\n          } @else {\n            <span class=\"shows-filter-item-image-placeholder\"></span>\n          }\n        </span>\n\n        <div>\n          <div class=\"shows-filter-item-title\">{{ show.title }}</div>\n          @if (show.performances_quantity && show.performances_quantity > 0) {\n            <div class=\"shows-filter-item-count\">{{ show.performances_quantity }} funciones</div>\n          }\n        </div>\n      </div>\n\n      <div class=\"shows-filter-item-actions\">\n        @if (isActive(show.id)) {\n          <app-button\n            variant=\"tertiary\"\n            icon=\"ri-close-line\"\n            size=\"xs\"\n            (clicked)=\"onFilter(show)\"\n          />\n        } @else {\n          <app-button variant=\"primary\" text=\"Filtrar\" size=\"xs\" (clicked)=\"onFilter(show)\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".shows-filter{display:flex;flex-direction:column;gap:.5rem;width:100%}.shows-filter-heading{font-size:11px;font-weight:600;letter-spacing:.25em;color:#737373;text-transform:uppercase}.shows-filter-skeleton{height:3.75rem;width:100%;border-radius:.5rem;border:1px solid #171717;background-color:#404040;animation:shows-filter-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.shows-filter-item{display:flex;align-items:center;background-color:#171717;border-radius:.5rem;border:1px solid #404040;justify-content:space-between;padding:.75rem;width:100%}.shows-filter-item--active{box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.shows-filter-item-info{display:flex;align-items:center;gap:.75rem}.shows-filter-item-image{height:2.5rem;width:2.5rem;border-radius:.125rem;overflow:hidden}.shows-filter-item-image-img{object-fit:contain;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.shows-filter-item-image-placeholder{display:flex;background-color:#e5e5e5;height:100%;width:100%}.shows-filter-item-title{font-size:.875rem;font-weight:600;color:#d4d4d4}.shows-filter-item-count{font-size:11px;color:#737373}.shows-filter-item-actions{font-size:.875rem;font-weight:700;color:#737373}\n"], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowsFilterComponent, decorators: [{
             type: Component,
@@ -8083,7 +8106,7 @@ class TicketMapTotalsComponent {
         return this.selectionService.selectedTicketIdList();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TicketMapTotalsComponent, deps: [{ token: PerformanceBookingDataService }, { token: TicketSelectionDetailsService }, { token: TicketSelectionDiscountService }, { token: TicketSelectionTotalsService }, { token: TicketSelectionService }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TicketMapTotalsComponent, isStandalone: true, selector: "ticket-map-totals", inputs: { title: "title", buttonText: "buttonText", loadingButtonText: "loadingButtonText", isLoading: "isLoading" }, outputs: { onPurchaseClick: "onPurchaseClick" }, ngImport: i0, template: "<ticket-map-widget class=\"w-full\">\n  <ticket-map-widget-header [title]=\"title\" />\n\n  <div class=\"ticket-map-totals\">\n    <p class=\"ticket-map-totals__item\">\n      <span>Entradas ({{ selectionService.selectedCount() | number: '1.0-2' }}):</span>\n      <span> ${{ selectionTotalsService.ticketSubtotal() | number: '1.0-2' }} </span>\n    </p>\n\n    @if (selectionService.selectedProductCount() > 0) {\n      <p class=\"ticket-map-totals__item\">\n        <span>Productos ({{ selectionService.selectedProductCount() | number: '1.0-2' }}):</span>\n        <span>${{ selectionTotalsService.productSubtotal() | number: '1.0-2' }}</span>\n      </p>\n    }\n\n    @if (serviceFee > 0) {\n      <p class=\"ticket-map-totals__item\">\n        <span>Tarifa de servicio:</span>\n        <span>${{ bookingDataService.show()?.service_fee ?? '0' | number: '1.0-2' }}</span>\n      </p>\n    }\n\n    @if (!!selectionDiscountService.coupon()) {\n      <p class=\"ticket-map-totals__item\">\n        <span>Cup\u00F3n de descuento:</span>\n        <span class=\"line-through\">\n          ${{ selectionDiscountService.coupon()?.discount_value ?? '0' | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    @if (!!selectionDiscountService.corporateBond()) {\n      <p class=\"ticket-map-totals__item\">\n        <span>Bono corporativo:</span>\n        <span class=\"line-through\">\n          ${{ selectionDiscountService.corporateBond()?.value ?? '0' | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    @if (!!selectionDiscountService.giftBond()) {\n      <p class=\"ticket-map-totals__item\">\n        <span>Bono de regalo:</span>\n        <span class=\"line-through\">\n          ${{ selectionDiscountService.giftBond()?.original_value ?? '0' | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    <hr class=\"ticket-map-totals__divider\" />\n\n    <div class=\"ticket-map-totals__calculated\">\n      <span class=\"ticket-map-totals__calculated-title\">Total:</span>\n\n      @if (\n        selectionTotalsService.totalDiscounted() || selectionTotalsService.totalDiscounted() === 0\n      ) {\n        <span class=\"ticket-map-totals__calculated-inline\">\n          <span class=\"ticket-map-totals__calculated-discount\">\n            ${{ selectionTotalsService.totalValue() | currency: 'COP' : 'symbol' : '1.0-2' }}\n          </span>\n          <span class=\"ticket-map-totals__calculated-total\">\n            ${{ selectionTotalsService.totalDiscounted() | currency: 'COP' : 'symbol' : '1.0-2' }}\n          </span>\n        </span>\n      } @else {\n        <span class=\"ticket-map-totals__calculated-total\">\n          ${{ selectionTotalsService.totalValue() | number: '1.0-2' }}\n        </span>\n      }\n    </div>\n\n    @if (selectionService.selectedCount() > 0 || selectionService.selectedProductCount() > 0) {\n      <div class=\"flex flex-col gap-2\">\n        <app-button\n          (click)=\"onPurchaseClick.emit()\"\n          size=\"sm\"\n          icon=\"ri-dashboard-3-line\"\n          [text]=\"buttonText\"\n          [loadingText]=\"loadingButtonText\"\n          [loading]=\"isLoading\"\n          variant=\"primary\"\n        />\n      </div>\n    }\n  </div>\n</ticket-map-widget>\n", styles: [".ticket-map-totals{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;width:100%}.ticket-map-totals__item{align-items:center;color:#9ca3af;display:flex;flex-direction:row;font-size:.75rem;justify-content:space-between;margin:0}.ticket-map-totals__divider{border:none;border-top:1px solid #e5e7eb;width:100%}.ticket-map-totals__calculated{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin:0}.ticket-map-totals__calculated-title{color:#4b5563;font-size:1rem;font-weight:700}.ticket-map-totals__calculated-inline{display:flex;flex-direction:column;align-items:flex-end}.ticket-map-totals__calculated-discount{color:#9ca3af;font-size:.75rem;text-decoration:line-through}.ticket-map-totals__calculated-total{color:#4b5563;font-size:1rem;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "component", type: TicketMapWidgetHeaderComponent, selector: "ticket-map-widget-header", inputs: ["title"] }, { kind: "component", type: TicketMapWidgetComponent, selector: "ticket-map-widget" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TicketMapTotalsComponent, isStandalone: true, selector: "ticket-map-totals", inputs: { title: "title", buttonText: "buttonText", loadingButtonText: "loadingButtonText", isLoading: "isLoading" }, outputs: { onPurchaseClick: "onPurchaseClick" }, ngImport: i0, template: "<ticket-map-widget class=\"w-full\">\n  <ticket-map-widget-header [title]=\"title\" />\n\n  <div class=\"ticket-map-totals\">\n    <p class=\"ticket-map-totals__item\">\n      <span>Entradas ({{ selectionService.selectedCount() | number: '1.0-2' }}):</span>\n      <span> ${{ selectionTotalsService.ticketSubtotal() | number: '1.0-2' }} </span>\n    </p>\n\n    @if (selectionService.selectedProductCount() > 0) {\n      <p class=\"ticket-map-totals__item\">\n        <span>Productos ({{ selectionService.selectedProductCount() | number: '1.0-2' }}):</span>\n        <span>${{ selectionTotalsService.productSubtotal() | number: '1.0-2' }}</span>\n      </p>\n    }\n\n    @if (serviceFee > 0) {\n      <p class=\"ticket-map-totals__item\">\n        <span>Tarifa de servicio:</span>\n        <span>${{ bookingDataService.show()?.service_fee ?? '0' | number: '1.0-2' }}</span>\n      </p>\n    }\n\n    @if (!!selectionDiscountService.coupon()) {\n      <p class=\"ticket-map-totals__item\">\n        <span>Cup\u00F3n de descuento:</span>\n        <span class=\"line-through\">\n          ${{ selectionDiscountService.coupon()?.discount_value ?? '0' | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    @if (!!selectionDiscountService.corporateBond()) {\n      <p class=\"ticket-map-totals__item\">\n        <span>Bono corporativo:</span>\n        <span class=\"line-through\">\n          ${{ selectionDiscountService.corporateBond()?.value ?? '0' | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    @if (!!selectionDiscountService.giftBond()) {\n      <p class=\"ticket-map-totals__item\">\n        <span>Bono de regalo:</span>\n        <span class=\"line-through\">\n          ${{ selectionDiscountService.giftBond()?.original_value ?? '0' | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    <hr class=\"ticket-map-totals__divider\" />\n\n    <div class=\"ticket-map-totals__calculated\">\n      <span class=\"ticket-map-totals__calculated-title\">Total:</span>\n\n      @if (\n        selectionTotalsService.totalDiscounted() || selectionTotalsService.totalDiscounted() === 0\n      ) {\n        <span class=\"ticket-map-totals__calculated-inline\">\n          <span class=\"ticket-map-totals__calculated-discount\">\n            ${{ selectionTotalsService.totalValue() | currency: 'COP' : 'symbol' : '1.0-2' }}\n          </span>\n          <span class=\"ticket-map-totals__calculated-total\">\n            ${{ selectionTotalsService.totalDiscounted() | currency: 'COP' : 'symbol' : '1.0-2' }}\n          </span>\n        </span>\n      } @else {\n        <span class=\"ticket-map-totals__calculated-total\">\n          ${{ selectionTotalsService.totalValue() | number: '1.0-2' }}\n        </span>\n      }\n    </div>\n\n    @if (selectionService.selectedCount() > 0 || selectionService.selectedProductCount() > 0) {\n      <div class=\"flex flex-col gap-2\">\n        <app-button\n          (click)=\"onPurchaseClick.emit()\"\n          size=\"sm\"\n          icon=\"ri-dashboard-3-line\"\n          [text]=\"buttonText\"\n          [loadingText]=\"loadingButtonText\"\n          [loading]=\"isLoading\"\n          variant=\"primary\"\n        />\n      </div>\n    }\n  </div>\n</ticket-map-widget>\n", styles: [".ticket-map-totals{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;width:100%}.ticket-map-totals__item{align-items:center;color:#9ca3af;display:flex;flex-direction:row;font-size:.75rem;justify-content:space-between;margin:0}.ticket-map-totals__divider{border:none;border-top:1px solid #e5e7eb;width:100%}.ticket-map-totals__calculated{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin:0}.ticket-map-totals__calculated-title{color:#4b5563;font-size:1rem;font-weight:700}.ticket-map-totals__calculated-inline{display:flex;flex-direction:column;align-items:flex-end}.ticket-map-totals__calculated-discount{color:#9ca3af;font-size:.75rem;text-decoration:line-through}.ticket-map-totals__calculated-total{color:#4b5563;font-size:1rem;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: TicketMapWidgetHeaderComponent, selector: "ticket-map-widget-header", inputs: ["title"] }, { kind: "component", type: TicketMapWidgetComponent, selector: "ticket-map-widget" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TicketMapTotalsComponent, decorators: [{
             type: Component,
@@ -8155,7 +8178,7 @@ class SeatSelectionSummaryItemComponent {
         this.selectionService.deselect(ticket);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SeatSelectionSummaryItemComponent, deps: [{ token: TicketSelectionService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SeatSelectionSummaryItemComponent, isStandalone: true, selector: "seat-selection-summary-item", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"seat-selection-summary-item\">\n  <div class=\"seat-selection-summary-item__icon\">\n    {{ getItemTypeIcon(item) }}\n  </div>\n\n  <div class=\"seat-selection-summary-item__content\">\n    <div class=\"seat-selection-summary-item__content-label\">{{ item.seat_label }}</div>\n\n    <div class=\"seat-selection-summary-item__content-price\">\n      ${{ item.normal_price | number: '1.0' }}\n    </div>\n\n    @if (item.element_qty && item.element_qty > 1) {\n      <div class=\"seat-selection-summary-item__content-quantity\">\n        Cantidad: {{ item.element_qty }}\n      </div>\n    }\n  </div>\n\n  <div class=\"seat-selection-summary-item__actions\">\n    <app-button\n      variant=\"transparent\"\n      size=\"xs\"\n      text=\"\"\n      icon=\"ri-close-line\"\n      (clicked)=\"removeItem(item)\"\n    />\n  </div>\n</div>\n", styles: [".seat-selection-summary-item{align-items:center;display:flex;flex-flow:row nowrap;gap:.75rem;justify-content:flex-start;border-bottom:1px solid #e5e7eb;padding:.75rem 0;transition:background-color .2s ease}.seat-selection-summary-item:last-child{border-bottom:none}.seat-selection-summary-item:hover{background-color:#f9fafb}.seat-selection-summary-item__icon{align-items:center;border:1px solid #e5e7eb;border-radius:.25rem;display:flex;font-size:1.5rem;height:44px;justify-content:center;padding:.25rem;width:44px}.seat-selection-summary-item__content{display:flex;flex-direction:column;gap:.25rem}.seat-selection-summary-item__content-label{font-size:.75rem;font-weight:500;color:#6b7280}.seat-selection-summary-item__content-price{font-size:.875rem;font-weight:600;color:#111827}.seat-selection-summary-item__content-quantity{font-size:.75rem;color:#6b7280}.seat-selection-summary-item__actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SeatSelectionSummaryItemComponent, isStandalone: true, selector: "seat-selection-summary-item", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"seat-selection-summary-item\">\n  <div class=\"seat-selection-summary-item__icon\">\n    {{ getItemTypeIcon(item) }}\n  </div>\n\n  <div class=\"seat-selection-summary-item__content\">\n    <div class=\"seat-selection-summary-item__content-label\">{{ item.seat_label }}</div>\n\n    <div class=\"seat-selection-summary-item__content-price\">\n      ${{ item.normal_price | number: '1.0' }}\n    </div>\n\n    @if (item.element_qty && item.element_qty > 1) {\n      <div class=\"seat-selection-summary-item__content-quantity\">\n        Cantidad: {{ item.element_qty }}\n      </div>\n    }\n  </div>\n\n  <div class=\"seat-selection-summary-item__actions\">\n    <app-button\n      variant=\"transparent\"\n      size=\"xs\"\n      text=\"\"\n      icon=\"ri-close-line\"\n      (clicked)=\"removeItem(item)\"\n    />\n  </div>\n</div>\n", styles: [".seat-selection-summary-item{align-items:center;display:flex;flex-flow:row nowrap;gap:.75rem;justify-content:flex-start;border-bottom:1px solid #e5e7eb;padding:.75rem 0;transition:background-color .2s ease}.seat-selection-summary-item:last-child{border-bottom:none}.seat-selection-summary-item:hover{background-color:#f9fafb}.seat-selection-summary-item__icon{align-items:center;border:1px solid #e5e7eb;border-radius:.25rem;display:flex;font-size:1.5rem;height:44px;justify-content:center;padding:.25rem;width:44px}.seat-selection-summary-item__content{display:flex;flex-direction:column;gap:.25rem}.seat-selection-summary-item__content-label{font-size:.75rem;font-weight:500;color:#6b7280}.seat-selection-summary-item__content-price{font-size:.875rem;font-weight:600;color:#111827}.seat-selection-summary-item__content-quantity{font-size:.75rem;color:#6b7280}.seat-selection-summary-item__actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SeatSelectionSummaryItemComponent, decorators: [{
             type: Component,
@@ -8173,7 +8196,7 @@ class SeatSelectionSummaryComponent {
         this.selectionService = selectionService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SeatSelectionSummaryComponent, deps: [{ token: TicketSelectionService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SeatSelectionSummaryComponent, isStandalone: true, selector: "seat-selection-summary", inputs: { title: "title", clearButtonText: "clearButtonText" }, ngImport: i0, template: "<ticket-map-widget>\n  <ticket-map-widget-header [title]=\"title\" />\n\n  @if (selectionService.selectedCount() > 0) {\n    <div class=\"tickets-list\">\n      @for (item of selectionService.selectedTickets(); track item.id) {\n        <seat-selection-summary-item [item]=\"item\" />\n      }\n    </div>\n\n    @if (selectionService.selectedCount() > 0) {\n      <div class=\"tickets-actions\">\n        <app-button\n          size=\"xs\"\n          [text]=\"clearButtonText\"\n          icon=\"ri-delete-bin-line\"\n          (clicked)=\"selectionService.clearSelection()\"\n        />\n      </div>\n    }\n  } @else {\n    <seat-selection-empty-summary />\n  }\n</ticket-map-widget>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "component", type: SeatSelectionEmptySummaryComponent, selector: "seat-selection-empty-summary" }, { kind: "component", type: SeatSelectionSummaryItemComponent, selector: "seat-selection-summary-item", inputs: ["item"] }, { kind: "component", type: TicketMapWidgetComponent, selector: "ticket-map-widget" }, { kind: "component", type: TicketMapWidgetHeaderComponent, selector: "ticket-map-widget-header", inputs: ["title"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SeatSelectionSummaryComponent, isStandalone: true, selector: "seat-selection-summary", inputs: { title: "title", clearButtonText: "clearButtonText" }, ngImport: i0, template: "<ticket-map-widget>\n  <ticket-map-widget-header [title]=\"title\" />\n\n  @if (selectionService.selectedCount() > 0) {\n    <div class=\"tickets-list\">\n      @for (item of selectionService.selectedTickets(); track item.id) {\n        <seat-selection-summary-item [item]=\"item\" />\n      }\n    </div>\n\n    @if (selectionService.selectedCount() > 0) {\n      <div class=\"tickets-actions\">\n        <app-button\n          size=\"xs\"\n          [text]=\"clearButtonText\"\n          icon=\"ri-delete-bin-line\"\n          (clicked)=\"selectionService.clearSelection()\"\n        />\n      </div>\n    }\n  } @else {\n    <seat-selection-empty-summary />\n  }\n</ticket-map-widget>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: SeatSelectionEmptySummaryComponent, selector: "seat-selection-empty-summary" }, { kind: "component", type: SeatSelectionSummaryItemComponent, selector: "seat-selection-summary-item", inputs: ["item"] }, { kind: "component", type: TicketMapWidgetComponent, selector: "ticket-map-widget" }, { kind: "component", type: TicketMapWidgetHeaderComponent, selector: "ticket-map-widget-header", inputs: ["title"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SeatSelectionSummaryComponent, decorators: [{
             type: Component,
@@ -8254,7 +8277,7 @@ class ConfirmationOrderModalComponent {
         this.onConfirm && this.onConfirm.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfirmationOrderModalComponent, deps: [{ token: ConfirmationOrderModalService }, { token: TicketSelectionDiscountService }, { token: TicketSelectionTotalsService }, { token: TicketSelectionService }, { token: PerformanceBookingDataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ConfirmationOrderModalComponent, isStandalone: true, selector: "confirmation-order-modal", inputs: { modalTitle: "modalTitle", confirmButtonText: "confirmButtonText", confirmButtonTextLoading: "confirmButtonTextLoading", loading: "loading" }, outputs: { onConfirm: "onConfirm" }, ngImport: i0, template: "<app-modal [title]=\"modalTitle\" [isOpen]=\"isOpen\" size=\"md\" (closeModal)=\"onClose()\">\n  <div class=\"confirmation-modal\">\n    <p class=\"confirmation-modal__description\">\n      Revise los detalles de la compra antes de confirmar.\n    </p>\n\n    <p class=\"confirmation-modal__item\">\n      <span>Entradas ({{ selectedCount | number: '1.0-0' }}):</span>\n      <span>${{ ticketSubtotal | number: '1.0' }}</span>\n    </p>\n\n    @if (productCount > 0) {\n      <p class=\"confirmation-modal__item\">\n        <span>Productos ({{ productCount | number: '1.0-0' }}):</span>\n        <span>${{ productSubtotal | number: '1.0' }}</span>\n      </p>\n    }\n\n    @if (serviceFee > 0) {\n      <p class=\"confirmation-modal__item\">\n        <span>Tarifa de servicio:</span>\n        <span>${{ serviceFee | number: '1.0' }}</span>\n      </p>\n    }\n\n    @if (coupon) {\n      <p class=\"confirmation-modal__item\">\n        <span>Cup\u00F3n de descuento:</span>\n        <span class=\"confirmation-modal__discount\">\n          ${{ coupon.discount_value | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    @if (corporateBond) {\n      <p class=\"confirmation-modal__item\">\n        <span>Bono corporativo:</span>\n        <span class=\"confirmation-modal__discount\">\n          ${{ corporateBond.value | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    @if (giftBond) {\n      <p class=\"confirmation-modal__item\">\n        <span>Bono de regalo:</span>\n        <span class=\"confirmation-modal__discount\">\n          ${{ giftBond.original_value | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    <hr class=\"confirmation-modal__divider\" />\n\n    <p class=\"confirmation-modal__totals\">\n      <span class=\"confirmation-modal__totals-title\">Total:</span>\n\n      @if (totalDiscounted || totalDiscounted === 0) {\n        <span class=\"confirmation-modal__totals-discounted\">\n          <span class=\"confirmation-modal__discount\">\n            ${{ totalValue | currency: 'COP' : 'symbol' : '1.0' }}\n          </span>\n          <span class=\"confirmation-modal__price\">\n            ${{ totalDiscounted | currency: 'COP' : 'symbol' : '1.0' }}\n          </span>\n        </span>\n      } @else {\n        <span class=\"confirmation-modal__price\">${{ totalValue | number: '1.0' }}</span>\n      }\n    </p>\n  </div>\n\n  <div class=\"confirmation-modal__actions\">\n    <app-button\n      size=\"sm\"\n      variant=\"tertiary\"\n      text=\"Cancelar\"\n      (click)=\"onClose()\"\n      [disabled]=\"loading\"\n    />\n\n    <app-button\n      size=\"sm\"\n      variant=\"primary\"\n      [text]=\"confirmButtonText\"\n      [loadingText]=\"confirmButtonTextLoading\"\n      [loading]=\"loading\"\n      [disabled]=\"loading\"\n      (click)=\"confirmOrder()\"\n    />\n  </div>\n</app-modal>\n", styles: [".confirmation-modal{display:flex;flex-flow:column nowrap;gap:.5rem;width:100%}.confirmation-modal__description{color:#6b7280;font-size:.875rem;margin-bottom:.5rem}.confirmation-modal__item{align-items:center;color:#9ca3af;display:flex;flex-flow:row wrap;font-size:.75rem;justify-content:space-between;margin:0}.confirmation-modal__discount{text-decoration:line-through}.confirmation-modal__divider{border:none;border-top:1px solid #e5e7eb;width:100%}.confirmation-modal__price{color:#4b5563;font-size:1rem;font-weight:700}.confirmation-modal__totals{align-items:center;display:flex;flex-flow:row;justify-content:space-between;margin:0;width:100%}.confirmation-modal__totals-title{color:#4b5563;font-size:1rem;font-weight:700}.confirmation-modal__totals-discounted{align-items:flex-end;display:flex;flex-flow:column}.confirmation-modal__totals-discounted .confirmation-modal__discount{color:#9ca3af;font-size:.75rem}.confirmation-modal__actions{display:flex;flex-flow:row;gap:.5rem;justify-content:flex-end;padding-top:1rem;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ConfirmationOrderModalComponent, isStandalone: true, selector: "confirmation-order-modal", inputs: { modalTitle: "modalTitle", confirmButtonText: "confirmButtonText", confirmButtonTextLoading: "confirmButtonTextLoading", loading: "loading" }, outputs: { onConfirm: "onConfirm" }, ngImport: i0, template: "<app-modal [title]=\"modalTitle\" [isOpen]=\"isOpen\" size=\"md\" (closeModal)=\"onClose()\">\n  <div class=\"confirmation-modal\">\n    <p class=\"confirmation-modal__description\">\n      Revise los detalles de la compra antes de confirmar.\n    </p>\n\n    <p class=\"confirmation-modal__item\">\n      <span>Entradas ({{ selectedCount | number: '1.0-0' }}):</span>\n      <span>${{ ticketSubtotal | number: '1.0' }}</span>\n    </p>\n\n    @if (productCount > 0) {\n      <p class=\"confirmation-modal__item\">\n        <span>Productos ({{ productCount | number: '1.0-0' }}):</span>\n        <span>${{ productSubtotal | number: '1.0' }}</span>\n      </p>\n    }\n\n    @if (serviceFee > 0) {\n      <p class=\"confirmation-modal__item\">\n        <span>Tarifa de servicio:</span>\n        <span>${{ serviceFee | number: '1.0' }}</span>\n      </p>\n    }\n\n    @if (coupon) {\n      <p class=\"confirmation-modal__item\">\n        <span>Cup\u00F3n de descuento:</span>\n        <span class=\"confirmation-modal__discount\">\n          ${{ coupon.discount_value | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    @if (corporateBond) {\n      <p class=\"confirmation-modal__item\">\n        <span>Bono corporativo:</span>\n        <span class=\"confirmation-modal__discount\">\n          ${{ corporateBond.value | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    @if (giftBond) {\n      <p class=\"confirmation-modal__item\">\n        <span>Bono de regalo:</span>\n        <span class=\"confirmation-modal__discount\">\n          ${{ giftBond.original_value | number: '1.0-2' }}\n        </span>\n      </p>\n    }\n\n    <hr class=\"confirmation-modal__divider\" />\n\n    <p class=\"confirmation-modal__totals\">\n      <span class=\"confirmation-modal__totals-title\">Total:</span>\n\n      @if (totalDiscounted || totalDiscounted === 0) {\n        <span class=\"confirmation-modal__totals-discounted\">\n          <span class=\"confirmation-modal__discount\">\n            ${{ totalValue | currency: 'COP' : 'symbol' : '1.0' }}\n          </span>\n          <span class=\"confirmation-modal__price\">\n            ${{ totalDiscounted | currency: 'COP' : 'symbol' : '1.0' }}\n          </span>\n        </span>\n      } @else {\n        <span class=\"confirmation-modal__price\">${{ totalValue | number: '1.0' }}</span>\n      }\n    </p>\n  </div>\n\n  <div class=\"confirmation-modal__actions\">\n    <app-button\n      size=\"sm\"\n      variant=\"tertiary\"\n      text=\"Cancelar\"\n      (click)=\"onClose()\"\n      [disabled]=\"loading\"\n    />\n\n    <app-button\n      size=\"sm\"\n      variant=\"primary\"\n      [text]=\"confirmButtonText\"\n      [loadingText]=\"confirmButtonTextLoading\"\n      [loading]=\"loading\"\n      [disabled]=\"loading\"\n      (click)=\"confirmOrder()\"\n    />\n  </div>\n</app-modal>\n", styles: [".confirmation-modal{display:flex;flex-flow:column nowrap;gap:.5rem;width:100%}.confirmation-modal__description{color:#6b7280;font-size:.875rem;margin-bottom:.5rem}.confirmation-modal__item{align-items:center;color:#9ca3af;display:flex;flex-flow:row wrap;font-size:.75rem;justify-content:space-between;margin:0}.confirmation-modal__discount{text-decoration:line-through}.confirmation-modal__divider{border:none;border-top:1px solid #e5e7eb;width:100%}.confirmation-modal__price{color:#4b5563;font-size:1rem;font-weight:700}.confirmation-modal__totals{align-items:center;display:flex;flex-flow:row;justify-content:space-between;margin:0;width:100%}.confirmation-modal__totals-title{color:#4b5563;font-size:1rem;font-weight:700}.confirmation-modal__totals-discounted{align-items:flex-end;display:flex;flex-flow:column}.confirmation-modal__totals-discounted .confirmation-modal__discount{color:#9ca3af;font-size:.75rem}.confirmation-modal__actions{display:flex;flex-flow:row;gap:.5rem;justify-content:flex-end;padding-top:1rem;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfirmationOrderModalComponent, decorators: [{
             type: Component,
@@ -8430,7 +8453,7 @@ class TicketQrComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TicketQrComponent, deps: [{ token: TicketQrService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TicketQrComponent, isStandalone: true, selector: "performance-ticket-qr", inputs: { ticketUuid: "ticketUuid" }, viewQueries: [{ propertyName: "qrCanvas", first: true, predicate: ["qrCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ticket-qr\">\n  @if (loading()) {\n    <div class=\"ticket-qr__loader\">\n      <span class=\"ticket-qr__loader-text\">Cargando QR...</span>\n    </div>\n  }\n\n  @if (error()) {\n    <div class=\"ticket-qr__container\">\n      <app-alert text=\"Error al cargar el c\u00F3digo QR\" type=\"error\" />\n      <app-button text=\"Reintentar\" (clicked)=\"retry()\" [disabled]=\"loading()\" />\n    </div>\n  }\n\n  <div [class.hidden]=\"loading() || error()\" class=\"ticket-qr__container\">\n    <div class=\"transition-opacity duration-300\" [class.opacity-50]=\"refreshing()\">\n      <canvas #qrCanvas class=\"ticket-qr__canvas\" width=\"256\" height=\"256\"></canvas>\n    </div>\n    <span class=\"ticket-qr__updating-text\">\n      {{ countdown() > 0 ? `Actualizando en ${countdown()}` : '0s' }}\n    </span>\n  </div>\n</div>\n", styles: [".ticket-qr{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;height:auto;padding:1rem;width:100%}.ticket-qr__loader{align-items:center;background-color:#f3f4f6;border-radius:.5rem;display:flex;flex-flow:column nowrap;height:16rem;justify-content:center;width:16rem}.ticket-qr__loader-text{color:#9ca3af;font-size:.875rem}.ticket-qr__container{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;width:100%}.ticket-qr__container.hidden{display:none}.ticket-qr__canvas{box-shadow:0 0 10px #0003;border-radius:.5rem}.ticket-qr__updating-text{color:#9ca3af;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TicketQrComponent, isStandalone: true, selector: "performance-ticket-qr", inputs: { ticketUuid: "ticketUuid" }, viewQueries: [{ propertyName: "qrCanvas", first: true, predicate: ["qrCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ticket-qr\">\n  @if (loading()) {\n    <div class=\"ticket-qr__loader\">\n      <span class=\"ticket-qr__loader-text\">Cargando QR...</span>\n    </div>\n  }\n\n  @if (error()) {\n    <div class=\"ticket-qr__container\">\n      <app-alert text=\"Error al cargar el c\u00F3digo QR\" type=\"error\" />\n      <app-button text=\"Reintentar\" (clicked)=\"retry()\" [disabled]=\"loading()\" />\n    </div>\n  }\n\n  <div [class.hidden]=\"loading() || error()\" class=\"ticket-qr__container\">\n    <div class=\"transition-opacity duration-300\" [class.opacity-50]=\"refreshing()\">\n      <canvas #qrCanvas class=\"ticket-qr__canvas\" width=\"256\" height=\"256\"></canvas>\n    </div>\n    <span class=\"ticket-qr__updating-text\">\n      {{ countdown() > 0 ? `Actualizando en ${countdown()}` : '0s' }}\n    </span>\n  </div>\n</div>\n", styles: [".ticket-qr{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;height:auto;padding:1rem;width:100%}.ticket-qr__loader{align-items:center;background-color:#f3f4f6;border-radius:.5rem;display:flex;flex-flow:column nowrap;height:16rem;justify-content:center;width:16rem}.ticket-qr__loader-text{color:#9ca3af;font-size:.875rem}.ticket-qr__container{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;width:100%}.ticket-qr__container.hidden{display:none}.ticket-qr__canvas{box-shadow:0 0 10px #0003;border-radius:.5rem}.ticket-qr__updating-text{color:#9ca3af;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TicketQrComponent, decorators: [{
             type: Component,
@@ -8511,7 +8534,7 @@ class OrderItemsComponent {
         this.ticketQrModalService.open(ticketUuid, description);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderItemsComponent, deps: [{ token: TicketQrModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderItemsComponent, isStandalone: true, selector: "order-items", inputs: { order: "order" }, ngImport: i0, template: "@if (!!order) {\n  <div class=\"order-items\">\n    <div class=\"order-items__header\">\n      <p class=\"order-items__header-title\">\n        Informaci\u00F3n de los art\u00EDculos comprados ({{ order.order_items.length | number: '1.0' }})\n      </p>\n    </div>\n    <div class=\"order-items__table-container\">\n      <table class=\"order-items__table\">\n        <thead class=\"order-items__table-head\">\n          <tr class=\"order-items__table-head-row\">\n            <th class=\"order-items__table-head-cell\">Tipo</th>\n            <th class=\"order-items__table-head-cell\">Descripci\u00F3n</th>\n\n            <th class=\"order-items__table-head-cell text-right\">Cant.</th>\n            <th class=\"order-items__table-head-cell text-right\">Precio</th>\n            <th class=\"order-items__table-head-cell text-right\">Total</th>\n            @if (showActionColumn) {\n              <th class=\"order-items__table-head-cell\">Acciones</th>\n            }\n          </tr>\n        </thead>\n        <tbody class=\"order-items__table-body\">\n          @for (item of order.order_items; track $index) {\n            <tr class=\"order-items__table-body-row\">\n              <td class=\"order-items__table-body-cell\">\n                <order-item-type-badge [item]=\"item\" size=\"xs\" />\n              </td>\n\n              <td class=\"order-items__table-body-cell\">\n                {{ item.description }}\n              </td>\n\n              <td class=\"order-items__table-body-cell text-right\">\n                {{ item.quantity }}\n              </td>\n\n              <td class=\"order-items__table-body-cell text-right\">\n                ${{ item.normal_price | number: '1.0-2' }}\n              </td>\n\n              <td class=\"order-items__table-body-cell text-right\">\n                <strong>\n                  ${{ itemTotal(item.quantity, item.normal_price) | number: '1.0-2' }}\n                </strong>\n              </td>\n\n              @if (item.ticket_uuid && order.status === 'completed' && showActionColumn) {\n                <td class=\"order-items__table-body-cell actions\">\n                  <app-button\n                    text=\"Ver ticket\"\n                    size=\"xs\"\n                    icon=\"ri-eye-line\"\n                    (clicked)=\"openTicketQr(item.ticket_uuid!, item.description)\"\n                  />\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"order-items__totals\">\n      <dl class=\"order-items__totals-container\">\n        @if (giftBonds.length > 0 && totals.giftBonds > 0) {\n          <div class=\"order-items__totals-item\">\n            <dt class=\"order-items__totals-item-title\">Bonos de regalo ({{ giftBonds.length }})</dt>\n            <dd class=\"order-items__totals-item-value\">\n              @if (totals.giftBonds > 0) {\n                <span class=\"text-gray-900\"> ${{ totals.giftBonds | number: '1.0-2' }} </span>\n              }\n            </dd>\n          </div>\n        }\n\n        @if (tickets.length > 0 && totals.tickets > 0) {\n          <div class=\"order-items__totals-item\">\n            <dt class=\"order-items__totals-item-title\">Entradas ({{ tickets.length }})</dt>\n            <dd class=\"order-items__totals-item-value\">\n              @if (totals.tickets > 0) {\n                <span class=\"text-gray-900\"> ${{ totals.tickets | number: '1.0-2' }} </span>\n              }\n            </dd>\n          </div>\n        }\n\n        @if (products.length > 0 && totals.products > 0) {\n          <div class=\"order-items__totals-item\">\n            <dt class=\"order-items__totals-item-title\">Productos</dt>\n            <dd class=\"order-items__totals-item-value\">\n              @if (totals.products > 0) {\n                <span class=\"text-gray-900\"> ${{ totals.products | number: '1.0-2' }} </span>\n              }\n            </dd>\n          </div>\n        }\n\n        @if (order.service_fee && order.service_fee > 0) {\n          <div class=\"order-items__totals-item\">\n            <dt class=\"order-items__totals-item-title\">Tarifa de servicio</dt>\n            <dd class=\"order-items__totals-item-value\">\n              <span class=\"text-gray-900\"> ${{ order.service_fee | number: '1.0-2' }} </span>\n            </dd>\n          </div>\n        }\n\n        @if (hasDiscount()) {\n          <div class=\"order-items__totals-item\">\n            <dt class=\"order-items__totals-item-title\">Descuento</dt>\n            <dd class=\"order-items__totals-item-title\">\n              $-{{ order.discount_amount | number: '1.0-2' }}\n            </dd>\n          </div>\n        }\n\n        <div class=\"order-items__totals-item total-item\">\n          <dt class=\"order-items__totals-item-total\">Total</dt>\n          <dd class=\"order-items__totals-item-value\">\n            @if (!hasDiscount()) {\n              <span class=\"order-items__totals-item-total\">\n                ${{ order.total | number: '1.0-2' }}\n              </span>\n            }\n            @if (hasDiscount()) {\n              <span class=\"order-items__totals-item-discount-wrapper\">\n                <span class=\"order-items__totals-item-discount\">\n                  ${{ order.total | number: '1.0-2' }}\n                </span>\n                <span class=\"order-items__totals-item-total\">\n                  ${{ order.total_discounted | number: '1.0-2' }}\n                </span>\n              </span>\n            }\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </div>\n\n  <ticket-qr-modal />\n}\n", styles: [".order-items{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-items__header{align-items:center;display:flex;flex-flow:row wrap;gap:1rem;padding:1rem;width:100%}.order-items__header-title{color:#6b7280;font-size:.875rem;font-weight:700;margin:0}.order-items__table-container{overflow-x:auto}.order-items__table{border-collapse:collapse;font-size:.875rem;width:100%}.order-items__table-head-row{background-color:#f9fafb;text-align:left}.order-items__table-head-cell{color:#6b7280;font-size:.75rem;font-weight:700;padding:.75rem 1.5rem;text-transform:uppercase}.order-items__table-head-cell.text-right{text-align:right}.order-items__table-body>:not(:last-child){border-bottom:1px solid #f9fafb}.order-items__table-body-row{transition:all .4s ease}.order-items__table-body-row:hover{background-color:#f9fafb}.order-items__table-body-cell{color:#374151;padding:.75rem 1.5rem;white-space:nowrap}.order-items__table-body-cell.text-right{text-align:right}.order-items__totals{background-color:#f9fafb;border-top:1px solid #f3f4f6;padding:1rem 1.5rem;width:100%}.order-items__totals-container{display:flex;flex-flow:column;gap:.5rem;margin-left:auto;max-width:20rem;width:100%}.order-items__totals-item{display:flex;font-size:.875rem;justify-content:space-between;width:100%}.order-items__totals-item.actions{text-align:left}.order-items__totals-item.total-item{border-top:1px solid #e5e7eb;padding-top:.5rem}.order-items__totals-item-title{color:#6b7280}.order-items__totals-item-total{color:#111827;font-size:1.125rem;font-weight:700;line-height:100%}.order-items__totals-item-discount-wrapper{align-items:flex-end;display:flex;flex-flow:column nowrap;width:100%}.order-items__totals-item-discount{color:#9ca3af;font-size:.75rem;text-decoration:line-through}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "component", type: TicketQrModalComponent, selector: "ticket-qr-modal" }, { kind: "component", type: OrderItemTypeBadgeComponent, selector: "order-item-type-badge", inputs: ["item", "size"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderItemsComponent, isStandalone: true, selector: "order-items", inputs: { order: "order" }, ngImport: i0, template: "@if (!!order) {\n  <div class=\"order-items\">\n    <div class=\"order-items__header\">\n      <p class=\"order-items__header-title\">\n        Informaci\u00F3n de los art\u00EDculos comprados ({{ order.order_items.length | number: '1.0' }})\n      </p>\n    </div>\n    <div class=\"order-items__table-container\">\n      <table class=\"order-items__table\">\n        <thead class=\"order-items__table-head\">\n          <tr class=\"order-items__table-head-row\">\n            <th class=\"order-items__table-head-cell\">Tipo</th>\n            <th class=\"order-items__table-head-cell\">Descripci\u00F3n</th>\n\n            <th class=\"order-items__table-head-cell text-right\">Cant.</th>\n            <th class=\"order-items__table-head-cell text-right\">Precio</th>\n            <th class=\"order-items__table-head-cell text-right\">Total</th>\n            @if (showActionColumn) {\n              <th class=\"order-items__table-head-cell\">Acciones</th>\n            }\n          </tr>\n        </thead>\n        <tbody class=\"order-items__table-body\">\n          @for (item of order.order_items; track $index) {\n            <tr class=\"order-items__table-body-row\">\n              <td class=\"order-items__table-body-cell\">\n                <order-item-type-badge [item]=\"item\" size=\"xs\" />\n              </td>\n\n              <td class=\"order-items__table-body-cell\">\n                {{ item.description }}\n              </td>\n\n              <td class=\"order-items__table-body-cell text-right\">\n                {{ item.quantity }}\n              </td>\n\n              <td class=\"order-items__table-body-cell text-right\">\n                ${{ item.normal_price | number: '1.0-2' }}\n              </td>\n\n              <td class=\"order-items__table-body-cell text-right\">\n                <strong>\n                  ${{ itemTotal(item.quantity, item.normal_price) | number: '1.0-2' }}\n                </strong>\n              </td>\n\n              @if (item.ticket_uuid && order.status === 'completed' && showActionColumn) {\n                <td class=\"order-items__table-body-cell actions\">\n                  <app-button\n                    text=\"Ver ticket\"\n                    size=\"xs\"\n                    icon=\"ri-eye-line\"\n                    (clicked)=\"openTicketQr(item.ticket_uuid!, item.description)\"\n                  />\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"order-items__totals\">\n      <dl class=\"order-items__totals-container\">\n        @if (giftBonds.length > 0 && totals.giftBonds > 0) {\n          <div class=\"order-items__totals-item\">\n            <dt class=\"order-items__totals-item-title\">Bonos de regalo ({{ giftBonds.length }})</dt>\n            <dd class=\"order-items__totals-item-value\">\n              @if (totals.giftBonds > 0) {\n                <span class=\"text-gray-900\"> ${{ totals.giftBonds | number: '1.0-2' }} </span>\n              }\n            </dd>\n          </div>\n        }\n\n        @if (tickets.length > 0 && totals.tickets > 0) {\n          <div class=\"order-items__totals-item\">\n            <dt class=\"order-items__totals-item-title\">Entradas ({{ tickets.length }})</dt>\n            <dd class=\"order-items__totals-item-value\">\n              @if (totals.tickets > 0) {\n                <span class=\"text-gray-900\"> ${{ totals.tickets | number: '1.0-2' }} </span>\n              }\n            </dd>\n          </div>\n        }\n\n        @if (products.length > 0 && totals.products > 0) {\n          <div class=\"order-items__totals-item\">\n            <dt class=\"order-items__totals-item-title\">Productos</dt>\n            <dd class=\"order-items__totals-item-value\">\n              @if (totals.products > 0) {\n                <span class=\"text-gray-900\"> ${{ totals.products | number: '1.0-2' }} </span>\n              }\n            </dd>\n          </div>\n        }\n\n        @if (order.service_fee && order.service_fee > 0) {\n          <div class=\"order-items__totals-item\">\n            <dt class=\"order-items__totals-item-title\">Tarifa de servicio</dt>\n            <dd class=\"order-items__totals-item-value\">\n              <span class=\"text-gray-900\"> ${{ order.service_fee | number: '1.0-2' }} </span>\n            </dd>\n          </div>\n        }\n\n        @if (hasDiscount()) {\n          <div class=\"order-items__totals-item\">\n            <dt class=\"order-items__totals-item-title\">Descuento</dt>\n            <dd class=\"order-items__totals-item-title\">\n              $-{{ order.discount_amount | number: '1.0-2' }}\n            </dd>\n          </div>\n        }\n\n        <div class=\"order-items__totals-item total-item\">\n          <dt class=\"order-items__totals-item-total\">Total</dt>\n          <dd class=\"order-items__totals-item-value\">\n            @if (!hasDiscount()) {\n              <span class=\"order-items__totals-item-total\">\n                ${{ order.total | number: '1.0-2' }}\n              </span>\n            }\n            @if (hasDiscount()) {\n              <span class=\"order-items__totals-item-discount-wrapper\">\n                <span class=\"order-items__totals-item-discount\">\n                  ${{ order.total | number: '1.0-2' }}\n                </span>\n                <span class=\"order-items__totals-item-total\">\n                  ${{ order.total_discounted | number: '1.0-2' }}\n                </span>\n              </span>\n            }\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </div>\n\n  <ticket-qr-modal />\n}\n", styles: [".order-items{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-items__header{align-items:center;display:flex;flex-flow:row wrap;gap:1rem;padding:1rem;width:100%}.order-items__header-title{color:#6b7280;font-size:.875rem;font-weight:700;margin:0}.order-items__table-container{overflow-x:auto}.order-items__table{border-collapse:collapse;font-size:.875rem;width:100%}.order-items__table-head-row{background-color:#f9fafb;text-align:left}.order-items__table-head-cell{color:#6b7280;font-size:.75rem;font-weight:700;padding:.75rem 1.5rem;text-transform:uppercase}.order-items__table-head-cell.text-right{text-align:right}.order-items__table-body>:not(:last-child){border-bottom:1px solid #f9fafb}.order-items__table-body-row{transition:all .4s ease}.order-items__table-body-row:hover{background-color:#f9fafb}.order-items__table-body-cell{color:#374151;padding:.75rem 1.5rem;white-space:nowrap}.order-items__table-body-cell.text-right{text-align:right}.order-items__totals{background-color:#f9fafb;border-top:1px solid #f3f4f6;padding:1rem 1.5rem;width:100%}.order-items__totals-container{display:flex;flex-flow:column;gap:.5rem;margin-left:auto;max-width:20rem;width:100%}.order-items__totals-item{display:flex;font-size:.875rem;justify-content:space-between;width:100%}.order-items__totals-item.actions{text-align:left}.order-items__totals-item.total-item{border-top:1px solid #e5e7eb;padding-top:.5rem}.order-items__totals-item-title{color:#6b7280}.order-items__totals-item-total{color:#111827;font-size:1.125rem;font-weight:700;line-height:100%}.order-items__totals-item-discount-wrapper{align-items:flex-end;display:flex;flex-flow:column nowrap;width:100%}.order-items__totals-item-discount{color:#9ca3af;font-size:.75rem;text-decoration:line-through}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: TicketQrModalComponent, selector: "ticket-qr-modal" }, { kind: "component", type: OrderItemTypeBadgeComponent, selector: "order-item-type-badge", inputs: ["item", "size"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderItemsComponent, decorators: [{
             type: Component,
@@ -8676,7 +8699,7 @@ class OrderTransactionsComponent {
         this.transactionDetailsModalService.open(transaction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderTransactionsComponent, deps: [{ token: OrderTransactionDetailsModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderTransactionsComponent, isStandalone: true, selector: "order-transactions", inputs: { order: "order" }, ngImport: i0, template: "@if (hasTransactions) {\n  <div class=\"order-transactions\">\n    <div class=\"order-transactions__header\">\n      <p class=\"order-transactions__header-title\">\n        Transacciones ({{ transactions.length | number: '1.0' }})\n      </p>\n    </div>\n    <div class=\"order-transactions__table-container\">\n      <table class=\"order-transactions__table\">\n        <thead class=\"order-transactions__table-head\">\n          <tr class=\"order-transactions__table-head-row\">\n            <th class=\"order-transactions__table-head-cell\">Medio de pago</th>\n            <th class=\"order-transactions__table-head-cell\">Estado</th>\n            <th class=\"order-transactions__table-head-cell text-right\">Valor</th>\n            <th class=\"order-transactions__table-head-cell\">ID transacci\u00F3n</th>\n            <th class=\"order-transactions__table-head-cell text-right\">Acciones</th>\n          </tr>\n        </thead>\n        <tbody class=\"order-transactions__table-body\">\n          @for (tx of transactions; track tx.id) {\n            <tr class=\"order-transactions__table-body-row\">\n              <td class=\"order-transactions__table-body-cell\">\n                {{ 'order.paymentMethods.' + tx.payment_gateway | transloco }}\n              </td>\n              <td class=\"order-transactions__table-body-cell\">\n                <app-badge\n                  [text]=\"'order.transactionStatus.' + tx.status | transloco\"\n                  [backgroundColor]=\"txColors[tx.status].bg\"\n                  [textColor]=\"txColors[tx.status].text\"\n                  size=\"xs\"\n                />\n              </td>\n              <td class=\"order-transactions__table-body-cell text-right\">\n                ${{ tx.amount | number: '1.0-2' }}\n              </td>\n              <td class=\"order-transactions__table-body-cell\">\n                {{ tx.gateway_transaction_id }}\n              </td>\n              <td class=\"order-transactions__table-body-cell text-right\">\n                <app-button\n                  icon=\"ri-eye-line\"\n                  variant=\"tertiary\"\n                  size=\"xs\"\n                  (clicked)=\"openTransaction(tx)\"\n                  [title]=\"'order.transactionDetails.actions.view' | transloco\"\n                />\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  </div>\n\n  <order-transaction-details-modal />\n}\n", styles: [".order-transactions{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-transactions__header{align-items:center;display:flex;padding:1rem;width:100%}.order-transactions__header-title{color:#6b7280;font-size:.875rem;font-weight:700;margin:0}.order-transactions__table-container{overflow-x:auto}.order-transactions__table{border-collapse:collapse;font-size:.875rem;width:100%}.order-transactions__table-head-row{background-color:#f9fafb;text-align:left}.order-transactions__table-head-cell{color:#6b7280;font-size:.75rem;font-weight:700;padding:.75rem 1.5rem;text-transform:uppercase}.order-transactions__table-head-cell.text-right{text-align:right}.order-transactions__table-body>:not(:last-child){border-bottom:1px solid #f9fafb}.order-transactions__table-body-row{transition:all .4s ease}.order-transactions__table-body-row:hover{background-color:#f9fafb}.order-transactions__table-body-cell{color:#374151;padding:.75rem 1.5rem;white-space:nowrap}.order-transactions__table-body-cell.text-right{text-align:right}.order-transactions__table-body-cell .gateway-id{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "component", type: OrderTransactionDetailsModalComponent, selector: "order-transaction-details-modal", inputs: ["isOpen", "transaction"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderTransactionsComponent, isStandalone: true, selector: "order-transactions", inputs: { order: "order" }, ngImport: i0, template: "@if (hasTransactions) {\n  <div class=\"order-transactions\">\n    <div class=\"order-transactions__header\">\n      <p class=\"order-transactions__header-title\">\n        Transacciones ({{ transactions.length | number: '1.0' }})\n      </p>\n    </div>\n    <div class=\"order-transactions__table-container\">\n      <table class=\"order-transactions__table\">\n        <thead class=\"order-transactions__table-head\">\n          <tr class=\"order-transactions__table-head-row\">\n            <th class=\"order-transactions__table-head-cell\">Medio de pago</th>\n            <th class=\"order-transactions__table-head-cell\">Estado</th>\n            <th class=\"order-transactions__table-head-cell text-right\">Valor</th>\n            <th class=\"order-transactions__table-head-cell\">ID transacci\u00F3n</th>\n            <th class=\"order-transactions__table-head-cell text-right\">Acciones</th>\n          </tr>\n        </thead>\n        <tbody class=\"order-transactions__table-body\">\n          @for (tx of transactions; track tx.id) {\n            <tr class=\"order-transactions__table-body-row\">\n              <td class=\"order-transactions__table-body-cell\">\n                {{ 'order.paymentMethods.' + tx.payment_gateway | transloco }}\n              </td>\n              <td class=\"order-transactions__table-body-cell\">\n                <app-badge\n                  [text]=\"'order.transactionStatus.' + tx.status | transloco\"\n                  [backgroundColor]=\"txColors[tx.status].bg\"\n                  [textColor]=\"txColors[tx.status].text\"\n                  size=\"xs\"\n                />\n              </td>\n              <td class=\"order-transactions__table-body-cell text-right\">\n                ${{ tx.amount | number: '1.0-2' }}\n              </td>\n              <td class=\"order-transactions__table-body-cell\">\n                {{ tx.gateway_transaction_id }}\n              </td>\n              <td class=\"order-transactions__table-body-cell text-right\">\n                <app-button\n                  icon=\"ri-eye-line\"\n                  variant=\"tertiary\"\n                  size=\"xs\"\n                  (clicked)=\"openTransaction(tx)\"\n                  [title]=\"'order.transactionDetails.actions.view' | transloco\"\n                />\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  </div>\n\n  <order-transaction-details-modal />\n}\n", styles: [".order-transactions{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-transactions__header{align-items:center;display:flex;padding:1rem;width:100%}.order-transactions__header-title{color:#6b7280;font-size:.875rem;font-weight:700;margin:0}.order-transactions__table-container{overflow-x:auto}.order-transactions__table{border-collapse:collapse;font-size:.875rem;width:100%}.order-transactions__table-head-row{background-color:#f9fafb;text-align:left}.order-transactions__table-head-cell{color:#6b7280;font-size:.75rem;font-weight:700;padding:.75rem 1.5rem;text-transform:uppercase}.order-transactions__table-head-cell.text-right{text-align:right}.order-transactions__table-body>:not(:last-child){border-bottom:1px solid #f9fafb}.order-transactions__table-body-row{transition:all .4s ease}.order-transactions__table-body-row:hover{background-color:#f9fafb}.order-transactions__table-body-cell{color:#374151;padding:.75rem 1.5rem;white-space:nowrap}.order-transactions__table-body-cell.text-right{text-align:right}.order-transactions__table-body-cell .gateway-id{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: OrderTransactionDetailsModalComponent, selector: "order-transaction-details-modal", inputs: ["isOpen", "transaction"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderTransactionsComponent, decorators: [{
             type: Component,