tickera-angular-components 0.0.1-dev.0 → 0.0.1-dev.2

package/fesm2022/tickera-angular-components.mjs

@@ -1,20 +1,21 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, PLATFORM_ID, Inject, Injectable, signal, LOCALE_ID, computed, inject, EventEmitter, Input, Output, ViewEncapsulation, Component, Self, Optional, Injector, HostListener, forwardRef } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, PLATFORM_ID, Inject, Injectable, signal, LOCALE_ID, computed, inject, EventEmitter, Input, Output, ViewEncapsulation, Component, Self, Optional, Injector, HostListener, forwardRef, effect, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { throwError, BehaviorSubject, Subject, of } from 'rxjs';
 import { catchError, distinctUntilChanged, debounceTime, switchMap, takeUntil, map } from 'rxjs/operators';
-import * as i1$2 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { isPlatformBrowser, formatDate, CommonModule, DatePipe } from '@angular/common';
 import { toast } from 'ngx-sonner';
 import { toObservable } from '@angular/core/rxjs-interop';
 import * as i2 from '@jsverse/transloco';
 import { TranslocoModule } from '@jsverse/transloco';
+import * as i3 from '@angular/router';
 import { RouterLink } from '@angular/router';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, Validators, NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { DEFAULT_TOOLBAR, Editor, toHTML, NgxEditorComponent, NgxEditorMenuComponent } from 'ngx-editor';
-import * as i2$1 from '@ng-select/ng-select';
+import * as i2$2 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 
 const TICKERA_COMPONENTS_CONFIG = new InjectionToken('TICKERA_COMPONENTS_CONFIG');
@@ -1239,7 +1240,7 @@ class AppButtonComponent {
         return `${BASE_BUTTON_CLASSES} ${disabledClasses} ${variantClasses} ${loadingClasses} ${sizeClasses}`;
     }
     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=\"{{ icon }}\"></i>\n  }\n\n  @if (loading) {\n    <i class=\"ri-refresh-line animate-spin\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    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=\"{{ icon }}\"></i>\n  }\n\n  @if (loading) {\n    <i class=\"ri-refresh-line animate-spin\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppButtonComponent, decorators: [{
             type: Component,
@@ -1284,11 +1285,11 @@ class AppLinkButtonComponent {
         return [BASE_BUTTON_CLASSES, disabledClasses, variantClasses, loadingClasses, sizeClasses].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 class=\"{{ buttonClasses }}\" [routerLink]=\"!disabled ? route : null\" [queryParams]=\"queryParams\" [target]=\"target\">\n  @if (icon) {\n    <i [class]=\"icon\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</a>\n", styles: [""], 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: 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" }, 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", 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: TranslocoModule }], 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, TranslocoModule], encapsulation: ViewEncapsulation.None, template: "<a class=\"{{ buttonClasses }}\" [routerLink]=\"!disabled ? route : null\" [queryParams]=\"queryParams\" [target]=\"target\">\n  @if (icon) {\n    <i [class]=\"icon\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</a>\n" }]
+            args: [{ selector: 'app-link-button', standalone: true, imports: [CommonModule, RouterLink, 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" }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], loading: [{
@@ -1329,7 +1330,7 @@ class AppAlertComponent {
         return ALERT_ICONS[this.type] ?? ALERT_ICONS.info;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppAlertComponent, isStandalone: true, selector: "app-alert", inputs: { type: "type", text: "text", closeable: "closeable", size: "size" }, ngImport: i0, template: "<div class=\"{{ alertClasses }}\" role=\"alert\">\n  <div class=\"flex items-center gap-2\">\n    <i class=\"{{ alertIcon }}\"></i>\n    <span>{{ text }}</span>\n  </div>\n\n  @if (closeable) {\n    <span\n      class=\"absolute top-0 bottom-0 right-0 h-full w-8 flex items-center justify-center cursor-pointer\"\n    >\n      <i class=\"ri-close-line\"></i>\n    </span>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppAlertComponent, isStandalone: true, selector: "app-alert", inputs: { type: "type", text: "text", closeable: "closeable", size: "size" }, ngImport: i0, template: "<div class=\"{{ alertClasses }}\" role=\"alert\">\n  <div class=\"flex items-center gap-2\">\n    <i class=\"{{ alertIcon }}\"></i>\n    <span>{{ text }}</span>\n  </div>\n\n  @if (closeable) {\n    <span\n      class=\"absolute top-0 bottom-0 right-0 h-full w-8 flex items-center justify-center cursor-pointer\"\n    >\n      <i class=\"ri-close-line\"></i>\n    </span>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppAlertComponent, decorators: [{
             type: Component,
@@ -1350,17 +1351,30 @@ class AppModalComponent {
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     size = 'md';
     closeModal = new EventEmitter();
+    SIZE_CLASSES = {
+        xs: 'max-w-xs',
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl',
+        '2xl': 'max-w-2xl',
+        '3xl': 'max-w-3xl',
+        '4xl': 'max-w-4xl',
+    };
+    get sizeClass() {
+        return this.SIZE_CLASSES[this.size] ?? 'max-w-md';
+    }
     onCloseModal() {
         if (this.disableClose)
             return;
         this.closeModal.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppModalComponent, isStandalone: true, selector: "app-modal", inputs: { title: "title", disableClose: "disableClose", isOpen: "isOpen", size: "size" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 flex items-center justify-center z-50\">\n    <div class=\"absolute inset-0 bg-black opacity-50\" (click)=\"onCloseModal()\"></div>\n\n    <div\n      [class]=\"`bg-white rounded-lg max-h-screen overflow-y-auto shadow-xl relative z-10 max-w-${size} w-full`\"\n    >\n      @if (!disableClose || !!title) {\n        <div class=\"flex justify-between items-center p-5 border-b border-gray-200\">\n          <h3 class=\"text-lg font-semibold text-gray-800 m-0\">{{ title }}</h3>\n\n          @if (!disableClose) {\n            <button\n              class=\"bg-none border-none text-2xl cursor-pointer text-gray-600 p-0 w-7.5 h-7.5 flex items-center justify-center hover:text-gray-800\"\n              (click)=\"onCloseModal()\"\n            >\n              &times;\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"p-5\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppModalComponent, isStandalone: true, selector: "app-modal", inputs: { title: "title", disableClose: "disableClose", isOpen: "isOpen", size: "size" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 flex items-center justify-center z-50\">\n    <div class=\"absolute inset-0 bg-black opacity-50\" (click)=\"onCloseModal()\"></div>\n\n    <div\n      [class]=\"`${sizeClass} bg-white rounded-lg max-h-screen overflow-y-auto shadow-xl relative z-10 w-full`\"\n    >\n      @if (!disableClose || !!title) {\n        <div class=\"flex justify-between items-center p-5 border-b border-gray-200\">\n          <h3 class=\"text-lg font-semibold text-gray-800 m-0\">{{ title }}</h3>\n\n          @if (!disableClose) {\n            <button\n              class=\"bg-none border-none text-2xl cursor-pointer text-gray-600 p-0 w-7.5 h-7.5 flex items-center justify-center hover:text-gray-800\"\n              (click)=\"onCloseModal()\"\n            >\n              &times;\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"p-5\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-modal', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 flex items-center justify-center z-50\">\n    <div class=\"absolute inset-0 bg-black opacity-50\" (click)=\"onCloseModal()\"></div>\n\n    <div\n      [class]=\"`bg-white rounded-lg max-h-screen overflow-y-auto shadow-xl relative z-10 max-w-${size} w-full`\"\n    >\n      @if (!disableClose || !!title) {\n        <div class=\"flex justify-between items-center p-5 border-b border-gray-200\">\n          <h3 class=\"text-lg font-semibold text-gray-800 m-0\">{{ title }}</h3>\n\n          @if (!disableClose) {\n            <button\n              class=\"bg-none border-none text-2xl cursor-pointer text-gray-600 p-0 w-7.5 h-7.5 flex items-center justify-center hover:text-gray-800\"\n              (click)=\"onCloseModal()\"\n            >\n              &times;\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"p-5\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}\n"] }]
+            args: [{ selector: 'app-modal', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 flex items-center justify-center z-50\">\n    <div class=\"absolute inset-0 bg-black opacity-50\" (click)=\"onCloseModal()\"></div>\n\n    <div\n      [class]=\"`${sizeClass} bg-white rounded-lg max-h-screen overflow-y-auto shadow-xl relative z-10 w-full`\"\n    >\n      @if (!disableClose || !!title) {\n        <div class=\"flex justify-between items-center p-5 border-b border-gray-200\">\n          <h3 class=\"text-lg font-semibold text-gray-800 m-0\">{{ title }}</h3>\n\n          @if (!disableClose) {\n            <button\n              class=\"bg-none border-none text-2xl cursor-pointer text-gray-600 p-0 w-7.5 h-7.5 flex items-center justify-center hover:text-gray-800\"\n              (click)=\"onCloseModal()\"\n            >\n              &times;\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"p-5\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], disableClose: [{
@@ -1487,7 +1501,7 @@ class FormInputComponent {
         return baseClasses;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormInputComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormInputComponent, isStandalone: true, selector: "form-input", inputs: { label: "label", type: "type", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", minlength: "minlength", min: "min", step: "step", pattern: "pattern", fieldGroupClass: "fieldGroupClass", autocomplete: "autocomplete" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [type]=\"type\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [minlength]=\"minlength\"\n      [pattern]=\"pattern || ''\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [class.bg-white]=\"!readonly\"\n      [class.bg-gray-200]=\"readonly\"\n      [class.cursor-not-allowed]=\"readonly\"\n      [class]=\"inputClasses\"\n      [autocomplete]=\"autocomplete\"\n      [min]=\"min\"\n      [step]=\"step\"\n    />\n  </div>\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormInputComponent, isStandalone: true, selector: "form-input", inputs: { label: "label", type: "type", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", minlength: "minlength", min: "min", step: "step", pattern: "pattern", fieldGroupClass: "fieldGroupClass", autocomplete: "autocomplete" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [type]=\"type\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [minlength]=\"minlength\"\n      [pattern]=\"pattern || ''\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [class.bg-white]=\"!readonly\"\n      [class.bg-gray-200]=\"readonly\"\n      [class.cursor-not-allowed]=\"readonly\"\n      [class]=\"inputClasses\"\n      [autocomplete]=\"autocomplete\"\n      [min]=\"min\"\n      [step]=\"step\"\n    />\n  </div>\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormInputComponent, decorators: [{
             type: Component,
@@ -1585,7 +1599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class AuditInformationComponent {
     data = null;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AuditInformationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AuditInformationComponent, isStandalone: true, selector: "app-audit-information", inputs: { data: "data" }, ngImport: i0, template: "@if (data) {\n  <div class=\"w-full bg-white rounded-lg shadow-lg overflow-hidden\">\n    <div class=\"border-b border-gray-200 last:border-b-0\">\n      <div class=\"flex items-center justify-between p-4 bg-gray-50 border-b border-gray-200\">\n        <p class=\"text-sm font-semibold\">Informaci\u00F3n de auditoria</p>\n      </div>\n\n      <div class=\"p-4 w-full\">\n        <ul class=\"flex flex-col gap-4 list-none p-0 m-0 w-full text-xs\">\n          <li class=\"flex flex-col items-start\">\n            <span class=\"font-bold\">Fecha de creaci\u00F3n:</span>\n            <span>{{ data.created_at | date: 'medium' }}</span>\n          </li>\n\n          @if (data.created_by_admin) {\n            <li class=\"flex flex-col items-start\">\n              <span class=\"font-bold\">Creado por:</span>\n              <span>\n                {{ data.created_by_admin.first_name }} - {{ data.created_by_admin.email }}\n              </span>\n            </li>\n          }\n\n          @if (data.updated_at) {\n            <li class=\"flex flex-col items-start\">\n              <span class=\"font-bold\">\u00DAltima actualizaci\u00F3n:</span>\n              <span>{{ data.updated_at | date: 'medium' }}</span>\n            </li>\n          }\n\n          @if (data.updated_by_admin) {\n            <li class=\"flex flex-col items-start\">\n              <span class=\"font-bold\">Actualizado por:</span>\n              <span>\n                {{ data.updated_by_admin.first_name }} - {{ data.updated_by_admin.email }}\n              </span>\n            </li>\n          }\n\n          @if (data.is_published && data.published_at) {\n            <li class=\"flex flex-col items-start\">\n              <span class=\"font-bold\">Fecha de publicaci\u00F3n:</span>\n              <span>{{ data.published_at | date: 'medium' }}</span>\n            </li>\n          }\n\n          @if (data.is_published && data.published_by_admin) {\n            <li class=\"flex flex-col items-start\">\n              <span class=\"font-bold\">Publicado por:</span>\n              <span>\n                {{ data.published_by_admin.first_name }} - {{ data.published_by_admin.email }}\n              </span>\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AuditInformationComponent, isStandalone: true, selector: "app-audit-information", inputs: { data: "data" }, ngImport: i0, template: "@if (data) {\n  <div class=\"w-full bg-white rounded-lg shadow-lg overflow-hidden\">\n    <div class=\"border-b border-gray-200 last:border-b-0\">\n      <div class=\"flex items-center justify-between p-4 bg-gray-50 border-b border-gray-200\">\n        <p class=\"text-sm font-semibold\">Informaci\u00F3n de auditoria</p>\n      </div>\n\n      <div class=\"p-4 w-full\">\n        <ul class=\"flex flex-col gap-4 list-none p-0 m-0 w-full text-xs\">\n          <li class=\"flex flex-col items-start\">\n            <span class=\"font-bold\">Fecha de creaci\u00F3n:</span>\n            <span>{{ data.created_at | date: 'medium' }}</span>\n          </li>\n\n          @if (data.created_by_admin) {\n            <li class=\"flex flex-col items-start\">\n              <span class=\"font-bold\">Creado por:</span>\n              <span>\n                {{ data.created_by_admin.first_name }} - {{ data.created_by_admin.email }}\n              </span>\n            </li>\n          }\n\n          @if (data.updated_at) {\n            <li class=\"flex flex-col items-start\">\n              <span class=\"font-bold\">\u00DAltima actualizaci\u00F3n:</span>\n              <span>{{ data.updated_at | date: 'medium' }}</span>\n            </li>\n          }\n\n          @if (data.updated_by_admin) {\n            <li class=\"flex flex-col items-start\">\n              <span class=\"font-bold\">Actualizado por:</span>\n              <span>\n                {{ data.updated_by_admin.first_name }} - {{ data.updated_by_admin.email }}\n              </span>\n            </li>\n          }\n\n          @if (data.is_published && data.published_at) {\n            <li class=\"flex flex-col items-start\">\n              <span class=\"font-bold\">Fecha de publicaci\u00F3n:</span>\n              <span>{{ data.published_at | date: 'medium' }}</span>\n            </li>\n          }\n\n          @if (data.is_published && data.published_by_admin) {\n            <li class=\"flex flex-col items-start\">\n              <span class=\"font-bold\">Publicado por:</span>\n              <span>\n                {{ data.published_by_admin.first_name }} - {{ data.published_by_admin.email }}\n              </span>\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AuditInformationComponent, decorators: [{
             type: Component,
@@ -1638,7 +1652,7 @@ class DynamicTableComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DynamicTableComponent, isStandalone: true, selector: "dynamic-table", inputs: { title: "title", data: "data", headers: "headers", columnComponents: "columnComponents", isLoading: "isLoading", totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", showPagination: "showPagination", showSearch: "showSearch", showTitle: "showTitle" }, outputs: { pageChange: "pageChange", searchChange: "searchChange" }, ngImport: i0, template: "<div\n  class=\"bg-white rounded-lg overflow-hidden border border-gray-200 dark:bg-gray-800 dark:border-gray-700\"\n>\n  @if (showTitle || showSearch) {\n    <div class=\"p-4 border-b border-gray-200 flex items-center justify-start dark:border-gray-700\">\n      @if (showTitle) {\n        <h2 class=\"text-lg font-semibold dark:text-white\">{{ title }}</h2>\n      }\n\n      @if (showSearch) {\n        <input\n          type=\"text\"\n          (input)=\"onSearch($event)\"\n          placeholder=\"Buscar...\"\n          class=\"ml-auto block w-sm rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500\"\n        />\n      }\n    </div>\n  }\n\n  <div class=\"overflow-x-auto\">\n    <table class=\"w-full text-left border-collapse\">\n      <thead class=\"bg-gray-100 text-gray-600 text-xs dark:bg-gray-700 dark:text-gray-300\">\n        <tr>\n          @for (header of headers; track header.key) {\n            <th class=\"p-3 border-b border-gray-300 whitespace-nowrap dark:border-gray-600\">\n              {{ header.label }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody class=\"text-gray-700 text-xs dark:text-gray-200\">\n        @if (isLoading) {\n          <tr\n            class=\"border-b even:bg-gray-100 border-gray-200 last:border-none transition-colors dark:even:bg-gray-700/50 dark:border-gray-700\"\n          >\n            @for (header of headers; track header.key) {\n              <td class=\"p-3\">\n                <div class=\"h-5 bg-gray-200 rounded animate-pulse w-full dark:bg-gray-600\"></div>\n              </td>\n            }\n          </tr>\n        }\n\n        @for (row of data; track row) {\n          <tr\n            class=\"hover:bg-gray-200 border-b even:bg-gray-100 border-gray-200 last:border-none transition-colors dark:hover:bg-gray-700 dark:even:bg-gray-700/50 dark:border-gray-700\"\n          >\n            @for (header of headers; track header.key) {\n              <td class=\"p-3 whitespace-nowrap\">\n                @if (columnComponents[header.key]) {\n                  <ng-container\n                    *ngComponentOutlet=\"columnComponents[header.key]; injector: createInjector(row)\"\n                  ></ng-container>\n                } @else {\n                  {{ row[header.key] || '---' }}\n                }\n              </td>\n            }\n          </tr>\n        }\n\n        @if ((!data || data.length < 1) && !isLoading) {\n          <tr>\n            <td\n              [attr.colspan]=\"headers.length\"\n              class=\"p-6 text-center text-gray-400 italic dark:text-gray-500\"\n            >\n              No se encontraron registros en el servidor.\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (showPagination) {\n    <div\n      class=\"p-4 flex items-center justify-between bg-gray-50 border-gray-300 border-t dark:bg-gray-800/50 dark:border-gray-700\"\n    >\n      <div class=\"text-sm text-gray-500 dark:text-gray-400\">\n        Mostrando p\u00E1gina\n        <span class=\"font-semibold text-gray-800 dark:text-white\">{{ currentPage }}</span> de\n        <span class=\"font-semibold text-gray-800 dark:text-white\">{{ totalPages }}</span>\n        <span class=\"ml-1\">({{ totalItems }} registros totales)</span>\n      </div>\n\n      <div class=\"flex gap-2\">\n        <button\n          (click)=\"changePage(-1)\"\n          [disabled]=\"currentPage === 1\"\n          class=\"flex items-center px-4 py-2 border rounded-lg bg-white text-sm font-medium hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-all dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 dark:text-white\"\n        >\n          Anterior\n        </button>\n        <button\n          (click)=\"changePage(1)\"\n          [disabled]=\"currentPage >= totalPages\"\n          class=\"flex items-center px-4 py-2 border rounded-lg bg-white text-sm font-medium hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-all dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 dark:text-white\"\n        >\n          Siguiente\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DynamicTableComponent, isStandalone: true, selector: "dynamic-table", inputs: { title: "title", data: "data", headers: "headers", columnComponents: "columnComponents", isLoading: "isLoading", totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", showPagination: "showPagination", showSearch: "showSearch", showTitle: "showTitle" }, outputs: { pageChange: "pageChange", searchChange: "searchChange" }, ngImport: i0, template: "<div\n  class=\"bg-white rounded-lg overflow-hidden border border-gray-200 dark:bg-gray-800 dark:border-gray-700\"\n>\n  @if (showTitle || showSearch) {\n    <div class=\"p-4 border-b border-gray-200 flex items-center justify-start dark:border-gray-700\">\n      @if (showTitle) {\n        <h2 class=\"text-lg font-semibold dark:text-white\">{{ title }}</h2>\n      }\n\n      @if (showSearch) {\n        <input\n          type=\"text\"\n          (input)=\"onSearch($event)\"\n          placeholder=\"Buscar...\"\n          class=\"ml-auto block w-sm rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500\"\n        />\n      }\n    </div>\n  }\n\n  <div class=\"overflow-x-auto\">\n    <table class=\"w-full text-left border-collapse\">\n      <thead class=\"bg-gray-100 text-gray-600 text-xs dark:bg-gray-700 dark:text-gray-300\">\n        <tr>\n          @for (header of headers; track header.key) {\n            <th class=\"p-3 border-b border-gray-300 whitespace-nowrap dark:border-gray-600\">\n              {{ header.label }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody class=\"text-gray-700 text-xs dark:text-gray-200\">\n        @if (isLoading) {\n          <tr\n            class=\"border-b even:bg-gray-100 border-gray-200 last:border-none transition-colors dark:even:bg-gray-700/50 dark:border-gray-700\"\n          >\n            @for (header of headers; track header.key) {\n              <td class=\"p-3\">\n                <div class=\"h-5 bg-gray-200 rounded animate-pulse w-full dark:bg-gray-600\"></div>\n              </td>\n            }\n          </tr>\n        }\n\n        @for (row of data; track row) {\n          <tr\n            class=\"hover:bg-gray-200 border-b even:bg-gray-100 border-gray-200 last:border-none transition-colors dark:hover:bg-gray-700 dark:even:bg-gray-700/50 dark:border-gray-700\"\n          >\n            @for (header of headers; track header.key) {\n              <td class=\"p-3 whitespace-nowrap\">\n                @if (columnComponents[header.key]) {\n                  <ng-container\n                    *ngComponentOutlet=\"columnComponents[header.key]; injector: createInjector(row)\"\n                  ></ng-container>\n                } @else {\n                  {{ row[header.key] || '---' }}\n                }\n              </td>\n            }\n          </tr>\n        }\n\n        @if ((!data || data.length < 1) && !isLoading) {\n          <tr>\n            <td\n              [attr.colspan]=\"headers.length\"\n              class=\"p-6 text-center text-gray-400 italic dark:text-gray-500\"\n            >\n              No se encontraron registros en el servidor.\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (showPagination) {\n    <div\n      class=\"p-4 flex items-center justify-between bg-gray-50 border-gray-300 border-t dark:bg-gray-800/50 dark:border-gray-700\"\n    >\n      <div class=\"text-sm text-gray-500 dark:text-gray-400\">\n        Mostrando p\u00E1gina\n        <span class=\"font-semibold text-gray-800 dark:text-white\">{{ currentPage }}</span> de\n        <span class=\"font-semibold text-gray-800 dark:text-white\">{{ totalPages }}</span>\n        <span class=\"ml-1\">({{ totalItems }} registros totales)</span>\n      </div>\n\n      <div class=\"flex gap-2\">\n        <button\n          (click)=\"changePage(-1)\"\n          [disabled]=\"currentPage === 1\"\n          class=\"flex items-center px-4 py-2 border rounded-lg bg-white text-sm font-medium hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-all dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 dark:text-white\"\n        >\n          Anterior\n        </button>\n        <button\n          (click)=\"changePage(1)\"\n          [disabled]=\"currentPage >= totalPages\"\n          class=\"flex items-center px-4 py-2 border rounded-lg bg-white text-sm font-medium hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-all dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 dark:text-white\"\n        >\n          Siguiente\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
@@ -1699,7 +1713,7 @@ class LanguageSwitcherComponent {
         </button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
             type: Component,
@@ -1919,7 +1933,7 @@ class FormTextareaComponent {
         return baseClasses;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormTextareaComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormTextareaComponent, isStandalone: true, selector: "form-textarea", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", minlength: "minlength", maxlength: "maxlength", rows: "rows", cols: "cols", fieldGroupClass: "fieldGroupClass" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <textarea\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [minlength]=\"minlength\"\n      [maxlength]=\"maxlength\"\n      [rows]=\"rows\"\n      [cols]=\"cols\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [class.bg-white]=\"!readonly\"\n      [class.bg-gray-200]=\"readonly\"\n      [class.cursor-not-allowed]=\"readonly\"\n      [class]=\"inputClasses\"\n    ></textarea>\n  </div>\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormTextareaComponent, isStandalone: true, selector: "form-textarea", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", minlength: "minlength", maxlength: "maxlength", rows: "rows", cols: "cols", fieldGroupClass: "fieldGroupClass" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <textarea\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [minlength]=\"minlength\"\n      [maxlength]=\"maxlength\"\n      [rows]=\"rows\"\n      [cols]=\"cols\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [class.bg-white]=\"!readonly\"\n      [class.bg-gray-200]=\"readonly\"\n      [class.cursor-not-allowed]=\"readonly\"\n      [class]=\"inputClasses\"\n    ></textarea>\n  </div>\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormTextareaComponent, decorators: [{
             type: Component,
@@ -2045,7 +2059,7 @@ class FormEditorComponent {
         return baseClasses;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormEditorComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormEditorComponent, isStandalone: true, selector: "form-editor", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", toolbar: "toolbar", fieldGroupClass: "fieldGroupClass" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    class=\"relative\"\n    [class.opacity-50]=\"disabled\"\n    [class.pointer-events-none]=\"disabled\"\n    [class.cursor-not-allowed]=\"disabled\"\n  >\n    <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholder\">\n      <ngx-editor-menu\n        [editor]=\"editor\"\n        [toolbar]=\"toolbar\"\n        [disabled]=\"disabled\"\n      ></ngx-editor-menu>\n    </ngx-editor>\n  </div>\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormEditorComponent, isStandalone: true, selector: "form-editor", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", toolbar: "toolbar", fieldGroupClass: "fieldGroupClass" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    class=\"relative\"\n    [class.opacity-50]=\"disabled\"\n    [class.pointer-events-none]=\"disabled\"\n    [class.cursor-not-allowed]=\"disabled\"\n  >\n    <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholder\">\n      <ngx-editor-menu\n        [editor]=\"editor\"\n        [toolbar]=\"toolbar\"\n        [disabled]=\"disabled\"\n      ></ngx-editor-menu>\n    </ngx-editor>\n  </div>\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormEditorComponent, decorators: [{
             type: Component,
@@ -2340,7 +2354,7 @@ class DateInputComponent {
         return baseClasses;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateInputComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DateInputComponent, isStandalone: true, selector: "date-input", inputs: { label: "label", type: "type", includeTime: "includeTime", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", min: "min", max: "max", fieldGroupClass: "fieldGroupClass", dateFormat: "dateFormat" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [type]=\"includeTime ? 'datetime-local' : type\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [disabled]=\"disabled\"\n      [class]=\"inputClasses\"\n      [readonly]=\"readonly\"\n    />\n  </div>\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DateInputComponent, isStandalone: true, selector: "date-input", inputs: { label: "label", type: "type", includeTime: "includeTime", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", min: "min", max: "max", fieldGroupClass: "fieldGroupClass", dateFormat: "dateFormat" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [type]=\"includeTime ? 'datetime-local' : type\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [disabled]=\"disabled\"\n      [class]=\"inputClasses\"\n      [readonly]=\"readonly\"\n    />\n  </div>\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -2976,7 +2990,7 @@ class AsyncSelectComponent {
                 useExisting: forwardRef(() => AsyncSelectComponent),
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n  @if (label) {\n    <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n      {{ label }}\n      @if (required) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <ng-select\n    [items]=\"displayItems\"\n    [multiple]=\"multiple\"\n    [searchable]=\"searchable\"\n    [clearable]=\"clearable\"\n    [placeholder]=\"placeholder\"\n    [loading]=\"loading || loadingSignal()\"\n    [virtualScroll]=\"virtualScroll\"\n    [notFoundText]=\"notFoundText\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [ngModel]=\"value\"\n    [typeahead]=\"typeahead$\"\n    [closeOnSelect]=\"!multiple\"\n    (ngModelChange)=\"onSelectChange($event)\"\n    (blur)=\"onTouched()\"\n    (search)=\"onSearch($event)\"\n  />\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n  @if (label) {\n    <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">\n      {{ label }}\n      @if (required) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <ng-select\n    [items]=\"displayItems\"\n    [multiple]=\"multiple\"\n    [searchable]=\"searchable\"\n    [clearable]=\"clearable\"\n    [placeholder]=\"placeholder\"\n    [loading]=\"loading || loadingSignal()\"\n    [virtualScroll]=\"virtualScroll\"\n    [notFoundText]=\"notFoundText\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [ngModel]=\"value\"\n    [typeahead]=\"typeahead$\"\n    [closeOnSelect]=\"!multiple\"\n    (ngModelChange)=\"onSelectChange($event)\"\n    (blur)=\"onTouched()\"\n    (search)=\"onSearch($event)\"\n  />\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2$2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AsyncSelectComponent, decorators: [{
             type: Component,
@@ -4576,11 +4590,286 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Output
             }] } });
 
+class DaySelectorGridComponent {
+    platformId;
+    performanceService;
+    listEventService;
+    toastService;
+    displayMode = 'grid';
+    loadingData = signal(true, ...(ngDevMode ? [{ debugName: "loadingData" }] : []));
+    days = signal([], ...(ngDevMode ? [{ debugName: "days" }] : []));
+    carouselTrack;
+    constructor(platformId, performanceService, listEventService, toastService) {
+        this.platformId = platformId;
+        this.performanceService = performanceService;
+        this.listEventService = listEventService;
+        this.toastService = toastService;
+        effect(() => {
+            this.listEventService.filteredShowId();
+            if (isPlatformBrowser(this.platformId)) {
+                this.days.set([]);
+                this.listEventService.setSelectedDay(null);
+                this.loadData();
+            }
+        });
+    }
+    loadData() {
+        this.loadingData.set(true);
+        const showId = this.listEventService.filteredShowId() ?? undefined;
+        this.performanceService.fetchAvailableDays({ show_id: showId }).subscribe({
+            next: (response) => {
+                const days = response?.data?.days ?? [];
+                this.days.set(days);
+                if (days.length > 0 && !this.listEventService.selectedDay()) {
+                    this.listEventService.setSelectedDay(days[0]);
+                }
+                this.loadingData.set(false);
+            },
+            error: () => {
+                this.toastService.show('Error al cargar los datos de la función.', 'error');
+                this.loadingData.set(false);
+            },
+        });
+    }
+    isDayActive(day) {
+        return day.date === this.listEventService.selectedDay()?.date;
+    }
+    onToggle(day) {
+        if (this.isDayActive(day))
+            return;
+        this.listEventService.setSelectedPerformance(null);
+        this.listEventService.setSelectedDay(day);
+    }
+    scrollCarousel(direction) {
+        const track = this.carouselTrack?.nativeElement;
+        if (!track)
+            return;
+        const item = track.children[0];
+        const itemWidth = item?.offsetWidth ?? 112;
+        track.scrollBy({ left: direction * (itemWidth + 8), behavior: 'smooth' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DaySelectorGridComponent, deps: [{ token: PLATFORM_ID }, { token: PerformanceService }, { token: PerformancesListEventsService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DaySelectorGridComponent, isStandalone: true, selector: "day-selector-grid", inputs: { displayMode: "displayMode" }, viewQueries: [{ propertyName: "carouselTrack", first: true, predicate: ["carouselTrack"], descendants: true }], ngImport: i0, template: "@if (loadingData()) {\n  <div class=\"mt-3 grid grid-cols-4 gap-2 sm:grid-cols-10\">\n    @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track $index) {\n      <div\n        class=\"h-26 border border-neutral-200 dark:border-white/10 bg-neutral-100 dark:bg-white/[0.03] rounded-xl animate-pulse w-full\"\n      ></div>\n    }\n  </div>\n}\n\n@if (!loadingData() && days().length < 1) {\n  <app-alert\n    type=\"error\"\n    text=\"No se encontraron funciones disponibles\"\n    size=\"md\"\n    [closeable]=\"false\"\n  />\n}\n\n@if (days().length > 0) {\n  <p class=\"text-[11px] font-semibold tracking-[0.25em] text-neutral-500 uppercase\">\n    Selecciona un d\u00EDa\n  </p>\n}\n\n@if (displayMode === 'carousel' && days().length > 0) {\n  <div class=\"relative mt-3\">\n    <button\n      type=\"button\"\n      (click)=\"scrollCarousel(-1)\"\n      class=\"absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-8 h-8 rounded-full bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-white/10 shadow-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 transition cursor-pointer\"\n      aria-label=\"Anterior\"\n    >\n      <i class=\"ri-arrow-left-s-line text-lg\"></i>\n    </button>\n    <div\n      #carouselTrack\n      class=\"flex overflow-x-auto snap-x snap-mandatory gap-2 px-10 py-1 scroll-smooth [&::-webkit-scrollbar]:hidden\"\n    >\n      @for (item of days(); track $index) {\n        <button\n          (click)=\"onToggle(item)\"\n          class=\"snap-start flex-shrink-0 w-28 flex flex-col items-center cursor-pointer rounded-xl border border-neutral-200 dark:border-white/10 bg-neutral-50 dark:bg-white/[0.03] px-2 py-3 transition hover:border-neutral-300 dark:hover:border-white/25 hover:bg-neutral-200 dark:hover:bg-white/[0.06] text-neutral-800 dark:text-white\"\n          [class.glow-red]=\"isDayActive(item)\"\n          [class.border-red-500]=\"isDayActive(item)\"\n          [class.bg-red-500]=\"isDayActive(item)\"\n          [class.text-white]=\"isDayActive(item)\"\n          [class.hover:bg-red-600]=\"isDayActive(item)\"\n          [class.dark:hover:text-white]=\"isDayActive(item)\"\n        >\n          <span\n            class=\"text-[10px] font-semibold tracking-widest text-neutral-500 dark:text-white/80\"\n            [class.text-white]=\"isDayActive(item)\"\n          >\n            {{ item.date | date: 'EEE' | uppercase }}\n          </span>\n          <span class=\"my-0.5 text-2xl font-extrabold leading-none\">\n            {{ item.date | date: 'dd' }}\n          </span>\n          <span\n            class=\"text-[10px] font-medium tracking-widest text-neutral-500 dark:text-white/80\"\n            [class.text-white]=\"isDayActive(item)\"\n          >\n            {{ item.date | date: 'MMM' }}\n          </span>\n          <span\n            class=\"mt-2 rounded-full bg-neutral-200 dark:bg-black/25 px-1.5 py-px text-[9px] font-semibold\"\n            [class.text-red-500]=\"isDayActive(item)\"\n            [class.dark:text-white]=\"isDayActive(item)\"\n          >\n            {{ item.count | number: '1.0-2' }}\n          </span>\n        </button>\n      }\n    </div>\n    <button\n      type=\"button\"\n      (click)=\"scrollCarousel(1)\"\n      class=\"absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-8 h-8 rounded-full bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-white/10 shadow-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 transition cursor-pointer\"\n      aria-label=\"Siguiente\"\n    >\n      <i class=\"ri-arrow-right-s-line text-lg\"></i>\n    </button>\n  </div>\n} @else {\n  <div class=\"mt-3 grid grid-cols-4 gap-2 sm:grid-cols-10\">\n    @for (item of days(); track $index) {\n      <button\n        (click)=\"onToggle(item)\"\n        class=\"flex flex-col items-center cursor-pointer rounded-xl border border-neutral-200 dark:border-white/10 bg-neutral-50 dark:bg-white/[0.03] px-2 py-3 transition hover:border-neutral-300 dark:hover:border-white/25 hover:bg-neutral-200 dark:hover:bg-white/[0.06] text-neutral-800 dark:text-white\"\n        [class.glow-red]=\"isDayActive(item)\"\n        [class.border-red-500]=\"isDayActive(item)\"\n        [class.bg-red-500]=\"isDayActive(item)\"\n        [class.text-white]=\"isDayActive(item)\"\n        [class.hover:bg-red-600]=\"isDayActive(item)\"\n        [class.dark:hover:text-white]=\"isDayActive(item)\"\n      >\n        <span\n          class=\"text-[10px] font-semibold tracking-widest text-neutral-500 dark:text-white/80\"\n          [class.text-white]=\"isDayActive(item)\"\n        >\n          {{ item.date | date: 'EEE' | uppercase }}\n        </span>\n        <span class=\"my-0.5 text-2xl font-extrabold leading-none\">\n          {{ item.date | date: 'dd' }}\n        </span>\n        <span\n          class=\"text-[10px] font-medium tracking-widest text-neutral-500 dark:text-white/80\"\n          [class.text-white]=\"isDayActive(item)\"\n        >\n          {{ item.date | date: 'MMM' }}\n        </span>\n        <span\n          class=\"mt-2 rounded-full bg-neutral-200 dark:bg-black/25 px-1.5 py-px text-[9px] font-semibold\"\n          [class.text-red-500]=\"isDayActive(item)\"\n          [class.dark:text-white]=\"isDayActive(item)\"\n        >\n          {{ item.count | number: '1.0-2' }}\n        </span>\n      </button>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DaySelectorGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'day-selector-grid', standalone: true, imports: [CommonModule, AppAlertComponent], template: "@if (loadingData()) {\n  <div class=\"mt-3 grid grid-cols-4 gap-2 sm:grid-cols-10\">\n    @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track $index) {\n      <div\n        class=\"h-26 border border-neutral-200 dark:border-white/10 bg-neutral-100 dark:bg-white/[0.03] rounded-xl animate-pulse w-full\"\n      ></div>\n    }\n  </div>\n}\n\n@if (!loadingData() && days().length < 1) {\n  <app-alert\n    type=\"error\"\n    text=\"No se encontraron funciones disponibles\"\n    size=\"md\"\n    [closeable]=\"false\"\n  />\n}\n\n@if (days().length > 0) {\n  <p class=\"text-[11px] font-semibold tracking-[0.25em] text-neutral-500 uppercase\">\n    Selecciona un d\u00EDa\n  </p>\n}\n\n@if (displayMode === 'carousel' && days().length > 0) {\n  <div class=\"relative mt-3\">\n    <button\n      type=\"button\"\n      (click)=\"scrollCarousel(-1)\"\n      class=\"absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-8 h-8 rounded-full bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-white/10 shadow-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 transition cursor-pointer\"\n      aria-label=\"Anterior\"\n    >\n      <i class=\"ri-arrow-left-s-line text-lg\"></i>\n    </button>\n    <div\n      #carouselTrack\n      class=\"flex overflow-x-auto snap-x snap-mandatory gap-2 px-10 py-1 scroll-smooth [&::-webkit-scrollbar]:hidden\"\n    >\n      @for (item of days(); track $index) {\n        <button\n          (click)=\"onToggle(item)\"\n          class=\"snap-start flex-shrink-0 w-28 flex flex-col items-center cursor-pointer rounded-xl border border-neutral-200 dark:border-white/10 bg-neutral-50 dark:bg-white/[0.03] px-2 py-3 transition hover:border-neutral-300 dark:hover:border-white/25 hover:bg-neutral-200 dark:hover:bg-white/[0.06] text-neutral-800 dark:text-white\"\n          [class.glow-red]=\"isDayActive(item)\"\n          [class.border-red-500]=\"isDayActive(item)\"\n          [class.bg-red-500]=\"isDayActive(item)\"\n          [class.text-white]=\"isDayActive(item)\"\n          [class.hover:bg-red-600]=\"isDayActive(item)\"\n          [class.dark:hover:text-white]=\"isDayActive(item)\"\n        >\n          <span\n            class=\"text-[10px] font-semibold tracking-widest text-neutral-500 dark:text-white/80\"\n            [class.text-white]=\"isDayActive(item)\"\n          >\n            {{ item.date | date: 'EEE' | uppercase }}\n          </span>\n          <span class=\"my-0.5 text-2xl font-extrabold leading-none\">\n            {{ item.date | date: 'dd' }}\n          </span>\n          <span\n            class=\"text-[10px] font-medium tracking-widest text-neutral-500 dark:text-white/80\"\n            [class.text-white]=\"isDayActive(item)\"\n          >\n            {{ item.date | date: 'MMM' }}\n          </span>\n          <span\n            class=\"mt-2 rounded-full bg-neutral-200 dark:bg-black/25 px-1.5 py-px text-[9px] font-semibold\"\n            [class.text-red-500]=\"isDayActive(item)\"\n            [class.dark:text-white]=\"isDayActive(item)\"\n          >\n            {{ item.count | number: '1.0-2' }}\n          </span>\n        </button>\n      }\n    </div>\n    <button\n      type=\"button\"\n      (click)=\"scrollCarousel(1)\"\n      class=\"absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-8 h-8 rounded-full bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-white/10 shadow-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 transition cursor-pointer\"\n      aria-label=\"Siguiente\"\n    >\n      <i class=\"ri-arrow-right-s-line text-lg\"></i>\n    </button>\n  </div>\n} @else {\n  <div class=\"mt-3 grid grid-cols-4 gap-2 sm:grid-cols-10\">\n    @for (item of days(); track $index) {\n      <button\n        (click)=\"onToggle(item)\"\n        class=\"flex flex-col items-center cursor-pointer rounded-xl border border-neutral-200 dark:border-white/10 bg-neutral-50 dark:bg-white/[0.03] px-2 py-3 transition hover:border-neutral-300 dark:hover:border-white/25 hover:bg-neutral-200 dark:hover:bg-white/[0.06] text-neutral-800 dark:text-white\"\n        [class.glow-red]=\"isDayActive(item)\"\n        [class.border-red-500]=\"isDayActive(item)\"\n        [class.bg-red-500]=\"isDayActive(item)\"\n        [class.text-white]=\"isDayActive(item)\"\n        [class.hover:bg-red-600]=\"isDayActive(item)\"\n        [class.dark:hover:text-white]=\"isDayActive(item)\"\n      >\n        <span\n          class=\"text-[10px] font-semibold tracking-widest text-neutral-500 dark:text-white/80\"\n          [class.text-white]=\"isDayActive(item)\"\n        >\n          {{ item.date | date: 'EEE' | uppercase }}\n        </span>\n        <span class=\"my-0.5 text-2xl font-extrabold leading-none\">\n          {{ item.date | date: 'dd' }}\n        </span>\n        <span\n          class=\"text-[10px] font-medium tracking-widest text-neutral-500 dark:text-white/80\"\n          [class.text-white]=\"isDayActive(item)\"\n        >\n          {{ item.date | date: 'MMM' }}\n        </span>\n        <span\n          class=\"mt-2 rounded-full bg-neutral-200 dark:bg-black/25 px-1.5 py-px text-[9px] font-semibold\"\n          [class.text-red-500]=\"isDayActive(item)\"\n          [class.dark:text-white]=\"isDayActive(item)\"\n        >\n          {{ item.count | number: '1.0-2' }}\n        </span>\n      </button>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: PerformanceService }, { type: PerformancesListEventsService }, { type: ToastService }], propDecorators: { displayMode: [{
+                type: Input
+            }], carouselTrack: [{
+                type: ViewChild,
+                args: ['carouselTrack']
+            }] } });
+
+class PerformanceCardComponent {
+    listEventService;
+    card;
+    constructor(listEventService) {
+        this.listEventService = listEventService;
+    }
+    onSelect() {
+        this.listEventService.setSelectedPerformance(this.card);
+    }
+    isSelected() {
+        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" }, ngImport: i0, template: "<div\n  class=\"flex flex-col sm:flex-row items-center justify-between gap-4 rounded-2xl border px-5 py-4 transition\"\n  [class.border-neutral-200]=\"!isSelected()\"\n  [class.dark:border-neutral-700]=\"!isSelected()\"\n  [class.bg-neutral-50]=\"!isSelected()\"\n  [class.dark:bg-neutral-900]=\"!isSelected()\"\n  [class.hover:border-neutral-300]=\"!isSelected()\"\n  [class.dark:hover:border-neutral-600]=\"!isSelected()\"\n  [class.border-brand]=\"isSelected()\"\n  [class.bg-red-500/[0.08]]=\"isSelected()\"\n  [class.glow-red]=\"isSelected()\"\n>\n  <div class=\"flex rounded-sm overflow-hidden w-full h-auto min-h-20 sm:h-20 sm:w-20\">\n    @if (card.show.images && card.show.images.length > 0) {\n      <img\n        [src]=\"card.show.images[0].full_url\"\n        class=\"object-contain object-center max-h-full max-w-full mx-auto\"\n      />\n    } @else {\n      <span class=\"flex bg-gray-200 h-20 w-full animate-pulse\"></span>\n    }\n  </div>\n\n  <div class=\"flex flex-col flex-1 w-full\">\n    <div\n      class=\"text-2xl font-extrabold leading-none\"\n      [class.text-neutral-800]=\"!isSelected()\"\n      [class.dark:text-neutral-200]=\"!isSelected()\"\n      [class.text-neutral-900]=\"isSelected()\"\n      [class.dark:text-neutral-100]=\"isSelected()\"\n    >\n      {{ card.show.title }}\n    </div>\n\n    <div class=\"leading-none\">\n      <span class=\"text-sm text-neutral-500 dark:text-neutral-400\">\n        {{ card.start_time | date: `EEEE` | titlecase }}\n        {{ card.start_time | date: `dd 'de' MMMM,` }}\n      </span>\n\n      <span class=\"font-extrabold text-lg text-neutral-800 dark:text-neutral-200\">\n        {{ card.start_time | date: `hh:mm` }}\n      </span>\n\n      <span\n        class=\"font-extrabold text-sm\"\n        [class.text-neutral-800]=\"!isSelected()\"\n        [class.dark:text-white]=\"!isSelected()\"\n        [class.text-red-500]=\"isSelected()\"\n      >\n        {{ card.start_time | date: 'a' }}\n      </span>\n    </div>\n\n    <div class=\"text-sm text-neutral-500 dark:text-neutral-400 leading-none\">\n      Desde\n      <span class=\"text-neutral-600 dark:text-neutral-300 font-semibold\">\n        ${{ card.zone_price_cheapest | number: '1.0-2' }}\n      </span>\n    </div>\n  </div>\n\n  <div class=\"flex flex-col gap-2 w-full sm:w-[200px]\">\n    <app-link-button\n      [route]=\"`/admin/performances/${card.id}/reservation`\"\n      text=\"Comprar entradas\"\n      icon=\"ri-coupon-line\"\n      variant=\"primary\"\n      size=\"xs\"\n    />\n  </div>\n</div>\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: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'performance-card', standalone: true, imports: [CommonModule, AppLinkButtonComponent], template: "<div\n  class=\"flex flex-col sm:flex-row items-center justify-between gap-4 rounded-2xl border px-5 py-4 transition\"\n  [class.border-neutral-200]=\"!isSelected()\"\n  [class.dark:border-neutral-700]=\"!isSelected()\"\n  [class.bg-neutral-50]=\"!isSelected()\"\n  [class.dark:bg-neutral-900]=\"!isSelected()\"\n  [class.hover:border-neutral-300]=\"!isSelected()\"\n  [class.dark:hover:border-neutral-600]=\"!isSelected()\"\n  [class.border-brand]=\"isSelected()\"\n  [class.bg-red-500/[0.08]]=\"isSelected()\"\n  [class.glow-red]=\"isSelected()\"\n>\n  <div class=\"flex rounded-sm overflow-hidden w-full h-auto min-h-20 sm:h-20 sm:w-20\">\n    @if (card.show.images && card.show.images.length > 0) {\n      <img\n        [src]=\"card.show.images[0].full_url\"\n        class=\"object-contain object-center max-h-full max-w-full mx-auto\"\n      />\n    } @else {\n      <span class=\"flex bg-gray-200 h-20 w-full animate-pulse\"></span>\n    }\n  </div>\n\n  <div class=\"flex flex-col flex-1 w-full\">\n    <div\n      class=\"text-2xl font-extrabold leading-none\"\n      [class.text-neutral-800]=\"!isSelected()\"\n      [class.dark:text-neutral-200]=\"!isSelected()\"\n      [class.text-neutral-900]=\"isSelected()\"\n      [class.dark:text-neutral-100]=\"isSelected()\"\n    >\n      {{ card.show.title }}\n    </div>\n\n    <div class=\"leading-none\">\n      <span class=\"text-sm text-neutral-500 dark:text-neutral-400\">\n        {{ card.start_time | date: `EEEE` | titlecase }}\n        {{ card.start_time | date: `dd 'de' MMMM,` }}\n      </span>\n\n      <span class=\"font-extrabold text-lg text-neutral-800 dark:text-neutral-200\">\n        {{ card.start_time | date: `hh:mm` }}\n      </span>\n\n      <span\n        class=\"font-extrabold text-sm\"\n        [class.text-neutral-800]=\"!isSelected()\"\n        [class.dark:text-white]=\"!isSelected()\"\n        [class.text-red-500]=\"isSelected()\"\n      >\n        {{ card.start_time | date: 'a' }}\n      </span>\n    </div>\n\n    <div class=\"text-sm text-neutral-500 dark:text-neutral-400 leading-none\">\n      Desde\n      <span class=\"text-neutral-600 dark:text-neutral-300 font-semibold\">\n        ${{ card.zone_price_cheapest | number: '1.0-2' }}\n      </span>\n    </div>\n  </div>\n\n  <div class=\"flex flex-col gap-2 w-full sm:w-[200px]\">\n    <app-link-button\n      [route]=\"`/admin/performances/${card.id}/reservation`\"\n      text=\"Comprar entradas\"\n      icon=\"ri-coupon-line\"\n      variant=\"primary\"\n      size=\"xs\"\n    />\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: PerformancesListEventsService }], propDecorators: { card: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class PerformanceCardListComponent {
+    platformId;
+    performanceService;
+    listEventService;
+    toastService;
+    loadingData = signal(true, ...(ngDevMode ? [{ debugName: "loadingData" }] : []));
+    performances = signal([], ...(ngDevMode ? [{ debugName: "performances" }] : []));
+    constructor(platformId, performanceService, listEventService, toastService) {
+        this.platformId = platformId;
+        this.performanceService = performanceService;
+        this.listEventService = listEventService;
+        this.toastService = toastService;
+        effect(() => {
+            const date = this.listEventService.selectedDayDate();
+            if (date) {
+                this.loadData();
+            }
+        });
+        effect(() => {
+            this.listEventService.filteredShowId();
+            this.performances.set([]);
+            const date = this.listEventService.selectedDayDate();
+            if (date) {
+                this.loadData();
+            }
+        });
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.loadData();
+        }
+    }
+    loadData() {
+        this.loadingData.set(true);
+        const date = this.listEventService.selectedDayDate();
+        const showId = this.listEventService.filteredShowId() ?? undefined;
+        if (!date) {
+            this.loadingData.set(false);
+            return;
+        }
+        this.performanceService.fetchDailyPerformances({ date, show_id: showId }).subscribe({
+            next: (response) => {
+                this.performances.set(response?.data?.performances ?? []);
+                this.loadingData.set(false);
+            },
+            error: () => {
+                this.toastService.show('Error al cargar los datos de la función.', 'error');
+                this.loadingData.set(false);
+            },
+        });
+    }
+    get selectedDayDate() {
+        return this.listEventService.selectedDay()?.date ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceCardListComponent, deps: [{ token: PLATFORM_ID }, { token: PerformanceService }, { token: PerformancesListEventsService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PerformanceCardListComponent, isStandalone: true, selector: "performance-card-list", ngImport: i0, template: "@if (selectedDayDate) {\n  <p class=\"text-[11px] font-bold tracking-[0.25em] text-neutral-500 uppercase\">\n    <span>Funciones disponibles:</span>\n    <span class=\"text-neutral-500 dark:text-neutral-400\">\n      el {{ selectedDayDate | date: \"EEEE d 'de' MMMM\" }}\n    </span>\n  </p>\n}\n\n<div class=\"mt-4 flex flex-col gap-2 w-full\">\n  @if (loadingData()) {\n    @for (i of [1, 2]; track $index) {\n      <div\n        class=\"h-40 border border-neutral-200 dark:border-white/10 bg-neutral-100 dark:bg-white/[0.03] rounded-xl animate-pulse w-full\"\n      ></div>\n    }\n  }\n\n  @for (card of performances(); track $index) {\n    <performance-card [card]=\"card\" />\n  }\n</div>\n", dependencies: [{ kind: "component", type: PerformanceCardComponent, selector: "performance-card", inputs: ["card"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceCardListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'performance-card-list', standalone: true, imports: [PerformanceCardComponent, CommonModule], template: "@if (selectedDayDate) {\n  <p class=\"text-[11px] font-bold tracking-[0.25em] text-neutral-500 uppercase\">\n    <span>Funciones disponibles:</span>\n    <span class=\"text-neutral-500 dark:text-neutral-400\">\n      el {{ selectedDayDate | date: \"EEEE d 'de' MMMM\" }}\n    </span>\n  </p>\n}\n\n<div class=\"mt-4 flex flex-col gap-2 w-full\">\n  @if (loadingData()) {\n    @for (i of [1, 2]; track $index) {\n      <div\n        class=\"h-40 border border-neutral-200 dark:border-white/10 bg-neutral-100 dark:bg-white/[0.03] rounded-xl animate-pulse w-full\"\n      ></div>\n    }\n  }\n\n  @for (card of performances(); track $index) {\n    <performance-card [card]=\"card\" />\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: PerformanceService }, { type: PerformancesListEventsService }, { type: ToastService }] });
+
+class PerformanceStepperComponent {
+    stepLabel;
+    title;
+    highlight;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PerformanceStepperComponent, isStandalone: true, selector: "performance-stepper", inputs: { stepLabel: "stepLabel", title: "title", highlight: "highlight" }, ngImport: i0, template: "<div class=\"flex items-center gap-2 text-[11px] font-semibold tracking-[0.25em] text-red-500\">\n  <span class=\"h-px w-6 bg-red-500\"></span>\n  {{ stepLabel }}\n</div>\n\n<h1 class=\"mt-3 text-5xl font-black leading-none tracking-tight sm:text-6xl\">\n  <span class=\"text-neutral-800 dark:text-white\">{{ title }} </span\n  ><span class=\"text-red-500\">{{ highlight }}</span>\n</h1>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'performance-stepper', standalone: true, template: "<div class=\"flex items-center gap-2 text-[11px] font-semibold tracking-[0.25em] text-red-500\">\n  <span class=\"h-px w-6 bg-red-500\"></span>\n  {{ stepLabel }}\n</div>\n\n<h1 class=\"mt-3 text-5xl font-black leading-none tracking-tight sm:text-6xl\">\n  <span class=\"text-neutral-800 dark:text-white\">{{ title }} </span\n  ><span class=\"text-red-500\">{{ highlight }}</span>\n</h1>\n" }]
+        }], propDecorators: { stepLabel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], title: [{
+                type: Input,
+                args: [{ required: true }]
+            }], highlight: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ShowsFilterComponent {
+    platformId;
+    showService;
+    listEventService;
+    toastService;
+    router;
+    loadingData = signal(true, ...(ngDevMode ? [{ debugName: "loadingData" }] : []));
+    shows = signal([], ...(ngDevMode ? [{ debugName: "shows" }] : []));
+    constructor(platformId, showService, listEventService, toastService, router) {
+        this.platformId = platformId;
+        this.showService = showService;
+        this.listEventService = listEventService;
+        this.toastService = toastService;
+        this.router = router;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.loadData();
+        }
+    }
+    loadData() {
+        this.loadingData.set(true);
+        this.showService.fetchAvailableShows({}).subscribe({
+            next: (response) => {
+                this.shows.set(response?.data?.shows ?? []);
+                this.loadingData.set(false);
+            },
+            error: () => {
+                this.toastService.show('Error al cargar shows del filtro.', 'error');
+                this.loadingData.set(false);
+            },
+        });
+    }
+    isActive(showId) {
+        return this.listEventService.filteredShowId() === showId;
+    }
+    onFilter(show) {
+        const isCurrentlyActive = this.isActive(show.id);
+        if (isCurrentlyActive) {
+            this.listEventService.setFilteredShowId(null);
+            this.router.navigate([], {
+                queryParams: { show_id: null },
+                queryParamsHandling: 'merge',
+            });
+        }
+        else {
+            this.listEventService.setFilteredShowId(show.id);
+            this.router.navigate([], {
+                queryParams: { show_id: show.id },
+                queryParamsHandling: 'merge',
+            });
+        }
+        this.listEventService.setSelectedDay(null);
+        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=\"flex flex-col gap-2 w-full\">\n  @if (shows().length > 0) {\n    <p class=\"text-[11px] font-semibold tracking-[0.25em] text-neutral-500 uppercase\">\n      Filtrar por evento\n    </p>\n  }\n\n  @if (loadingData()) {\n    @for (i of [1, 2, 3]; track $index) {\n      <div\n        class=\"h-15 border border-neutral-200 dark:border-gray-500/10 bg-neutral-100 dark:bg-gray-500/[0.03] rounded-xl animate-pulse w-full\"\n      ></div>\n    }\n  }\n\n  @for (show of shows(); track $index) {\n    <div\n      class=\"flex items-center justify-between border-gray-500/10 bg-gray-500/[0.02] rounded-xl border px-3 py-3 w-full\"\n      [class.glow-red]=\"isActive(show.id)\"\n    >\n      <div class=\"flex items-center gap-3\">\n        <span class=\"h-10 w-10 rounded-sm overflow-hidden\">\n          @if (show.images.length > 0) {\n            <img\n              [src]=\"show.images[0].full_url\"\n              class=\"object-contain object-center max-h-full max-w-full mx-auto\"\n            />\n          } @else {\n            <span class=\"flex bg-gray-200 h-full w-full animate-pulse\"></span>\n          }\n        </span>\n\n        <div>\n          <div class=\"text-sm font-semibold text-gray-500\">{{ show.title }}</div>\n          @if (show.performances_quantity && show.performances_quantity > 0) {\n            <div class=\"text-[11px] text-neutral-500\">\n              {{ show.performances_quantity }} funciones\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"text-sm font-bold text-gray-500\">\n        @if (isActive(show.id)) {\n          <app-button\n            variant=\"terciary\"\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", dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowsFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shows-filter', standalone: true, imports: [AppButtonComponent, CommonModule], template: "<div class=\"flex flex-col gap-2 w-full\">\n  @if (shows().length > 0) {\n    <p class=\"text-[11px] font-semibold tracking-[0.25em] text-neutral-500 uppercase\">\n      Filtrar por evento\n    </p>\n  }\n\n  @if (loadingData()) {\n    @for (i of [1, 2, 3]; track $index) {\n      <div\n        class=\"h-15 border border-neutral-200 dark:border-gray-500/10 bg-neutral-100 dark:bg-gray-500/[0.03] rounded-xl animate-pulse w-full\"\n      ></div>\n    }\n  }\n\n  @for (show of shows(); track $index) {\n    <div\n      class=\"flex items-center justify-between border-gray-500/10 bg-gray-500/[0.02] rounded-xl border px-3 py-3 w-full\"\n      [class.glow-red]=\"isActive(show.id)\"\n    >\n      <div class=\"flex items-center gap-3\">\n        <span class=\"h-10 w-10 rounded-sm overflow-hidden\">\n          @if (show.images.length > 0) {\n            <img\n              [src]=\"show.images[0].full_url\"\n              class=\"object-contain object-center max-h-full max-w-full mx-auto\"\n            />\n          } @else {\n            <span class=\"flex bg-gray-200 h-full w-full animate-pulse\"></span>\n          }\n        </span>\n\n        <div>\n          <div class=\"text-sm font-semibold text-gray-500\">{{ show.title }}</div>\n          @if (show.performances_quantity && show.performances_quantity > 0) {\n            <div class=\"text-[11px] text-neutral-500\">\n              {{ show.performances_quantity }} funciones\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"text-sm font-bold text-gray-500\">\n        @if (isActive(show.id)) {\n          <app-button\n            variant=\"terciary\"\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" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: ShowService }, { type: PerformancesListEventsService }, { type: ToastService }, { type: i3.Router }] });
+
+class ZonePriceItemComponent {
+    zone;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ZonePriceItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ZonePriceItemComponent, isStandalone: true, selector: "zone-price-item", inputs: { zone: "zone" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between rounded-xl border border-white/10 bg-white/[0.02] px-4 py-3\"\n>\n  <div class=\"flex items-center gap-3\">\n    <span class=\"h-3 w-3 rounded-sm {{ zone.colorClass }}\"></span>\n    <div>\n      <div class=\"text-sm font-semibold text-white\">{{ zone.name }}</div>\n      <div class=\"text-[11px] text-neutral-500\">{{ zone.seatsAvailable }} sillas disponibles</div>\n    </div>\n  </div>\n  <div class=\"text-sm font-bold text-white\">{{ zone.price }}</div>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ZonePriceItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zone-price-item', standalone: true, template: "<div\n  class=\"flex items-center justify-between rounded-xl border border-white/10 bg-white/[0.02] px-4 py-3\"\n>\n  <div class=\"flex items-center gap-3\">\n    <span class=\"h-3 w-3 rounded-sm {{ zone.colorClass }}\"></span>\n    <div>\n      <div class=\"text-sm font-semibold text-white\">{{ zone.name }}</div>\n      <div class=\"text-[11px] text-neutral-500\">{{ zone.seatsAvailable }} sillas disponibles</div>\n    </div>\n  </div>\n  <div class=\"text-sm font-bold text-white\">{{ zone.price }}</div>\n</div>\n" }]
+        }], propDecorators: { zone: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ZonePriceListComponent {
+    zones;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ZonePriceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ZonePriceListComponent, isStandalone: true, selector: "zone-price-list", inputs: { zones: "zones" }, ngImport: i0, template: "<p class=\"text-[11px] font-semibold tracking-[0.25em] text-neutral-400\">ZONAS Y PRECIOS</p>\n\n<div class=\"mt-4 flex flex-col gap-2 w-full\">\n  @for (zone of zones; track $index) {\n    <zone-price-item [zone]=\"zone\" />\n  }\n</div>\n", dependencies: [{ kind: "component", type: ZonePriceItemComponent, selector: "zone-price-item", inputs: ["zone"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ZonePriceListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zone-price-list', standalone: true, imports: [ZonePriceItemComponent], template: "<p class=\"text-[11px] font-semibold tracking-[0.25em] text-neutral-400\">ZONAS Y PRECIOS</p>\n\n<div class=\"mt-4 flex flex-col gap-2 w-full\">\n  @for (zone of zones; track $index) {\n    <zone-price-item [zone]=\"zone\" />\n  }\n</div>\n" }]
+        }], propDecorators: { zones: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 // Config
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ADMIN_API_ROUTES, ALERT_BASE_CLASSES, ALERT_COLOR_CLASSES, ALERT_ICONS, ALERT_SIZE_CLASSES, AdminSelectComponent, AdminService, ApiService, AppAlertComponent, AppButtonComponent, AppLinkButtonComponent, AppModalComponent, AsyncSelectComponent, AuditInformationComponent, BASE_BUTTON_CLASSES, BASE_INPUT_CLASSES, BUTTON_SIZES_CLASSES, BUTTON_VARIANT_CLASSES, CITY_API_ENDPOINTS, COUNTRY_API_ENDPOINTS, CUSTOMERS_API_ROUTES, ChangePasswordFormComponent, ChangePasswordFormService, CitiesService, CitySelectComponent, ColorPickerComponent, CorporateBondStatus, CountrySelectComponent, CountryService, CouponApplicability, CouponDiscountType, CustomerSelectComponent, CustomerService, DateInputComponent, DateService, DeleteConfirmationComponent, DeleteConfirmationService, DynamicTableComponent, ERROR_INPUT_CLASSES, EndDateGreaterThanStartValidator, FORM_ERROR_MESSAGES, FileType, FileUploadComponent, FileUploadPreviewComponent, FormEditorComponent, FormInputComponent, FormSelectComponent, FormTextareaComponent, LanguageSwitcherComponent, LoadingModalService, LoadingmModalComponent, MinTodayValidator, MustMatchValidator, OrderItemType, OrderStatus, PERFORMANCES_API_ROUTES, PRICE_ZONES_API_ROUTES, PRODUCTS_API_ROUTES, PerformanceMultiSelectComponent, PerformanceSelectComponent, PerformanceService, PerformanceStatus, PerformanceTicketStatus, PerformancesListEventsService, PriceZoneEventService, PriceZoneFormModalService, PriceZoneSelectComponent, PriceZoneService, ProductMultiSelectComponent, ProductSelectComponent, ProductService, RoomMapElementOrientation, RoomMapElementType, SHOWS_API_ROUTES, STATE_API_ENDPOINTS, ShowMultiSelectComponent, ShowSelectComponent, ShowService, StateSelectComponent, StatesService, TICKERA_COMPONENTS_CONFIG, ToastService, ToggleSwitchComponent, VENUES_API_ROUTES, authInterceptor, formatCitiesResponseToSelect, getCustomerFullname, parseJsonToFormDataAdvanced, provideTickeraComponents, transformImageToFile };
+export { ADMIN_API_ROUTES, ALERT_BASE_CLASSES, ALERT_COLOR_CLASSES, ALERT_ICONS, ALERT_SIZE_CLASSES, AdminSelectComponent, AdminService, ApiService, AppAlertComponent, AppButtonComponent, AppLinkButtonComponent, AppModalComponent, AsyncSelectComponent, AuditInformationComponent, BASE_BUTTON_CLASSES, BASE_INPUT_CLASSES, BUTTON_SIZES_CLASSES, BUTTON_VARIANT_CLASSES, CITY_API_ENDPOINTS, COUNTRY_API_ENDPOINTS, CUSTOMERS_API_ROUTES, ChangePasswordFormComponent, ChangePasswordFormService, CitiesService, CitySelectComponent, ColorPickerComponent, CorporateBondStatus, CountrySelectComponent, CountryService, CouponApplicability, CouponDiscountType, CustomerSelectComponent, CustomerService, DateInputComponent, DateService, DaySelectorGridComponent, DeleteConfirmationComponent, DeleteConfirmationService, DynamicTableComponent, ERROR_INPUT_CLASSES, EndDateGreaterThanStartValidator, FORM_ERROR_MESSAGES, FileType, FileUploadComponent, FileUploadPreviewComponent, FormEditorComponent, FormInputComponent, FormSelectComponent, FormTextareaComponent, LanguageSwitcherComponent, LoadingModalService, LoadingmModalComponent, MinTodayValidator, MustMatchValidator, OrderItemType, OrderStatus, PERFORMANCES_API_ROUTES, PRICE_ZONES_API_ROUTES, PRODUCTS_API_ROUTES, PerformanceCardComponent, PerformanceCardListComponent, PerformanceMultiSelectComponent, PerformanceSelectComponent, PerformanceService, PerformanceStatus, PerformanceStepperComponent, PerformanceTicketStatus, PerformancesListEventsService, PriceZoneEventService, PriceZoneFormModalService, PriceZoneSelectComponent, PriceZoneService, ProductMultiSelectComponent, ProductSelectComponent, ProductService, RoomMapElementOrientation, RoomMapElementType, SHOWS_API_ROUTES, STATE_API_ENDPOINTS, ShowMultiSelectComponent, ShowSelectComponent, ShowService, ShowsFilterComponent, StateSelectComponent, StatesService, TICKERA_COMPONENTS_CONFIG, ToastService, ToggleSwitchComponent, VENUES_API_ROUTES, ZonePriceItemComponent, ZonePriceListComponent, authInterceptor, formatCitiesResponseToSelect, getCustomerFullname, parseJsonToFormDataAdvanced, provideTickeraComponents, transformImageToFile };
 //# sourceMappingURL=tickera-angular-components.mjs.map