tickera-angular-components 0.0.1-dev.0

package/fesm2022/tickera-angular-components.mjs

@@ -0,0 +1,4586 @@
+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 * 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 { 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 { 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 { NgSelectModule } from '@ng-select/ng-select';
+
+const TICKERA_COMPONENTS_CONFIG = new InjectionToken('TICKERA_COMPONENTS_CONFIG');
+function provideTickeraComponents(config) {
+    return makeEnvironmentProviders([{ provide: TICKERA_COMPONENTS_CONFIG, useValue: config }]);
+}
+
+const ALERT_BASE_CLASSES = 'border rounded relative flex items-center gap-2 px-4 py-2';
+const ALERT_COLOR_CLASSES = {
+    success: 'bg-green-100 border-green-400 text-green-700',
+    error: 'bg-red-100 border-red-400 text-red-700',
+    warning: 'bg-yellow-100 border-yellow-400 text-yellow-700',
+    info: 'bg-blue-100 border-blue-400 text-blue-700',
+};
+const ALERT_SIZE_CLASSES = {
+    xs: 'px-2 py-1 text-xs',
+    sm: 'px-4 py-2 text-sm',
+    md: 'px-6 py-3 text-base',
+    lg: 'px-8 py-4 text-lg',
+};
+const ALERT_ICONS = {
+    success: 'ri-check-line',
+    error: 'ri-error-warning-line',
+    warning: 'ri-alert-line',
+    info: 'ri-info-line',
+};
+
+const BUTTON_VARIANT_CLASSES = {
+    primary: 'bg-red-600 hover:bg-red-700 focus:ring-red-500 text-white',
+    secondary: 'bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 text-white',
+    terciary: 'bg-gray-500 hover:bg-gray-600 focus:ring-gray-500 text-white',
+    success: 'bg-green-600 hover:bg-green-700 focus:ring-green-500 text-green-900',
+    transparent: 'bg-transparent hover:bg-gray-100 focus:ring-gray-500 text-gray-700 ',
+};
+const BASE_BUTTON_CLASSES = [
+    'w-full',
+    'cursor-pointer',
+    'flex',
+    'justify-center',
+    'gap-2',
+    'border',
+    'border-transparent',
+    'rounded-md',
+    'font-medium',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-offset-2',
+    'disabled:opacity-50',
+    'disabled:cursor-not-allowed',
+].join(' ');
+const BUTTON_SIZES_CLASSES = {
+    xs: 'text-xs py-1 px-2',
+    sm: 'text-sm py-2 px-4',
+    md: 'text-base py-3 px-6',
+    lg: 'text-lg py-4 px-8',
+};
+
+const FORM_ERROR_MESSAGES = {
+    required: 'Este campo es requerido',
+    minlength: 'Debe tener al menos caracteres',
+    maxlength: 'Debe tener al menos caracteres',
+    pattern: 'El formato no es válido',
+    email: 'El formato no es válido',
+    mustMatch: 'Las contraseñas no coinciden',
+    matDatepickerMin: 'La fecha no puede ser anterior a la fecha mínima permitida',
+    matDatepickerMax: 'La fecha no puede ser posterior a la fecha máxima permitida',
+};
+
+const BASE_INPUT_CLASSES = [
+    'block',
+    'w-full',
+    'rounded-md',
+    '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',
+].join(' ');
+const ERROR_INPUT_CLASSES = BASE_INPUT_CLASSES + ' outline-red-500 dark:outline-red-500';
+
+const ADMIN_API_ROUTES = {
+    FIND_ALL: '/admins',
+    CREATE: '/admins/auth/register',
+    updateOne: (id) => `/admins/${id}`,
+    deleteOne: (id) => `/admins/${id}`,
+};
+
+const CITY_API_ENDPOINTS = {
+    findAll: '/cities',
+    create: '/cities',
+    findById: (id) => `/cities/${id}`,
+    update: (id) => `/cities/${id}`,
+    delete: (id) => `/cities/${id}`,
+};
+
+const COUNTRY_API_ENDPOINTS = {
+    findAll: '/countries',
+    create: '/countries',
+    findById: (id) => `/countries/${id}`,
+    update: (id) => `/countries/${id}`,
+    delete: (id) => `/countries/${id}`,
+};
+
+const STATE_API_ENDPOINTS = {
+    findAll: '/states',
+    create: '/states',
+    findById: (id) => `/states/${id}`,
+    update: (id) => `/states/${id}`,
+    delete: (id) => `/states/${id}`,
+};
+
+const PERFORMANCES_API_ROUTES = {
+    findAll: '/performances',
+    create: '/performances',
+    createBulk: '/performances/bulk',
+    findOneById: (id) => `/performances/${id}`,
+    findOneBookingData: (id) => `/performances/${id}/booking-data`,
+    update: (id) => `/performances/${id}`,
+    delete: (id) => `/performances/${id}`,
+    deleteMany: '/performances/bulk',
+    cancel: (id) => `/performances/${id}/cancel`,
+    publishInventory: (id) => `/performances/${id}/publish-inventory`,
+    reserve: (id) => `/performances/${id}/reserve`,
+    ticketQrToken: (uuid) => `/performances/tickets/${uuid}/qr-token`,
+    getAvailableDays: '/performances/available-days',
+    publicAvailablePerformances: '/public/performances/daily',
+};
+
+const PRODUCTS_API_ROUTES = {
+    FIND_ALL: '/products',
+    CREATE: '/products',
+    findOneById: (id) => `/products/${id}`,
+    update: (id) => `/products/${id}`,
+    delete: (id) => `/products/${id}`,
+};
+
+const SHOWS_API_ROUTES = {
+    findAll: '/shows',
+    create: '/shows',
+    findOneById: (id) => `/shows/${id}`,
+    update: (id) => `/shows/${id}`,
+    delete: (id) => `/shows/${id}`,
+    getImages: (id) => `/shows/${id}/images`,
+    uploadGallery: (id) => `/shows/${id}/images`,
+    deleteOneImage: (showId, imageId) => `/shows/${showId}/images/${imageId}`,
+    publicAvailablePerformances: '/public/shows/available',
+};
+
+const CUSTOMERS_API_ROUTES = {
+    findAll: '/customers',
+    create: '/customers/auth/register',
+    findOne: (id) => `/customers/${id}`,
+    update: (id) => `/customers/${id}`,
+    delete: (id) => `/customers/${id}`,
+};
+
+const PRICE_ZONES_API_ROUTES = {
+    FIND_ALL: '/price-zones',
+    CREATE: '/price-zones',
+    findOneById: (id) => `/price-zones/${id}`,
+    update: (id) => `/price-zones/${id}`,
+    delete: (id) => `/price-zones/${id}`,
+    updateElements: (id) => `/price-zones/${id}/elements`,
+    duplicate: (id) => `/price-zones/${id}/duplicate`,
+};
+
+const VENUES_API_ROUTES = {
+    findAll: '/venues',
+    create: '/venues',
+    findOneById: (id) => '/venues/' + id,
+    update: (id) => '/venues/' + id,
+    delete: (id) => '/venues/' + id,
+    getGallery: (id) => '/venues/' + id + '/images',
+    uploadGallery: (id) => '/venues/' + id + '/images',
+    deleteOneImage: (venueId, imageId) => '/venues/' + venueId + '/images/' + imageId,
+};
+
+var FileType;
+(function (FileType) {
+    FileType["IMAGE"] = "image";
+    FileType["PDF"] = "pdf";
+    FileType["EXCEL"] = "excel";
+    FileType["WORD"] = "word";
+    FileType["TEXT"] = "text";
+    FileType["DEFAULT"] = "default";
+})(FileType || (FileType = {}));
+
+var CouponApplicability;
+(function (CouponApplicability) {
+    CouponApplicability["GENERAL"] = "GENERAL";
+    CouponApplicability["CUSTOMER_EMAIL"] = "CUSTOMER_EMAIL";
+    CouponApplicability["MEMBERSHIP_TYPE"] = "MEMBERSHIP_TYPE";
+    CouponApplicability["SHOWS"] = "SHOWS";
+    CouponApplicability["PERFORMANCES"] = "PERFORMANCES";
+})(CouponApplicability || (CouponApplicability = {}));
+
+var CouponDiscountType;
+(function (CouponDiscountType) {
+    CouponDiscountType["PERCENTAGE"] = "PERCENTAGE";
+    CouponDiscountType["FIXED"] = "FIXED";
+})(CouponDiscountType || (CouponDiscountType = {}));
+
+var CorporateBondStatus;
+(function (CorporateBondStatus) {
+    CorporateBondStatus["ACTIVE"] = "ACTIVE";
+    CorporateBondStatus["INACTIVE"] = "INACTIVE";
+    CorporateBondStatus["EXPIRED"] = "EXPIRED";
+})(CorporateBondStatus || (CorporateBondStatus = {}));
+
+var PerformanceStatus;
+(function (PerformanceStatus) {
+    PerformanceStatus["ACTIVE"] = "active";
+    PerformanceStatus["CANCELLED"] = "cancelled";
+    PerformanceStatus["FINISHED"] = "finished";
+    PerformanceStatus["POSTPONED"] = "postponed";
+})(PerformanceStatus || (PerformanceStatus = {}));
+
+var PerformanceTicketStatus;
+(function (PerformanceTicketStatus) {
+    PerformanceTicketStatus["AVAILABLE"] = "available";
+    PerformanceTicketStatus["RESERVED"] = "reserved";
+    PerformanceTicketStatus["SOLD"] = "sold";
+    PerformanceTicketStatus["BLOCKED"] = "blocked";
+})(PerformanceTicketStatus || (PerformanceTicketStatus = {}));
+
+var RoomMapElementOrientation;
+(function (RoomMapElementOrientation) {
+    RoomMapElementOrientation["TOP"] = "top";
+    RoomMapElementOrientation["RIGHT"] = "right";
+    RoomMapElementOrientation["BOTTOM"] = "bottom";
+    RoomMapElementOrientation["LEFT"] = "left";
+    RoomMapElementOrientation["CENTER"] = "center";
+})(RoomMapElementOrientation || (RoomMapElementOrientation = {}));
+
+var RoomMapElementType;
+(function (RoomMapElementType) {
+    RoomMapElementType["SEAT_BLOCK"] = "seat_block";
+    RoomMapElementType["TABLE"] = "table";
+    RoomMapElementType["ZONE"] = "zone";
+    RoomMapElementType["EXIT"] = "exit";
+    RoomMapElementType["STAGE"] = "stage";
+    RoomMapElementType["PRODUCTION_AREA"] = "production_area";
+    RoomMapElementType["UNAVAILABLE_SPACE"] = "unavailable_space";
+    RoomMapElementType["STAIR"] = "stair";
+    RoomMapElementType["HALLWAY"] = "hallway";
+})(RoomMapElementType || (RoomMapElementType = {}));
+
+var OrderItemType;
+(function (OrderItemType) {
+    OrderItemType["TICKET"] = "TICKET";
+    OrderItemType["PRODUCT"] = "PRODUCT";
+})(OrderItemType || (OrderItemType = {}));
+
+var OrderStatus;
+(function (OrderStatus) {
+    OrderStatus["PENDING"] = "PENDING";
+    OrderStatus["COMPLETED"] = "COMPLETED";
+    OrderStatus["FAILED"] = "FAILED";
+    OrderStatus["CANCELLED"] = "CANCELLED";
+})(OrderStatus || (OrderStatus = {}));
+
+const getCustomerFullname = (customer) => {
+    return `${customer.first_name || ''} ${customer.last_name || ''}`.trim();
+};
+
+function parseJsonToFormDataAdvanced(imageGallery) {
+    const formData = new FormData();
+    if (!Array.isArray(imageGallery)) {
+        throw new Error('imageGallery debe ser un array');
+    }
+    if (imageGallery.length === 0) {
+        throw new Error('No hay imágenes para procesar');
+    }
+    if (imageGallery.length > 10) {
+        throw new Error('El backend acepta máximo 10 archivos por petición');
+    }
+    const processedFiles = [];
+    imageGallery.forEach((image, index) => {
+        try {
+            if (!image.name) {
+                throw new Error(`La imagen ${index + 1} no tiene nombre`);
+            }
+            if (!image.type || !image.type.startsWith('image/')) {
+                throw new Error(`La imagen ${index + 1} no tiene un tipo MIME válido`);
+            }
+            if (!image.preview) {
+                throw new Error(`La imagen ${index + 1} no tiene datos de preview`);
+            }
+            if (!image.preview.includes('data:image/') || !image.preview.includes('base64,')) {
+                throw new Error(`La imagen ${index + 1} no tiene un formato base64 válido`);
+            }
+            const base64Data = image.preview.split(',')[1];
+            const byteCharacters = atob(base64Data);
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            const blob = new Blob([byteArray], { type: image.type });
+            const file = new File([blob], image.name, {
+                type: image.type,
+                lastModified: Date.now(),
+            });
+            if (file.size === 0) {
+                throw new Error(`El archivo ${image.name} está vacío`);
+            }
+            formData.append('files', file);
+            processedFiles.push({
+                name: image.name,
+                size: file.size,
+                type: file.type,
+            });
+        }
+        catch (error) {
+            console.error(`Error procesando imagen ${index + 1}:`, error);
+            throw new Error(`Error procesando ${image.name || 'imagen ' + (index + 1)}: ${error?.message}`);
+        }
+    });
+    return formData;
+}
+
+const transformImageToFile = (image) => {
+    return {
+        preview: image.full_url,
+        name: image.original_name,
+        size: image.size,
+        type: image.mime_type,
+        extension: image.extension,
+    };
+};
+
+const formatCitiesResponseToSelect = (res) => {
+    if (!res.data.cities || res.data.cities.length < 1) {
+        return [];
+    }
+    return res.data.cities?.map(({ id, name, search_text }) => ({
+        value: id,
+        label: search_text ?? name,
+    }));
+};
+
+function MinTodayValidator(controlName) {
+    return (formGroup) => {
+        const group = formGroup;
+        const control = group.get(controlName);
+        if (!control || !control.value) {
+            return null;
+        }
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        let selectedDate;
+        if (control.value instanceof Date) {
+            selectedDate = new Date(control.value);
+        }
+        else if (typeof control.value === 'string') {
+            const [year, month, day] = control.value.split('-').map(Number);
+            selectedDate = new Date(Date.UTC(year, month - 1, day));
+        }
+        else {
+            return null;
+        }
+        selectedDate.setUTCHours(0, 0, 0, 0);
+        if (selectedDate < today) {
+            control.setErrors({ minToday: true });
+            return { minToday: true };
+        }
+        else {
+            const currentErrors = control.errors;
+            if (currentErrors) {
+                delete currentErrors['minToday'];
+                control.setErrors(Object.keys(currentErrors).length > 0 ? currentErrors : null);
+            }
+            return null;
+        }
+    };
+}
+function EndDateGreaterThanStartValidator(startDateControlName, endDateControlName) {
+    return (formGroup) => {
+        const group = formGroup;
+        const startDateControl = group.get(startDateControlName);
+        const endDateControl = group.get(endDateControlName);
+        if (!startDateControl || !endDateControl || !startDateControl.value || !endDateControl.value) {
+            return null;
+        }
+        let startDate;
+        let endDate;
+        if (startDateControl.value instanceof Date) {
+            startDate = new Date(startDateControl.value);
+        }
+        else if (typeof startDateControl.value === 'string') {
+            const [startYear, startMonth, startDay] = startDateControl.value.split('-').map(Number);
+            startDate = new Date(Date.UTC(startYear, startMonth - 1, startDay));
+        }
+        else {
+            return null;
+        }
+        if (endDateControl.value instanceof Date) {
+            endDate = new Date(endDateControl.value);
+        }
+        else if (typeof endDateControl.value === 'string') {
+            const [endYear, endMonth, endDay] = endDateControl.value.split('-').map(Number);
+            endDate = new Date(Date.UTC(endYear, endMonth - 1, endDay));
+        }
+        else {
+            return null;
+        }
+        startDate.setUTCHours(0, 0, 0, 0);
+        endDate.setUTCHours(0, 0, 0, 0);
+        if (endDate <= startDate) {
+            endDateControl.setErrors({ endDateGreaterThanStart: true });
+            return { endDateGreaterThanStart: true };
+        }
+        else {
+            const currentErrors = endDateControl.errors;
+            if (currentErrors) {
+                delete currentErrors['endDateGreaterThanStart'];
+                endDateControl.setErrors(Object.keys(currentErrors).length > 0 ? currentErrors : null);
+            }
+            return null;
+        }
+    };
+}
+
+function MustMatchValidator(controlName, matchingControlName) {
+    return (formGroup) => {
+        const group = formGroup;
+        const control = group.get(controlName);
+        const matchingControl = group.get(matchingControlName);
+        if (!control || !matchingControl) {
+            return null;
+        }
+        if (control.value !== matchingControl.value) {
+            matchingControl.setErrors({ mustMatch: true });
+            return { mustMatch: true };
+        }
+        else {
+            matchingControl.setErrors(null);
+            return null;
+        }
+    };
+}
+
+class ApiService {
+    http;
+    platformId;
+    config;
+    apiUrl;
+    constructor(http, platformId, config) {
+        this.http = http;
+        this.platformId = platformId;
+        this.config = config;
+        this.apiUrl = config.apiUrl;
+    }
+    getHeaders(contentType) {
+        let headers = new HttpHeaders();
+        if (contentType) {
+            headers = headers.set('Content-Type', contentType);
+        }
+        return headers;
+    }
+    validateContentType(body) {
+        if (body instanceof FormData) {
+            return undefined;
+        }
+        return 'application/json';
+    }
+    handleError(error) {
+        if (error.status === 401 && isPlatformBrowser(this.platformId)) {
+            const currentRoute = window.location.pathname;
+            if (currentRoute.startsWith('/admin')) {
+                localStorage.removeItem('access_token');
+                window.location.href = '/';
+            }
+        }
+        return throwError(() => error);
+    }
+    get(path) {
+        const headers = this.getHeaders(this.validateContentType(null));
+        return this.http
+            .get(`${this.apiUrl}${path}`, { headers })
+            .pipe(catchError(this.handleError.bind(this)));
+    }
+    post(path, body) {
+        const headers = this.getHeaders(this.validateContentType(body));
+        return this.http
+            .post(`${this.apiUrl}${path}`, body, { headers })
+            .pipe(catchError(this.handleError.bind(this)));
+    }
+    patch(path, body) {
+        const headers = this.getHeaders(this.validateContentType(body));
+        return this.http
+            .patch(`${this.apiUrl}${path}`, body, { headers })
+            .pipe(catchError(this.handleError.bind(this)));
+    }
+    put(path, body) {
+        const headers = this.getHeaders(this.validateContentType(body));
+        return this.http
+            .put(`${this.apiUrl}${path}`, body, { headers })
+            .pipe(catchError(this.handleError.bind(this)));
+    }
+    delete(path, body) {
+        const headers = this.getHeaders(this.validateContentType(body));
+        return this.http
+            .request('DELETE', `${this.apiUrl}${path}`, { headers, body })
+            .pipe(catchError(this.handleError.bind(this)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ApiService, deps: [{ token: i1.HttpClient }, { token: PLATFORM_ID }, { token: TICKERA_COMPONENTS_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TICKERA_COMPONENTS_CONFIG]
+                }] }] });
+
+class ToastService {
+    show(message, type = 'info') {
+        toast[type](message);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class LoadingModalService {
+    title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    get modalIsOpen() {
+        return this.isOpen;
+    }
+    open(title) {
+        this.title.set(title ?? 'Cargando...');
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LoadingModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LoadingModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LoadingModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DeleteConfirmationService {
+    title = signal('Confirmar eliminación', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    resourceName = signal('', ...(ngDevMode ? [{ debugName: "resourceName" }] : []));
+    confirmationText = signal('', ...(ngDevMode ? [{ debugName: "confirmationText" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    confirmDeleteCallback = null;
+    get modalTitle() {
+        return this.title;
+    }
+    get modalResourceName() {
+        return this.resourceName;
+    }
+    get modalConfirmationText() {
+        return this.confirmationText;
+    }
+    get modalIsOpen() {
+        return this.isOpen;
+    }
+    open({ title, resourceName, confirmationText }, confirmCallback) {
+        this.title.set(title);
+        this.resourceName.set(resourceName);
+        this.confirmationText.set(confirmationText);
+        this.confirmDeleteCallback = confirmCallback || null;
+        this.isOpen.set(true);
+    }
+    close() {
+        this.title.set('Confirmar eliminación');
+        this.resourceName.set('');
+        this.confirmationText.set('');
+        this.confirmDeleteCallback = null;
+        this.isOpen.set(false);
+    }
+    getConfirmDeleteCallback() {
+        return this.confirmDeleteCallback;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ChangePasswordFormService {
+    resourceId = signal(0, ...(ngDevMode ? [{ debugName: "resourceId" }] : []));
+    isCustomer = signal(false, ...(ngDevMode ? [{ debugName: "isCustomer" }] : []));
+    isAdmin = signal(false, ...(ngDevMode ? [{ debugName: "isAdmin" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    get modalIsOpen() {
+        return this.isOpen;
+    }
+    get isCustomerMode() {
+        return this.isCustomer;
+    }
+    get isAdminMode() {
+        return this.isAdmin;
+    }
+    get resourceIdValue() {
+        return this.resourceId;
+    }
+    open(resourceId, isAdmin = false) {
+        this.resourceId.set(resourceId);
+        this.isCustomer.set(!isAdmin);
+        this.isAdmin.set(isAdmin);
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChangePasswordFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChangePasswordFormService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChangePasswordFormService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DateService {
+    locale;
+    constructor(locale) {
+        this.locale = locale;
+    }
+    formatDate(date, format = 'yyyy-MM-dd') {
+        const formattedDate = formatDate(date, format, this.locale);
+        return formattedDate;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }] });
+
+class AdminService {
+    apiService;
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    fetchAdmins(page = 1, search = '', limit = 20) {
+        const queryParams = new URLSearchParams();
+        if (page)
+            queryParams.append('page', page.toString());
+        if (search)
+            queryParams.append('search', search);
+        if (limit)
+            queryParams.append('limit', limit.toString());
+        const queryString = queryParams.toString();
+        const apiRoute = `${ADMIN_API_ROUTES.FIND_ALL}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    deleteOne(id) {
+        return this.apiService.delete(ADMIN_API_ROUTES.deleteOne(id));
+    }
+    createOne(data) {
+        return this.apiService.post(ADMIN_API_ROUTES.CREATE, data);
+    }
+    updateOne(id, data) {
+        return this.apiService.patch(ADMIN_API_ROUTES.updateOne(id), data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdminService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdminService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdminService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ApiService }] });
+
+class CitiesService {
+    apiService;
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    fetchCities({ page, search, stateId }) {
+        const queryParams = new URLSearchParams();
+        if (page)
+            queryParams.append('page', page.toString());
+        if (search)
+            queryParams.append('search', search);
+        if (stateId)
+            queryParams.append('state_id', stateId.toString());
+        const queryString = queryParams.toString();
+        const apiRoute = `${CITY_API_ENDPOINTS.findAll}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    createOne(data) {
+        return this.apiService.post(CITY_API_ENDPOINTS.create, data);
+    }
+    updateOne(id, data) {
+        return this.apiService.patch(CITY_API_ENDPOINTS.update(id), data);
+    }
+    deleteOne(id) {
+        return this.apiService.delete(CITY_API_ENDPOINTS.delete(id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CitiesService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CitiesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CitiesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ApiService }] });
+
+class CountryService {
+    apiService;
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    fetchCountries(page, search) {
+        const queryParams = new URLSearchParams();
+        if (page)
+            queryParams.append('page', page.toString());
+        if (search)
+            queryParams.append('search', search);
+        const queryString = queryParams.toString();
+        const apiRoute = `${COUNTRY_API_ENDPOINTS.findAll}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    createOne(data) {
+        return this.apiService.post(COUNTRY_API_ENDPOINTS.create, data);
+    }
+    updateOne(id, data) {
+        return this.apiService.patch(COUNTRY_API_ENDPOINTS.update(id), data);
+    }
+    deleteOne(id) {
+        return this.apiService.delete(COUNTRY_API_ENDPOINTS.delete(id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CountryService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CountryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CountryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ApiService }] });
+
+class StatesService {
+    apiService;
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    fetchStates(page, search, countryId) {
+        const queryParams = new URLSearchParams();
+        if (page)
+            queryParams.append('page', page.toString());
+        if (search)
+            queryParams.append('search', search);
+        if (countryId)
+            queryParams.append('country_id', countryId.toString());
+        const queryString = queryParams.toString();
+        const apiRoute = `${STATE_API_ENDPOINTS.findAll}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    fetchStatesByCountryId(countryId) {
+        const apiRoute = `${STATE_API_ENDPOINTS.findAll}?country_id=${countryId}`;
+        return this.apiService.get(apiRoute);
+    }
+    createOne(data) {
+        return this.apiService.post(STATE_API_ENDPOINTS.create, data);
+    }
+    updateOne(id, data) {
+        return this.apiService.patch(STATE_API_ENDPOINTS.update(id), data);
+    }
+    deleteOne(id) {
+        return this.apiService.delete(STATE_API_ENDPOINTS.delete(id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StatesService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StatesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StatesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ApiService }] });
+
+class PerformanceService {
+    apiService;
+    performancesSubject = new BehaviorSubject([]);
+    performances$ = this.performancesSubject.asObservable();
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    fetchPerformances(showId, search) {
+        const queryParams = new URLSearchParams();
+        if (showId)
+            queryParams.append('show_id', showId.toString());
+        if (search)
+            queryParams.append('search', search);
+        queryParams.append('limit', '100');
+        const queryString = queryParams.toString();
+        const apiRoute = `${PERFORMANCES_API_ROUTES.findAll}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    fetchDailyPerformances({ show_id, search, limit, date, }) {
+        const queryParams = new URLSearchParams();
+        if (date)
+            queryParams.append('date', date.toString());
+        if (show_id)
+            queryParams.append('show_id', show_id.toString());
+        if (search)
+            queryParams.append('search', search);
+        queryParams.append('limit', limit?.toString() ?? '100');
+        const queryString = queryParams.toString();
+        const apiRoute = `${PERFORMANCES_API_ROUTES.publicAvailablePerformances}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    loadPerformances({ showId, search } = {}) {
+        this.fetchPerformances(showId, search).subscribe({
+            next: ({ data }) => {
+                this.performancesSubject.next(data?.performances ?? []);
+            },
+            error: () => {
+                this.performancesSubject.next([]);
+            },
+        });
+    }
+    getCurrentPerformances() {
+        return this.performancesSubject.value;
+    }
+    fetchOneById(id) {
+        return this.apiService.get(PERFORMANCES_API_ROUTES.findOneById(id));
+    }
+    fetchOneBookingData(id) {
+        const apiRoute = PERFORMANCES_API_ROUTES.findOneBookingData(id);
+        return this.apiService.get(apiRoute);
+    }
+    fetchAvailableDays(params) {
+        const queryParams = new URLSearchParams();
+        if (params?.show_id)
+            queryParams.append('show_id', params.show_id.toString());
+        const queryString = queryParams.toString();
+        const apiRoute = `${PERFORMANCES_API_ROUTES.getAvailableDays}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    createOne(data) {
+        return this.apiService.post(PERFORMANCES_API_ROUTES.create, data);
+    }
+    createMany(data) {
+        return this.apiService.post(PERFORMANCES_API_ROUTES.createBulk, { performances: data });
+    }
+    updateOne(id, data) {
+        return this.apiService.patch(PERFORMANCES_API_ROUTES.update(id), data);
+    }
+    deleteOne(id) {
+        return this.apiService.delete(PERFORMANCES_API_ROUTES.delete(id));
+    }
+    deleteMany(ids) {
+        return this.apiService.delete(PERFORMANCES_API_ROUTES.deleteMany, { ids });
+    }
+    cancelPerformance(id, notifyUsers) {
+        return this.apiService.patch(PERFORMANCES_API_ROUTES.cancel(id), { notify_users: notifyUsers });
+    }
+    publishInvenotry(id) {
+        const apiRoute = PERFORMANCES_API_ROUTES.publishInventory(id);
+        return this.apiService.post(apiRoute, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ApiService }] });
+
+class PerformancesListEventsService {
+    _selectedDay = signal(null, ...(ngDevMode ? [{ debugName: "_selectedDay" }] : []));
+    _selectedPerformance = signal(null, ...(ngDevMode ? [{ debugName: "_selectedPerformance" }] : []));
+    _filteredShowId = signal(null, ...(ngDevMode ? [{ debugName: "_filteredShowId" }] : []));
+    selectedDay = computed(() => this._selectedDay(), ...(ngDevMode ? [{ debugName: "selectedDay" }] : []));
+    selectedDayDate = computed(() => this._selectedDay()?.date, ...(ngDevMode ? [{ debugName: "selectedDayDate" }] : []));
+    selectedPerformance = computed(() => this._selectedPerformance(), ...(ngDevMode ? [{ debugName: "selectedPerformance" }] : []));
+    filteredShowId = computed(() => this._filteredShowId(), ...(ngDevMode ? [{ debugName: "filteredShowId" }] : []));
+    setSelectedDay(day) {
+        this._selectedDay.set(day);
+    }
+    setSelectedPerformance(performance) {
+        this._selectedPerformance.set(performance);
+    }
+    setFilteredShowId(id) {
+        this._filteredShowId.set(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformancesListEventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformancesListEventsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformancesListEventsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ProductService {
+    apiService;
+    productsSubject = new BehaviorSubject([]);
+    products$ = this.productsSubject.asObservable();
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    fetchProducts(page, search) {
+        const queryParams = new URLSearchParams();
+        if (page)
+            queryParams.append('page', page.toString());
+        if (search)
+            queryParams.append('search', search);
+        const queryString = queryParams.toString();
+        const apiRoute = `${PRODUCTS_API_ROUTES.FIND_ALL}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    loadProducts({ page, search } = {}) {
+        this.fetchProducts(page ?? 1, search ?? '').subscribe({
+            next: ({ data }) => {
+                this.productsSubject.next(data?.products ?? []);
+            },
+            error: () => {
+                this.productsSubject.next([]);
+            },
+        });
+    }
+    getCurrentProducts() {
+        return this.productsSubject.value;
+    }
+    fetchOneById(id) {
+        return this.apiService.get(PRODUCTS_API_ROUTES.findOneById(id));
+    }
+    createOne(data) {
+        return this.apiService.post(PRODUCTS_API_ROUTES.CREATE, data);
+    }
+    updateOne(id, data) {
+        return this.apiService.patch(PRODUCTS_API_ROUTES.update(id), data);
+    }
+    deleteOne(id) {
+        return this.apiService.delete(PRODUCTS_API_ROUTES.delete(id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProductService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProductService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProductService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ApiService }] });
+
+class ShowService {
+    apiService;
+    showsSubject = new BehaviorSubject([]);
+    shows$ = this.showsSubject.asObservable();
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    loadShows({ page, search } = {}) {
+        this.fetchShows({ page, search }).subscribe({
+            next: ({ data }) => {
+                this.showsSubject.next(data?.shows ?? []);
+            },
+            error: () => {
+                this.showsSubject.next([]);
+            },
+        });
+    }
+    getCurrentShows() {
+        return this.showsSubject.value;
+    }
+    fetchShows({ limit, page, search }) {
+        const queryParams = new URLSearchParams();
+        if (page)
+            queryParams.append('page', page.toString());
+        if (limit)
+            queryParams.append('limit', limit.toString());
+        if (search)
+            queryParams.append('search', search);
+        const queryString = queryParams.toString();
+        const apiRoute = `${SHOWS_API_ROUTES.findAll}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    fetchAvailableShows({ date, limit, page, search, }) {
+        const queryParams = new URLSearchParams();
+        if (date)
+            queryParams.append('date', date);
+        if (page)
+            queryParams.append('page', page.toString());
+        if (search)
+            queryParams.append('search', search);
+        if (limit)
+            queryParams.append('limit', limit.toString());
+        const queryString = queryParams.toString();
+        const apiRoute = `${SHOWS_API_ROUTES.publicAvailablePerformances}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    fetchOneById(id) {
+        return this.apiService.get(SHOWS_API_ROUTES.findOneById(id));
+    }
+    createOne(data) {
+        return this.apiService.post(SHOWS_API_ROUTES.create, data);
+    }
+    updateOne(id, data) {
+        return this.apiService.patch(SHOWS_API_ROUTES.update(id), data);
+    }
+    deleteOne(id) {
+        return this.apiService.delete(SHOWS_API_ROUTES.delete(id));
+    }
+    fetchImages(id) {
+        return this.apiService.get(SHOWS_API_ROUTES.getImages(id));
+    }
+    uploadImages(id, files) {
+        return this.apiService.post(SHOWS_API_ROUTES.uploadGallery(id), files);
+    }
+    deleteOneImage(showId, imageId) {
+        return this.apiService.delete(SHOWS_API_ROUTES.deleteOneImage(showId, imageId));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ApiService }] });
+
+class CustomerService {
+    apiService;
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    createOne(data) {
+        return this.apiService.post(CUSTOMERS_API_ROUTES.create, data);
+    }
+    fetchCustomers(page, search, limit) {
+        const queryParams = new URLSearchParams();
+        if (page)
+            queryParams.append('page', page.toString());
+        if (search)
+            queryParams.append('search', search);
+        if (limit)
+            queryParams.append('limit', limit.toString());
+        const queryString = queryParams.toString();
+        const apiRoute = `${CUSTOMERS_API_ROUTES.findAll}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    fetchOneById(id) {
+        return this.apiService.get(CUSTOMERS_API_ROUTES.findOne(id));
+    }
+    updateOne(id, data) {
+        return this.apiService.patch(CUSTOMERS_API_ROUTES.update(id), data);
+    }
+    deleteOne(id) {
+        return this.apiService.delete(CUSTOMERS_API_ROUTES.delete(id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomerService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ApiService }] });
+
+class PriceZoneService {
+    apiService;
+    priceZonesSubject = new BehaviorSubject([]);
+    priceZones$ = this.priceZonesSubject.asObservable();
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    fetchPriceZones({ roomMapId, page, search, limit, } = {}) {
+        const queryParams = new URLSearchParams();
+        if (roomMapId)
+            queryParams.append('room_map_id', roomMapId.toString());
+        if (page)
+            queryParams.append('page', page.toString());
+        if (search)
+            queryParams.append('search', search);
+        if (limit)
+            queryParams.append('limit', limit.toString());
+        const queryString = queryParams.toString();
+        const apiRoute = `${PRICE_ZONES_API_ROUTES.FIND_ALL}${queryString ? '?' + queryString : ''}`;
+        return this.apiService.get(apiRoute);
+    }
+    loadPriceZones({ roomMapId, page, search, limit } = {}) {
+        this.fetchPriceZones({ roomMapId, page, search, limit }).subscribe({
+            next: ({ data }) => {
+                this.priceZonesSubject.next(data?.price_zones ?? []);
+            },
+            error: () => {
+                this.priceZonesSubject.next([]);
+            },
+        });
+    }
+    getCurrentPriceZones() {
+        return this.priceZonesSubject.value;
+    }
+    fetchOneById(id) {
+        return this.apiService.get(PRICE_ZONES_API_ROUTES.findOneById(id));
+    }
+    createOne(data) {
+        return this.apiService.post(PRICE_ZONES_API_ROUTES.CREATE, data);
+    }
+    duplicateOne(id, name) {
+        return this.apiService.post(PRICE_ZONES_API_ROUTES.duplicate(id), { name });
+    }
+    updateOne(id, data) {
+        return this.apiService.patch(PRICE_ZONES_API_ROUTES.update(id), data);
+    }
+    deleteOne(id) {
+        return this.apiService.delete(PRICE_ZONES_API_ROUTES.delete(id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ApiService }] });
+
+class PriceZoneEventService {
+    priceZoneDeleted$ = new Subject();
+    priceZoneSaved$ = new Subject();
+    _selectedPriceZone = signal(null, ...(ngDevMode ? [{ debugName: "_selectedPriceZone" }] : []));
+    selectedPriceZone$ = toObservable(this._selectedPriceZone);
+    onPriceZoneDeleted() {
+        this.priceZoneDeleted$.next();
+    }
+    getPriceZoneDeleted() {
+        return this.priceZoneDeleted$.asObservable();
+    }
+    onPriceZoneSaved() {
+        this.priceZoneSaved$.next();
+    }
+    getPriceZoneSaved() {
+        return this.priceZoneSaved$.asObservable();
+    }
+    setSelectedPriceZone(priceZone) {
+        this._selectedPriceZone.set(priceZone);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneEventService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneEventService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class PriceZoneFormModalService {
+    priceZoneEventService;
+    priceZone = signal(null, ...(ngDevMode ? [{ debugName: "priceZone" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    constructor(priceZoneEventService) {
+        this.priceZoneEventService = priceZoneEventService;
+    }
+    get modalIsOpen() {
+        return this.isOpen;
+    }
+    get currentPriceZone() {
+        return this.priceZone;
+    }
+    open(priceZone = null) {
+        this.priceZone.set(priceZone);
+        this.priceZoneEventService.setSelectedPriceZone(priceZone);
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isOpen.set(false);
+        this.priceZone.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneFormModalService, deps: [{ token: PriceZoneEventService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneFormModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneFormModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: PriceZoneEventService }] });
+
+const authInterceptor = (req, next) => {
+    const platformId = inject(PLATFORM_ID);
+    const config = inject(TICKERA_COMPONENTS_CONFIG);
+    if (isPlatformBrowser(platformId)) {
+        const key = config.accessTokenKey ?? 'access_token';
+        const token = localStorage.getItem(key);
+        if (token) {
+            req = req.clone({
+                setHeaders: { Authorization: `Bearer ${token}` },
+            });
+        }
+    }
+    return next(req);
+};
+
+class AppButtonComponent {
+    clicked = new EventEmitter();
+    disabled = false;
+    loading = false;
+    type = 'button';
+    variant = 'primary';
+    text = '';
+    size = 'md';
+    loadingText = '';
+    icon = '';
+    handleClick() {
+        this.clicked.emit();
+    }
+    get buttonClasses() {
+        const disabledClasses = this.disabled ? 'opacity-50 cursor-not-allowed' : '';
+        const variantClasses = BUTTON_VARIANT_CLASSES[this.variant];
+        const loadingClasses = this.loading ? 'opacity-50 cursor-not-allowed' : '';
+        const sizeClasses = BUTTON_SIZES_CLASSES[this.size];
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, 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" }]
+        }], propDecorators: { clicked: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], loadingText: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+
+class AppLinkButtonComponent {
+    BASE_BUTTON_CLASSES = BASE_BUTTON_CLASSES;
+    disabled = false;
+    loading = false;
+    target = '_self';
+    text = '';
+    icon = '';
+    loadingText = '';
+    route = '';
+    queryParams = {};
+    size = 'md';
+    variant = 'primary';
+    get buttonClasses() {
+        const disabledClasses = this.disabled ? 'opacity-50 cursor-not-allowed' : '';
+        const variantClasses = BUTTON_VARIANT_CLASSES[this.variant];
+        const loadingClasses = this.loading ? 'opacity-50 cursor-not-allowed' : '';
+        const sizeClasses = BUTTON_SIZES_CLASSES[this.size] || 'text-base';
+        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 });
+}
+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" }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], loadingText: [{
+                type: Input
+            }], route: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }] } });
+
+class AppAlertComponent {
+    type = 'success';
+    text = '';
+    closeable = false;
+    size = 'md';
+    get alertColorClasses() {
+        return ALERT_COLOR_CLASSES[this.type] ?? ALERT_COLOR_CLASSES.success;
+    }
+    get alertSizeClasses() {
+        return ALERT_SIZE_CLASSES[this.size] ?? ALERT_SIZE_CLASSES.sm;
+    }
+    get alertClasses() {
+        return `${ALERT_BASE_CLASSES} ${this.alertColorClasses} ${this.alertSizeClasses}`;
+    }
+    get alertIcon() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-alert', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, 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" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], closeable: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class AppModalComponent {
+    title = '';
+    disableClose = false;
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    size = 'md';
+    closeModal = new EventEmitter();
+    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 });
+}
+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"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], disableClose: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], closeModal: [{
+                type: Output
+            }] } });
+
+class LoadingmModalComponent {
+    loadingModalService;
+    constructor(loadingModalService) {
+        this.loadingModalService = loadingModalService;
+    }
+    get isOpen() {
+        return this.loadingModalService.modalIsOpen;
+    }
+    get title() {
+        return this.loadingModalService.title;
+    }
+    closeModal() {
+        this.loadingModalService.close();
+    }
+    onCitySaved() {
+        this.loadingModalService.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LoadingmModalComponent, deps: [{ token: LoadingModalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: LoadingmModalComponent, isStandalone: true, selector: "loading-modal", ngImport: i0, template: "<app-modal [disableClose]=\"true\" [isOpen]=\"isOpen\" (closeModal)=\"closeModal()\">\n  <div class=\"flex flex-col gap-4 py-6 w-full\">\n    <div role=\"status\">\n      <div class=\"flex items-center justify-center\">\n        <div\n          class=\"h-14 w-14 animate-spin rounded-full border-8 border-solid border-red-500 border-t-transparent\"\n        ></div>\n      </div>\n      <span class=\"sr-only\">Loading...</span>\n    </div>\n\n    <p class=\"font-bold text-md text-center\">{{ title() }}</p>\n  </div>\n</app-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "isOpen", "size"], outputs: ["closeModal"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LoadingmModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'loading-modal', standalone: true, imports: [CommonModule, AppModalComponent], template: "<app-modal [disableClose]=\"true\" [isOpen]=\"isOpen\" (closeModal)=\"closeModal()\">\n  <div class=\"flex flex-col gap-4 py-6 w-full\">\n    <div role=\"status\">\n      <div class=\"flex items-center justify-center\">\n        <div\n          class=\"h-14 w-14 animate-spin rounded-full border-8 border-solid border-red-500 border-t-transparent\"\n        ></div>\n      </div>\n      <span class=\"sr-only\">Loading...</span>\n    </div>\n\n    <p class=\"font-bold text-md text-center\">{{ title() }}</p>\n  </div>\n</app-modal>\n" }]
+        }], ctorParameters: () => [{ type: LoadingModalService }] });
+
+class FormInputComponent {
+    ngControl;
+    transloco;
+    label = '';
+    type = 'text';
+    name = '';
+    id = '';
+    placeholder = '';
+    required = false;
+    readonly = false;
+    minlength = null;
+    min = null;
+    step = 1;
+    pattern = null;
+    fieldGroupClass = '';
+    autocomplete = true;
+    value = '';
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(ngControl, transloco) {
+        this.ngControl = ngControl;
+        this.transloco = transloco;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onInput(value) {
+        this.value = value;
+        this.onChange(value);
+        this.onTouched();
+    }
+    get inputId() {
+        return this.id || this.name;
+    }
+    get showError() {
+        if (!this.ngControl || !this.ngControl.control)
+            return false;
+        const control = this.ngControl.control;
+        const dirty = control.dirty;
+        const touched = control.touched;
+        return control.invalid ? dirty || touched : false;
+    }
+    get errorMessage() {
+        if (!this.ngControl?.errors)
+            return '';
+        const errors = this.ngControl.errors;
+        const errorKey = Object.keys(errors)[0];
+        if (errorKey === 'minlength') {
+            return this.transloco.translate('formErrors.minlength', {
+                length: errors[errorKey].requiredLength,
+            });
+        }
+        if (errorKey === 'maxlength') {
+            return this.transloco.translate('formErrors.maxlength', {
+                length: errors[errorKey].requiredLength,
+            });
+        }
+        if (errorKey === 'email') {
+            return this.transloco.translate('formErrors.email');
+        }
+        return this.transloco.translate(`formErrors.${errorKey}`);
+    }
+    get inputClasses() {
+        return this.showError ? ERROR_INPUT_CLASSES : BASE_INPUT_CLASSES;
+    }
+    get fieldGroupClasses() {
+        let baseClasses = '';
+        if (this.fieldGroupClass) {
+            baseClasses += ` ${this.fieldGroupClass}`;
+        }
+        else {
+            baseClasses += ' w-full';
+        }
+        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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'form-input', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule], 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" }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], fieldGroupClass: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }] } });
+
+class DeleteConfirmationComponent {
+    fb;
+    deleteConfirmationService;
+    transloco;
+    deleteConfirmationForm;
+    constructor(fb, deleteConfirmationService, transloco) {
+        this.fb = fb;
+        this.deleteConfirmationService = deleteConfirmationService;
+        this.transloco = transloco;
+        this.deleteConfirmationForm = this.fb.group({
+            confirmationText: ['', [Validators.required]],
+        });
+    }
+    get title() {
+        return this.deleteConfirmationService.modalTitle();
+    }
+    get resourceName() {
+        return this.deleteConfirmationService.modalResourceName();
+    }
+    get confirmationText() {
+        return this.deleteConfirmationService.modalConfirmationText();
+    }
+    get isOpen() {
+        return this.deleteConfirmationService.modalIsOpen;
+    }
+    get isConfirmationValid() {
+        const value = this.deleteConfirmationForm.value.confirmationText?.trim()?.toLowerCase();
+        const confirmation = this.confirmationText?.trim()?.toLowerCase();
+        return value == confirmation;
+    }
+    onCloseModal() {
+        this.deleteConfirmationForm.reset();
+        this.deleteConfirmationService.close();
+    }
+    onConfirmDelete() {
+        const callback = this.deleteConfirmationService.getConfirmDeleteCallback();
+        if (callback) {
+            callback();
+        }
+        this.deleteConfirmationForm.reset();
+        this.deleteConfirmationService.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, deps: [{ token: i1$1.FormBuilder }, { token: DeleteConfirmationService }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DeleteConfirmationComponent, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "@if (isOpen()) {\n  <app-modal [title]=\"title\" [isOpen]=\"isOpen\" (closeModal)=\"onCloseModal()\">\n    <form\n      [formGroup]=\"deleteConfirmationForm\"\n      method=\"POST\"\n      class=\"flex flex-col gap-4\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <app-alert\n        type=\"warning\"\n        [text]=\"'deleteConfirmation.warning' | transloco\"\n        size=\"sm\"\n        [closeable]=\"false\"\n      />\n\n      <p class=\"text-xs text-gray-600\">\n        {{ 'deleteConfirmation.instructions' | transloco }}\n\n        <span\n          class=\"inline-flex bg-gray-200 items-center px-2 py-1 gap-1 text-red-600 font-semibold text-sm rounded mt-1\"\n        >\n          {{ confirmationText }}\n        </span>\n      </p>\n\n      <form-input\n        name=\"confirmationText\"\n        type=\"text\"\n        class=\"flex-1\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirmationText\"\n        [placeholder]=\"\n          transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n        \"\n      />\n\n      <div class=\"flex space-x-3\">\n        <app-button\n          variant=\"terciary\"\n          [text]=\"'deleteConfirmation.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'deleteConfirmation.delete' | transloco\"\n          [disabled]=\"!isConfirmationValid\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".delete-confirmation-modal{animation:fadeIn .3s ease-out}.delete-confirmation-content{animation:slideUp .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.confirmation-input{transition:all .2s ease}.confirmation-input:focus{box-shadow:0 0 0 3px #ef44441a}.confirmation-input.invalid{border-color:#dc2626}.confirmation-input.invalid:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.delete-button{transition:all .2s ease}.delete-button:disabled{opacity:.5;cursor:not-allowed}.delete-button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #dc26264d}.warning-message{border-left:4px solid #f59e0b;background:linear-gradient(135deg,#fef3c7,#fde68a)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "minlength", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'delete-confirmation', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslocoModule,
+                        AppButtonComponent,
+                        FormInputComponent,
+                        AppModalComponent,
+                        AppAlertComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n  <app-modal [title]=\"title\" [isOpen]=\"isOpen\" (closeModal)=\"onCloseModal()\">\n    <form\n      [formGroup]=\"deleteConfirmationForm\"\n      method=\"POST\"\n      class=\"flex flex-col gap-4\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <app-alert\n        type=\"warning\"\n        [text]=\"'deleteConfirmation.warning' | transloco\"\n        size=\"sm\"\n        [closeable]=\"false\"\n      />\n\n      <p class=\"text-xs text-gray-600\">\n        {{ 'deleteConfirmation.instructions' | transloco }}\n\n        <span\n          class=\"inline-flex bg-gray-200 items-center px-2 py-1 gap-1 text-red-600 font-semibold text-sm rounded mt-1\"\n        >\n          {{ confirmationText }}\n        </span>\n      </p>\n\n      <form-input\n        name=\"confirmationText\"\n        type=\"text\"\n        class=\"flex-1\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirmationText\"\n        [placeholder]=\"\n          transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n        \"\n      />\n\n      <div class=\"flex space-x-3\">\n        <app-button\n          variant=\"terciary\"\n          [text]=\"'deleteConfirmation.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'deleteConfirmation.delete' | transloco\"\n          [disabled]=\"!isConfirmationValid\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".delete-confirmation-modal{animation:fadeIn .3s ease-out}.delete-confirmation-content{animation:slideUp .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.confirmation-input{transition:all .2s ease}.confirmation-input:focus{box-shadow:0 0 0 3px #ef44441a}.confirmation-input.invalid{border-color:#dc2626}.confirmation-input.invalid:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.delete-button{transition:all .2s ease}.delete-button:disabled{opacity:.5;cursor:not-allowed}.delete-button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #dc26264d}.warning-message{border-left:4px solid #f59e0b;background:linear-gradient(135deg,#fef3c7,#fde68a)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: DeleteConfirmationService }, { type: i2.TranslocoService }] });
+
+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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AuditInformationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-audit-information', standalone: true, imports: [CommonModule, DatePipe], 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" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class DynamicTableComponent {
+    injector;
+    constructor(injector) {
+        this.injector = injector;
+    }
+    title = '';
+    data = [];
+    headers = [];
+    columnComponents = {};
+    // Inputs necesarios para la paginación remota
+    isLoading = true;
+    totalItems = 0;
+    itemsPerPage = 10;
+    currentPage = 1;
+    // Eventos para avisar al Backend
+    pageChange = new EventEmitter();
+    searchChange = new EventEmitter();
+    // Visualización de paginación
+    showPagination = true;
+    // Visualización de búsqueda
+    showSearch = true;
+    // Visualización de título
+    showTitle = true;
+    get totalPages() {
+        return Math.ceil(this.totalItems / this.itemsPerPage) || 1;
+    }
+    onSearch(event) {
+        this.data = [];
+        const value = event.target.value;
+        this.searchChange.emit(value); // El padre recibe el término y hace el fetch
+    }
+    changePage(delta) {
+        const newPage = this.currentPage + delta;
+        if (newPage > 0 && newPage <= this.totalPages) {
+            this.pageChange.emit(newPage); // El padre recibe la nueva página
+        }
+    }
+    createInjector(row) {
+        return Injector.create({
+            providers: [{ provide: 'ROW_DATA', useValue: row }],
+            parent: this.injector,
+        });
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DynamicTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dynamic-table', standalone: true, imports: [CommonModule], 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" }]
+        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], headers: [{
+                type: Input
+            }], columnComponents: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }], showPagination: [{
+                type: Input
+            }], showSearch: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }] } });
+
+class LanguageSwitcherComponent {
+    transloco;
+    availableLangs = ['es', 'en'];
+    constructor(transloco) {
+        this.transloco = transloco;
+    }
+    get activeLang() {
+        return this.transloco.getActiveLang();
+    }
+    switchLang(lang) {
+        this.transloco.setActiveLang(lang);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LanguageSwitcherComponent, deps: [{ token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: LanguageSwitcherComponent, isStandalone: true, selector: "language-switcher", ngImport: i0, template: `
+    <div class="flex items-center gap-1">
+      @for (lang of availableLangs; track lang) {
+        <button
+          (click)="switchLang(lang)"
+          class="cursor-pointer px-2 py-1 text-xs font-medium rounded transition-colors"
+          [class.bg-gray-800]="activeLang === lang"
+          [class.text-white]="activeLang === lang"
+          [class.text-gray-400]="activeLang !== lang"
+          [class.hover:text-white]="activeLang !== lang"
+        >
+          {{ lang | uppercase }}
+        </button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'language-switcher',
+                    standalone: true,
+                    imports: [CommonModule, TranslocoModule],
+                    template: `
+    <div class="flex items-center gap-1">
+      @for (lang of availableLangs; track lang) {
+        <button
+          (click)="switchLang(lang)"
+          class="cursor-pointer px-2 py-1 text-xs font-medium rounded transition-colors"
+          [class.bg-gray-800]="activeLang === lang"
+          [class.text-white]="activeLang === lang"
+          [class.text-gray-400]="activeLang !== lang"
+          [class.hover:text-white]="activeLang !== lang"
+        >
+          {{ lang | uppercase }}
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i2.TranslocoService }] });
+
+class FormSelectComponent {
+    ngControl;
+    transloco;
+    label = '';
+    name = '';
+    id = '';
+    placeholder = 'Seleccione una opción';
+    required = false;
+    disabled = false;
+    readonly = false;
+    options = [];
+    fieldGroupClass = '';
+    showDefaultOption = true;
+    defaultOptionLabel = '';
+    value = '';
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(ngControl, transloco) {
+        this.ngControl = ngControl;
+        this.transloco = transloco;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onSelectChange(value) {
+        this.value = value;
+        this.onChange(value);
+        this.onTouched();
+    }
+    get inputId() {
+        return this.id || this.name;
+    }
+    get showError() {
+        if (!this.ngControl || !this.ngControl.control)
+            return false;
+        const control = this.ngControl.control;
+        const dirty = control.dirty;
+        const touched = control.touched;
+        return control.invalid ? dirty || touched : false;
+    }
+    get errorMessage() {
+        if (!this.ngControl?.errors)
+            return '';
+        const errors = this.ngControl.errors;
+        const errorKey = Object.keys(errors)[0];
+        return this.transloco.translate(`formErrors.${errorKey}`, {}, this.transloco.translate('formErrors.invalidSelection'));
+    }
+    get resolvedDefaultOptionLabel() {
+        return this.defaultOptionLabel || this.transloco.translate('common.selectOption');
+    }
+    get selectClasses() {
+        return this.showError ? ERROR_INPUT_CLASSES : BASE_INPUT_CLASSES;
+    }
+    get fieldGroupClasses() {
+        let baseClasses = '';
+        if (this.fieldGroupClass) {
+            baseClasses += ` ${this.fieldGroupClass}`;
+        }
+        else {
+            baseClasses += ' w-full';
+        }
+        return baseClasses;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormSelectComponent, 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: FormSelectComponent, isStandalone: true, selector: "form-select", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", disabled: "disabled", readonly: "readonly", options: "options", fieldGroupClass: "fieldGroupClass", showDefaultOption: "showDefaultOption", defaultOptionLabel: "defaultOptionLabel" }, 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    <select\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [required]=\"required\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onSelectChange($event)\"\n      (blur)=\"onTouched()\"\n      [class]=\"selectClasses\"\n      [class.bg-white]=\"!readonly\"\n      [class.bg-gray-200]=\"readonly\"\n      [class.cursor-not-allowed]=\"readonly\"\n    >\n      @if (showDefaultOption) {\n        <option [value]=\"null\" disabled selected>{{ resolvedDefaultOptionLabel }}</option>\n      }\n\n      @for (option of options; track option.value) {\n        <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n          {{ option.label }}\n        </option>\n      }\n    </select>\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: ["select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(\"data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1em;padding-right:2.5rem}select::-ms-expand{display:none}@-moz-document url-prefix(){select{text-indent:.01px;text-overflow:\"\";padding-right:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: FormSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'form-select', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule], 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    <select\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [required]=\"required\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onSelectChange($event)\"\n      (blur)=\"onTouched()\"\n      [class]=\"selectClasses\"\n      [class.bg-white]=\"!readonly\"\n      [class.bg-gray-200]=\"readonly\"\n      [class.cursor-not-allowed]=\"readonly\"\n    >\n      @if (showDefaultOption) {\n        <option [value]=\"null\" disabled selected>{{ resolvedDefaultOptionLabel }}</option>\n      }\n\n      @for (option of options; track option.value) {\n        <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n          {{ option.label }}\n        </option>\n      }\n    </select>\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: ["select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(\"data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1em;padding-right:2.5rem}select::-ms-expand{display:none}@-moz-document url-prefix(){select{text-indent:.01px;text-overflow:\"\";padding-right:.75rem}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], fieldGroupClass: [{
+                type: Input
+            }], showDefaultOption: [{
+                type: Input
+            }], defaultOptionLabel: [{
+                type: Input
+            }] } });
+
+class FormTextareaComponent {
+    ngControl;
+    transloco;
+    label = '';
+    name = '';
+    id = '';
+    placeholder = '';
+    required = false;
+    readonly = false;
+    minlength = null;
+    maxlength = null;
+    rows = 4;
+    cols = null;
+    fieldGroupClass = '';
+    value = '';
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(ngControl, transloco) {
+        this.ngControl = ngControl;
+        this.transloco = transloco;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onInput(value) {
+        this.value = value;
+        this.onChange(value);
+        this.onTouched();
+    }
+    get inputId() {
+        return this.id || this.name;
+    }
+    get showError() {
+        if (!this.ngControl || !this.ngControl.control)
+            return false;
+        const control = this.ngControl.control;
+        const dirty = control.dirty;
+        const touched = control.touched;
+        return control.invalid ? dirty || touched : false;
+    }
+    get errorMessage() {
+        if (!this.ngControl?.errors)
+            return '';
+        const errors = this.ngControl.errors;
+        const errorKey = Object.keys(errors)[0];
+        if (errorKey === 'minlength') {
+            return this.transloco.translate('formErrors.minlength', {
+                length: errors[errorKey].requiredLength,
+            });
+        }
+        if (errorKey === 'maxlength') {
+            return this.transloco.translate('formErrors.maxlength', {
+                length: errors[errorKey].requiredLength,
+            });
+        }
+        return this.transloco.translate(`formErrors.${errorKey}`);
+    }
+    get inputClasses() {
+        return this.showError ? ERROR_INPUT_CLASSES : BASE_INPUT_CLASSES;
+    }
+    get fieldGroupClasses() {
+        let baseClasses = '';
+        if (this.fieldGroupClass) {
+            baseClasses += ` ${this.fieldGroupClass}`;
+        }
+        else {
+            baseClasses += ' w-full';
+        }
+        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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'form-textarea', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule], 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" }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], fieldGroupClass: [{
+                type: Input
+            }] } });
+
+class FormEditorComponent {
+    ngControl;
+    transloco;
+    label = '';
+    name = '';
+    id = '';
+    placeholder = '';
+    required = false;
+    readonly = false;
+    toolbar = DEFAULT_TOOLBAR;
+    fieldGroupClass = '';
+    editor;
+    value = '';
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    subscription = null;
+    constructor(ngControl, transloco) {
+        this.ngControl = ngControl;
+        this.transloco = transloco;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this.editor = new Editor();
+        if (this.value) {
+            this.editor.setContent(this.value);
+        }
+        this.subscription = this.editor.valueChanges
+            .pipe(distinctUntilChanged())
+            .subscribe((doc) => {
+            this.value = toHTML(doc);
+            this.onChange(this.value);
+            this.onTouched();
+        });
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+        this.editor?.destroy();
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+        if (this.editor) {
+            this.editor.setContent(value ?? null);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    get inputId() {
+        return this.id || this.name;
+    }
+    get showError() {
+        if (!this.ngControl || !this.ngControl.control)
+            return false;
+        const control = this.ngControl.control;
+        return control.invalid ? control.dirty || control.touched : false;
+    }
+    get errorMessage() {
+        if (!this.ngControl?.errors)
+            return '';
+        const errors = this.ngControl.errors;
+        const errorKey = Object.keys(errors)[0];
+        if (errorKey === 'minlength') {
+            return this.transloco.translate('formErrors.minlength', {
+                length: errors[errorKey].requiredLength,
+            });
+        }
+        if (errorKey === 'maxlength') {
+            return this.transloco.translate('formErrors.maxlength', {
+                length: errors[errorKey].requiredLength,
+            });
+        }
+        return this.transloco.translate(`formErrors.${errorKey}`, {}, this.transloco.translate('formErrors.invalidField'));
+    }
+    get fieldGroupClasses() {
+        let baseClasses = '';
+        if (this.fieldGroupClass) {
+            baseClasses += ` ${this.fieldGroupClass}`;
+        }
+        else {
+            baseClasses += ' w-full';
+        }
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'form-editor', standalone: true, imports: [
+                        FormsModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        NgxEditorComponent,
+                        NgxEditorMenuComponent,
+                    ], 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" }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], toolbar: [{
+                type: Input
+            }], fieldGroupClass: [{
+                type: Input
+            }] } });
+
+class ColorPickerComponent {
+    ngControl;
+    elementRef;
+    label = '';
+    name = '';
+    id = '';
+    placeholder = '#000000';
+    required = false;
+    readonly = false;
+    fieldGroupClass = '';
+    showPreview = true;
+    presetColors = [
+        '#000000',
+        '#FFFFFF',
+        '#EF4444',
+        '#F97316',
+        '#F59E0B',
+        '#EAB308',
+        '#84CC16',
+        '#22C55E',
+        '#10B981',
+        '#14B8A6',
+        '#06B6D4',
+        '#0EA5E9',
+        '#3B82F6',
+        '#6366F1',
+        '#8B5CF6',
+        '#A855F7',
+        '#D946EF',
+        '#EC4899',
+        '#F43F5E',
+        '#6B7280',
+    ];
+    colorChange = new EventEmitter();
+    value = '#000000';
+    disabled = false;
+    isDropdownOpen = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(ngControl, elementRef) {
+        this.ngControl = ngControl;
+        this.elementRef = elementRef;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    onDocumentClick(event) {
+        const clickedInside = this.elementRef.nativeElement.contains(event.target);
+        if (!clickedInside && this.isDropdownOpen) {
+            this.isDropdownOpen = false;
+        }
+    }
+    // Control value accessor methods
+    writeValue(value) {
+        if (value) {
+            this.value = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onColorChange(color) {
+        this.value = color;
+        this.onChange(color);
+        this.onTouched();
+    }
+    onInputColorChange(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.onChange(input.value);
+        this.onTouched();
+        this.colorChange.emit(input.value);
+    }
+    toggleDropdown() {
+        if (this.disabled || this.readonly)
+            return;
+        this.isDropdownOpen = !this.isDropdownOpen;
+    }
+    selectPresetColor(color) {
+        this.onColorChange(color);
+        this.colorChange.emit(color);
+        this.isDropdownOpen = false;
+    }
+    get inputId() {
+        return this.id || this.name;
+    }
+    get showError() {
+        if (!this.ngControl || !this.ngControl.control)
+            return false;
+        const control = this.ngControl.control;
+        const dirty = control.dirty;
+        const touched = control.touched;
+        return control.invalid ? dirty || touched : false;
+    }
+    get inputClasses() {
+        return this.showError ? ERROR_INPUT_CLASSES : BASE_INPUT_CLASSES;
+    }
+    get fieldGroupClasses() {
+        let baseClasses = '';
+        if (this.fieldGroupClass) {
+            baseClasses += ` ${this.fieldGroupClass}`;
+        }
+        else {
+            baseClasses += ' w-full';
+        }
+        return baseClasses;
+    }
+    isValidHexColor(color) {
+        return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPickerComponent, isStandalone: true, selector: "color-picker", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", fieldGroupClass: "fieldGroupClass", showPreview: "showPreview", presetColors: "presetColors" }, outputs: { colorChange: "colorChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, 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    <div class=\"flex gap-2 items-center\">\n      <!-- Color Input -->\n      <div class=\"relative flex-1\">\n        <input\n          type=\"text\"\n          [id]=\"inputId\"\n          [name]=\"name\"\n          [placeholder]=\"placeholder\"\n          [required]=\"required\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onInputColorChange($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          pattern=\"^#[0-9A-Fa-f]{6}$\"\n        />\n\n        <!-- Native Color Picker (Hidden) -->\n        <input\n          type=\"color\"\n          class=\"absolute inset-0 opacity-0 cursor-pointer\"\n          [disabled]=\"disabled || readonly\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onColorChange($event)\"\n        />\n      </div>\n\n      <!-- Color Preview -->\n      @if (showPreview) {\n        <div class=\"flex items-center\">\n          <div\n            class=\"w-[37px] h-[37px] rounded-md border border-gray-300 cursor-pointer transition-all hover:scale-105\"\n            [style.background-color]=\"value\"\n            (click)=\"toggleDropdown()\"\n            [class.cursor-not-allowed]=\"disabled || readonly\"\n            [class.opacity-50]=\"disabled\"\n          ></div>\n        </div>\n      }\n    </div>\n\n    <!-- Color Presets Dropdown -->\n    @if (isDropdownOpen && !disabled && !readonly) {\n      <div\n        class=\"absolute z-50 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg\"\n      >\n        <div class=\"grid grid-cols-5 gap-2 min-w-[200px]\">\n          @for (color of presetColors; track color) {\n            <button\n              type=\"button\"\n              class=\"w-8 h-8 rounded-md border-2 border-gray-300 hover:border-gray-400 transition-all hover:scale-110 focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n              [style.background-color]=\"color\"\n              (click)=\"selectPresetColor(color)\"\n              [attr.aria-label]=\"`Select color ${color}`\"\n            ></button>\n          }\n        </div>\n\n        <!-- Custom Color Input -->\n        <div class=\"mt-3 pt-3 border-t border-gray-200 dark:border-gray-700\">\n          <label class=\"text-xs text-gray-600 dark:text-gray-400 block mb-1\">Custom color:</label>\n          <input\n            type=\"color\"\n            class=\"w-full h-8 rounded cursor-pointer\"\n            [(ngModel)]=\"value\"\n            (ngModelChange)=\"onColorChange($event)\"\n          />\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">Please enter a valid hex color (e.g., #FF5733)</div>\n  }\n</div>\n", styles: [":host{display:block}.color-picker-dropdown{z-index:9999}.color-preview{transition:all .2s ease-in-out}.color-preset-button{transition:all .15s ease-in-out}.color-preset-button:focus{outline:2px solid #4f46e5;outline-offset:2px}@media(prefers-color-scheme:dark){.color-picker-dropdown{background-color:#1f2937;border-color:#374151}}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.color-picker-dropdown{animation:dropdownFadeIn .15s ease-out}\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.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: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-picker', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule], 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    <div class=\"flex gap-2 items-center\">\n      <!-- Color Input -->\n      <div class=\"relative flex-1\">\n        <input\n          type=\"text\"\n          [id]=\"inputId\"\n          [name]=\"name\"\n          [placeholder]=\"placeholder\"\n          [required]=\"required\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onInputColorChange($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          pattern=\"^#[0-9A-Fa-f]{6}$\"\n        />\n\n        <!-- Native Color Picker (Hidden) -->\n        <input\n          type=\"color\"\n          class=\"absolute inset-0 opacity-0 cursor-pointer\"\n          [disabled]=\"disabled || readonly\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onColorChange($event)\"\n        />\n      </div>\n\n      <!-- Color Preview -->\n      @if (showPreview) {\n        <div class=\"flex items-center\">\n          <div\n            class=\"w-[37px] h-[37px] rounded-md border border-gray-300 cursor-pointer transition-all hover:scale-105\"\n            [style.background-color]=\"value\"\n            (click)=\"toggleDropdown()\"\n            [class.cursor-not-allowed]=\"disabled || readonly\"\n            [class.opacity-50]=\"disabled\"\n          ></div>\n        </div>\n      }\n    </div>\n\n    <!-- Color Presets Dropdown -->\n    @if (isDropdownOpen && !disabled && !readonly) {\n      <div\n        class=\"absolute z-50 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg\"\n      >\n        <div class=\"grid grid-cols-5 gap-2 min-w-[200px]\">\n          @for (color of presetColors; track color) {\n            <button\n              type=\"button\"\n              class=\"w-8 h-8 rounded-md border-2 border-gray-300 hover:border-gray-400 transition-all hover:scale-110 focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n              [style.background-color]=\"color\"\n              (click)=\"selectPresetColor(color)\"\n              [attr.aria-label]=\"`Select color ${color}`\"\n            ></button>\n          }\n        </div>\n\n        <!-- Custom Color Input -->\n        <div class=\"mt-3 pt-3 border-t border-gray-200 dark:border-gray-700\">\n          <label class=\"text-xs text-gray-600 dark:text-gray-400 block mb-1\">Custom color:</label>\n          <input\n            type=\"color\"\n            class=\"w-full h-8 rounded cursor-pointer\"\n            [(ngModel)]=\"value\"\n            (ngModelChange)=\"onColorChange($event)\"\n          />\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">Please enter a valid hex color (e.g., #FF5733)</div>\n  }\n</div>\n", styles: [":host{display:block}.color-picker-dropdown{z-index:9999}.color-preview{transition:all .2s ease-in-out}.color-preset-button{transition:all .15s ease-in-out}.color-preset-button:focus{outline:2px solid #4f46e5;outline-offset:2px}@media(prefers-color-scheme:dark){.color-picker-dropdown{background-color:#1f2937;border-color:#374151}}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.color-picker-dropdown{animation:dropdownFadeIn .15s ease-out}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i0.ElementRef }], propDecorators: { label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], fieldGroupClass: [{
+                type: Input
+            }], showPreview: [{
+                type: Input
+            }], presetColors: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class DateInputComponent {
+    ngControl;
+    transloco;
+    label = '';
+    type = 'date';
+    includeTime = false;
+    name = '';
+    id = '';
+    placeholder = '';
+    required = false;
+    readonly = false;
+    min = null;
+    max = null;
+    fieldGroupClass = '';
+    dateFormat = 'yyyy-MM-dd';
+    value = '';
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(ngControl, transloco) {
+        this.ngControl = ngControl;
+        this.transloco = transloco;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    writeValue(value) {
+        if (value) {
+            if (value instanceof Date) {
+                this.value = this.formatDateForInput(value);
+            }
+            else if (typeof value === 'string') {
+                this.value = value;
+            }
+            else {
+                this.value = '';
+            }
+        }
+        else {
+            this.value = '';
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onInput(value) {
+        this.value = value;
+        const dateValue = value ? new Date(value) : null;
+        this.onChange(dateValue);
+        this.onTouched();
+    }
+    formatDateForInput(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        if (this.includeTime) {
+            const hours = String(date.getHours()).padStart(2, '0');
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            return `${year}-${month}-${day}T${hours}:${minutes}`;
+        }
+        return `${year}-${month}-${day}`;
+    }
+    parseDateFromString(dateString) {
+        if (!dateString)
+            return null;
+        const date = new Date(dateString);
+        return isNaN(date.getTime()) ? null : date;
+    }
+    get inputId() {
+        return this.id || this.name;
+    }
+    get showError() {
+        if (!this.ngControl || !this.ngControl.control)
+            return false;
+        const control = this.ngControl.control;
+        const dirty = control.dirty;
+        const touched = control.touched;
+        return control.invalid ? dirty || touched : false;
+    }
+    get errorMessage() {
+        if (!this.ngControl?.errors)
+            return '';
+        const errors = this.ngControl.errors;
+        const errorKey = Object.keys(errors)[0];
+        if (errorKey === 'minlength') {
+            return this.transloco.translate('formErrors.minlength', {
+                length: errors[errorKey].requiredLength,
+            });
+        }
+        return this.transloco.translate(`formErrors.${errorKey}`, {}, this.transloco.translate('formErrors.invalidField'));
+    }
+    get inputClasses() {
+        return this.showError ? ERROR_INPUT_CLASSES : BASE_INPUT_CLASSES;
+    }
+    get fieldGroupClasses() {
+        let baseClasses = '';
+        if (this.fieldGroupClass) {
+            baseClasses += ` ${this.fieldGroupClass}`;
+        }
+        else {
+            baseClasses += ' w-full';
+        }
+        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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-input', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule], 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" }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], includeTime: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], fieldGroupClass: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }] } });
+
+class ToggleSwitchComponent {
+    ngControl;
+    label = '';
+    name = '';
+    id = '';
+    required = false;
+    disabled = false;
+    size = 'md';
+    fieldGroupClass = '';
+    description = '';
+    toggleClick = new EventEmitter();
+    value = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    // Control value accessor methods
+    writeValue(value) {
+        this.value = value ?? false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onToggle() {
+        this.value = !this.value;
+        this.onChange(this.value);
+        this.onTouched();
+        this.toggleClick.emit(this.value);
+    }
+    get inputId() {
+        return this.id || this.name;
+    }
+    get toggleSizeClasses() {
+        switch (this.size) {
+            case 'sm':
+                return 'h-4 w-7';
+            case 'lg':
+                return 'h-7 w-14';
+            default:
+                return 'h-5 w-9';
+        }
+    }
+    get toggleThumbSizeClasses() {
+        switch (this.size) {
+            case 'sm':
+                return 'h-3 w-3';
+            case 'lg':
+                return 'h-6 w-6';
+            default:
+                return 'h-4 w-4';
+        }
+    }
+    get toggleThumbTranslateClasses() {
+        switch (this.size) {
+            case 'sm':
+                return 'translate-x-3';
+            case 'lg':
+                return 'translate-x-7';
+            default:
+                return 'translate-x-5';
+        }
+    }
+    get fieldGroupClasses() {
+        let baseClasses = '';
+        if (this.fieldGroupClass) {
+            baseClasses += ` ${this.fieldGroupClass}`;
+        }
+        else {
+            baseClasses += ' w-full';
+        }
+        return baseClasses;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleSwitchComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ToggleSwitchComponent, isStandalone: true, selector: "toggle-switch", inputs: { label: "label", name: "name", id: "id", required: "required", disabled: "disabled", size: "size", fieldGroupClass: "fieldGroupClass", description: "description" }, outputs: { toggleClick: "toggleClick" }, 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=\"flex items-center\">\n    <button\n      type=\"button\"\n      role=\"switch\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [attr.aria-checked]=\"value\"\n      [attr.aria-required]=\"required\"\n      [disabled]=\"disabled\"\n      [class]=\"\n        'toggle-switch ' +\n        size +\n        (value ? ' checked' : ' unchecked') +\n        (disabled ? ' disabled' : '')\n      \"\n      (click)=\"onToggle()\"\n    >\n      <span\n        [class]=\"\n          'toggle-thumb ' +\n          size +\n          (value ? ' checked' : ' unchecked') +\n          (disabled ? ' disabled' : '')\n        \"\n      ></span>\n    </button>\n\n    @if (description) {\n      <span class=\"ml-3 text-sm text-gray-500 dark:text-gray-400\">{{ description }}</span>\n    }\n  </div>\n\n  <!-- Hidden checkbox for form submission and accessibility -->\n  <input\n    type=\"checkbox\"\n    [id]=\"inputId + '-hidden'\"\n    [name]=\"name\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    class=\"sr-only\"\n    (change)=\"onToggle()\"\n  />\n</div>\n", styles: [".toggle-switch{display:inline-flex;flex-shrink:0;position:relative;border:2px solid transparent;border-radius:9999px;cursor:pointer;transition:background-color .2s ease-in-out;outline:none}.toggle-switch:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #4f46e5}.toggle-switch.checked:not(.disabled){background-color:#4f46e5}.toggle-switch.unchecked:not(.disabled){background-color:#e5e7eb}.toggle-switch.disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.5}.toggle-switch.sm{height:1rem;width:1.75rem;padding:0 2px;box-sizing:border-box}.toggle-switch.sm .toggle-thumb{height:calc(1rem - 6px);width:calc(1rem - 6px)}.toggle-switch.sm .toggle-thumb.checked{transform:translate(calc(.75rem - 2px))}.toggle-switch.md{height:1.25rem;width:2.25rem;padding:0 2px;box-sizing:border-box}.toggle-switch.md .toggle-thumb{height:calc(1.25rem - 6px);width:calc(1.25rem - 6px)}.toggle-switch.md .toggle-thumb.checked{transform:translate(calc(1rem - 2px))}.toggle-switch.lg{height:1.75rem;width:3.5rem;padding:0 2px;box-sizing:border-box}.toggle-switch.lg .toggle-thumb{height:calc(1.75rem - 6px);width:calc(1.75rem - 6px)}.toggle-switch.lg .toggle-thumb.checked{transform:translate(calc(1.75rem - 2px))}.toggle-thumb{pointer-events:none;display:inline-block;border-radius:50%;background-color:#fff;box-shadow:0 10px 15px -3px #0000001a;transition:transform .2s ease-in-out;margin:auto 0}.disabled .toggle-thumb{background-color:#9ca3af}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'toggle-switch', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule], 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=\"flex items-center\">\n    <button\n      type=\"button\"\n      role=\"switch\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [attr.aria-checked]=\"value\"\n      [attr.aria-required]=\"required\"\n      [disabled]=\"disabled\"\n      [class]=\"\n        'toggle-switch ' +\n        size +\n        (value ? ' checked' : ' unchecked') +\n        (disabled ? ' disabled' : '')\n      \"\n      (click)=\"onToggle()\"\n    >\n      <span\n        [class]=\"\n          'toggle-thumb ' +\n          size +\n          (value ? ' checked' : ' unchecked') +\n          (disabled ? ' disabled' : '')\n        \"\n      ></span>\n    </button>\n\n    @if (description) {\n      <span class=\"ml-3 text-sm text-gray-500 dark:text-gray-400\">{{ description }}</span>\n    }\n  </div>\n\n  <!-- Hidden checkbox for form submission and accessibility -->\n  <input\n    type=\"checkbox\"\n    [id]=\"inputId + '-hidden'\"\n    [name]=\"name\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    class=\"sr-only\"\n    (change)=\"onToggle()\"\n  />\n</div>\n", styles: [".toggle-switch{display:inline-flex;flex-shrink:0;position:relative;border:2px solid transparent;border-radius:9999px;cursor:pointer;transition:background-color .2s ease-in-out;outline:none}.toggle-switch:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #4f46e5}.toggle-switch.checked:not(.disabled){background-color:#4f46e5}.toggle-switch.unchecked:not(.disabled){background-color:#e5e7eb}.toggle-switch.disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.5}.toggle-switch.sm{height:1rem;width:1.75rem;padding:0 2px;box-sizing:border-box}.toggle-switch.sm .toggle-thumb{height:calc(1rem - 6px);width:calc(1rem - 6px)}.toggle-switch.sm .toggle-thumb.checked{transform:translate(calc(.75rem - 2px))}.toggle-switch.md{height:1.25rem;width:2.25rem;padding:0 2px;box-sizing:border-box}.toggle-switch.md .toggle-thumb{height:calc(1.25rem - 6px);width:calc(1.25rem - 6px)}.toggle-switch.md .toggle-thumb.checked{transform:translate(calc(1rem - 2px))}.toggle-switch.lg{height:1.75rem;width:3.5rem;padding:0 2px;box-sizing:border-box}.toggle-switch.lg .toggle-thumb{height:calc(1.75rem - 6px);width:calc(1.75rem - 6px)}.toggle-switch.lg .toggle-thumb.checked{transform:translate(calc(1.75rem - 2px))}.toggle-thumb{pointer-events:none;display:inline-block;border-radius:50%;background-color:#fff;box-shadow:0 10px 15px -3px #0000001a;transition:transform .2s ease-in-out;margin:auto 0}.disabled .toggle-thumb{background-color:#9ca3af}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], fieldGroupClass: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], toggleClick: [{
+                type: Output
+            }] } });
+
+class FileUploadPreviewComponent {
+    file = {};
+    remove = new EventEmitter();
+    removeFile() {
+        this.remove.emit(this.file);
+    }
+    getFileType(file) {
+        if (file.type.startsWith('image/'))
+            return FileType.IMAGE;
+        if (file.type === 'application/pdf')
+            return FileType.PDF;
+        if (file.type.includes('spreadsheet') ||
+            file.type.includes('excel') ||
+            file.extension === 'xlsx' ||
+            file.extension === 'xls' ||
+            file.extension === 'csv') {
+            return FileType.EXCEL;
+        }
+        if (file.type.includes('word') ||
+            file.type.includes('document') ||
+            file.extension === 'docx' ||
+            file.extension === 'doc') {
+            return FileType.WORD;
+        }
+        if (file.type.startsWith('text/') || file.extension === 'txt') {
+            return FileType.TEXT;
+        }
+        return FileType.DEFAULT;
+    }
+    getFileIcon(fileType) {
+        switch (fileType) {
+            case FileType.IMAGE:
+                return 'ri-image-line';
+            case FileType.PDF:
+                return 'ri-file-pdf-line';
+            case FileType.EXCEL:
+                return 'ri-file-excel-line';
+            case FileType.WORD:
+                return 'ri-file-word-line';
+            case FileType.TEXT:
+                return 'ri-file-text-line';
+            default:
+                return 'ri-file-line';
+        }
+    }
+    getFileTypeIcon(file) {
+        return this.getFileIcon(this.getFileType(file));
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileUploadPreviewComponent, isStandalone: true, selector: "file-upload-preview", inputs: { file: "file" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200\">\n  <div class=\"flex items-center space-x-3 flex-1 min-w-0\">\n    <!-- File Preview/Icon -->\n    <div class=\"flex-shrink-0\">\n      @if (file.preview) {\n        <img [src]=\"file.preview\" [alt]=\"file.name\" class=\"w-10 h-10 object-cover rounded-md\" />\n      } @else {\n        <div class=\"w-10 h-10 bg-gray-200 rounded-md flex items-center justify-center\">\n          <i [class]=\"getFileTypeIcon(file) + ' text-gray-600 text-lg'\"></i>\n        </div>\n      }\n    </div>\n\n    <!-- File Info -->\n    <div class=\"flex-1 min-w-0\">\n      <p class=\"text-sm font-medium text-gray-900 truncate\">\n        {{ file.name }}\n      </p>\n      <p class=\"text-xs text-gray-500\">\n        @if (!!file.size) {\n          {{ formatFileSize(file.size) }}\n        }\n        @if (file.extension) {\n          \u2022 {{ file.extension.toUpperCase() }}\n        }\n      </p>\n    </div>\n  </div>\n\n  <!-- Actions -->\n  <div class=\"flex items-center space-x-2 ml-4\">\n    <app-button\n      icon=\"ri-delete-bin-line\"\n      (clicked)=\"removeFile()\"\n      variant=\"primary\"\n      size=\"xs\"\n      title=\"Eliminar archivo\"\n    />\n  </div>\n</div>\n", styles: [".file-upload__drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload__disabled{border-color:#e5e7eb;background-color:#f9fafb;cursor:not-allowed}.file-upload__preview{transition:all .2s ease-in-out}.file-upload__preview:hover{transform:scale(1.05)}.file-upload__file-item{transition:all .2s ease-in-out}.file-upload__file-item:hover{background-color:#f3f4f6;border-color:#d1d5db}.file-upload__remove-btn{transition:all .2s ease-in-out}.file-upload__remove-btn:hover{background-color:#fef2f2}.file-upload__remove-btn:active{transform:scale(.95)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.file-upload__drag-active{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.file-upload__file-list{max-height:15rem;overflow-y:auto}.file-upload__file-list::-webkit-scrollbar{width:.5rem}.file-upload__file-list::-webkit-scrollbar-track{background-color:#f3f4f6;border-radius:9999px}.file-upload__file-list::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:9999px}.file-upload__file-list::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.file-type-icon--image{color:#3b82f6}.file-type-icon--pdf{color:#ef4444}.file-type-icon--excel{color:#10b981}.file-type-icon--word{color:#2563eb}.file-type-icon--text{color:#6b7280}.file-type-icon--default{color:#9ca3af}@media(max-width:640px){.file-upload__file-item{padding:.5rem}.file-upload__file-info{font-size:.75rem}.file-upload__preview{width:2rem;height:2rem}}@media(prefers-color-scheme:dark){.file-upload__file-item{background-color:#1f2937;border-color:#374151}.file-upload__file-item:hover{background-color:#111827;border-color:#4b5563}.file-upload__file-info{color:#d1d5db}.file-upload__file-name{color:#f3f4f6}.file-upload__file-size{color:#9ca3af}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'file-upload-preview', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule, AppButtonComponent], template: "<div class=\"flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200\">\n  <div class=\"flex items-center space-x-3 flex-1 min-w-0\">\n    <!-- File Preview/Icon -->\n    <div class=\"flex-shrink-0\">\n      @if (file.preview) {\n        <img [src]=\"file.preview\" [alt]=\"file.name\" class=\"w-10 h-10 object-cover rounded-md\" />\n      } @else {\n        <div class=\"w-10 h-10 bg-gray-200 rounded-md flex items-center justify-center\">\n          <i [class]=\"getFileTypeIcon(file) + ' text-gray-600 text-lg'\"></i>\n        </div>\n      }\n    </div>\n\n    <!-- File Info -->\n    <div class=\"flex-1 min-w-0\">\n      <p class=\"text-sm font-medium text-gray-900 truncate\">\n        {{ file.name }}\n      </p>\n      <p class=\"text-xs text-gray-500\">\n        @if (!!file.size) {\n          {{ formatFileSize(file.size) }}\n        }\n        @if (file.extension) {\n          \u2022 {{ file.extension.toUpperCase() }}\n        }\n      </p>\n    </div>\n  </div>\n\n  <!-- Actions -->\n  <div class=\"flex items-center space-x-2 ml-4\">\n    <app-button\n      icon=\"ri-delete-bin-line\"\n      (clicked)=\"removeFile()\"\n      variant=\"primary\"\n      size=\"xs\"\n      title=\"Eliminar archivo\"\n    />\n  </div>\n</div>\n", styles: [".file-upload__drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload__disabled{border-color:#e5e7eb;background-color:#f9fafb;cursor:not-allowed}.file-upload__preview{transition:all .2s ease-in-out}.file-upload__preview:hover{transform:scale(1.05)}.file-upload__file-item{transition:all .2s ease-in-out}.file-upload__file-item:hover{background-color:#f3f4f6;border-color:#d1d5db}.file-upload__remove-btn{transition:all .2s ease-in-out}.file-upload__remove-btn:hover{background-color:#fef2f2}.file-upload__remove-btn:active{transform:scale(.95)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.file-upload__drag-active{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.file-upload__file-list{max-height:15rem;overflow-y:auto}.file-upload__file-list::-webkit-scrollbar{width:.5rem}.file-upload__file-list::-webkit-scrollbar-track{background-color:#f3f4f6;border-radius:9999px}.file-upload__file-list::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:9999px}.file-upload__file-list::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.file-type-icon--image{color:#3b82f6}.file-type-icon--pdf{color:#ef4444}.file-type-icon--excel{color:#10b981}.file-type-icon--word{color:#2563eb}.file-type-icon--text{color:#6b7280}.file-type-icon--default{color:#9ca3af}@media(max-width:640px){.file-upload__file-item{padding:.5rem}.file-upload__file-info{font-size:.75rem}.file-upload__preview{width:2rem;height:2rem}}@media(prefers-color-scheme:dark){.file-upload__file-item{background-color:#1f2937;border-color:#374151}.file-upload__file-item:hover{background-color:#111827;border-color:#4b5563}.file-upload__file-info{color:#d1d5db}.file-upload__file-name{color:#f3f4f6}.file-upload__file-size{color:#9ca3af}}\n"] }]
+        }], propDecorators: { file: [{
+                type: Input,
+                args: [{ required: true }]
+            }], remove: [{
+                type: Output
+            }] } });
+
+class FileUploadComponent {
+    ngControl;
+    transloco;
+    label = '';
+    name = '';
+    id = '';
+    required = false;
+    readonly = false;
+    fieldGroupClass = '';
+    config = {};
+    accept = '*/*';
+    fileSelected = new EventEmitter();
+    fileRemoved = new EventEmitter();
+    validationError = new EventEmitter();
+    files = [];
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    dragOver = false;
+    constructor(ngControl, transloco) {
+        this.ngControl = ngControl;
+        this.transloco = transloco;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    writeValue(value) {
+        this.files = value || [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onFileSelect(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.handleFiles(Array.from(input.files));
+        }
+        input.value = '';
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragOver = false;
+        if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+            this.handleFiles(Array.from(event.dataTransfer.files));
+        }
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        this.dragOver = true;
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        this.dragOver = false;
+    }
+    async handleFiles(fileList) {
+        const newFiles = [];
+        for (const file of fileList) {
+            const validationError = this.validateFile(file);
+            if (validationError) {
+                this.validationError.emit(validationError);
+                continue;
+            }
+            const uploadedFile = {
+                file,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                extension: this.getFileExtension(file.name),
+            };
+            if (this.isImage(file)) {
+                uploadedFile.preview = await this.generateImagePreview(file);
+            }
+            newFiles.push(uploadedFile);
+        }
+        if (this.config.multiple) {
+            const maxFiles = this.config.maxFiles || 10;
+            const totalFiles = [...this.files, ...newFiles].slice(0, maxFiles);
+            this.files = totalFiles;
+        }
+        else {
+            this.files = newFiles.slice(0, 1);
+        }
+        this.onChange(this.files);
+        this.onTouched();
+        this.fileSelected.emit(this.files);
+    }
+    validateFile(file) {
+        if (this.config.maxFileSize && file.size > this.config.maxFileSize) {
+            const maxSizeMB = this.config.maxFileSize / (1024 * 1024);
+            return this.transloco.translate('fileUpload.sizeError', {
+                fileName: file.name,
+                maxSize: maxSizeMB.toFixed(2),
+            });
+        }
+        if (this.config.allowedExtensions && this.config.allowedExtensions.length > 0) {
+            const extension = this.getFileExtension(file.name);
+            if (!this.config.allowedExtensions.includes(extension)) {
+                return this.transloco.translate('fileUpload.extensionError', {
+                    fileName: file.name,
+                    extensions: this.config.allowedExtensions.join(', '),
+                });
+            }
+        }
+        return null;
+    }
+    getFileExtension(filename) {
+        return filename.split('.').pop()?.toLowerCase() || '';
+    }
+    isImage(file) {
+        return file.type.startsWith('image/');
+    }
+    async generateImagePreview(file) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                resolve(e.target?.result);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+    removeFile(index) {
+        const removedFile = this.files[index];
+        this.files.splice(index, 1);
+        this.onChange(this.files);
+        this.onTouched();
+        this.fileRemoved.emit(removedFile);
+    }
+    getFileType(file) {
+        if (file.type.startsWith('image/'))
+            return FileType.IMAGE;
+        if (file.type === 'application/pdf')
+            return FileType.PDF;
+        if (file.type.includes('spreadsheet') ||
+            file.type.includes('excel') ||
+            file.extension === 'xlsx' ||
+            file.extension === 'xls' ||
+            file.extension === 'csv') {
+            return FileType.EXCEL;
+        }
+        if (file.type.includes('word') ||
+            file.type.includes('document') ||
+            file.extension === 'docx' ||
+            file.extension === 'doc') {
+            return FileType.WORD;
+        }
+        if (file.type.startsWith('text/') || file.extension === 'txt') {
+            return FileType.TEXT;
+        }
+        return FileType.DEFAULT;
+    }
+    getFileIcon(fileType) {
+        switch (fileType) {
+            case FileType.IMAGE:
+                return 'ri-image-line';
+            case FileType.PDF:
+                return 'ri-file-pdf-line';
+            case FileType.EXCEL:
+                return 'ri-file-excel-line';
+            case FileType.WORD:
+                return 'ri-file-word-line';
+            case FileType.TEXT:
+                return 'ri-file-text-line';
+            default:
+                return 'ri-file-line';
+        }
+    }
+    getFileTypeIcon(file) {
+        return this.getFileIcon(this.getFileType(file));
+    }
+    triggerFileInput() {
+        const inputElement = document.getElementById(this.inputId);
+        if (inputElement) {
+            inputElement.click();
+        }
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    get inputId() {
+        return this.id || this.name;
+    }
+    get showError() {
+        if (!this.ngControl || !this.ngControl.control)
+            return false;
+        const control = this.ngControl.control;
+        const dirty = control.dirty;
+        const touched = control.touched;
+        return control.invalid ? dirty || touched : false;
+    }
+    get errorMessage() {
+        if (!this.ngControl?.errors)
+            return '';
+        const errors = this.ngControl.errors;
+        const errorKey = Object.keys(errors)[0];
+        return this.transloco.translate(`formErrors.${errorKey}`, {}, this.transloco.translate('formErrors.invalidField'));
+    }
+    get fieldGroupClasses() {
+        let baseClasses = '';
+        if (this.fieldGroupClass) {
+            baseClasses += ` ${this.fieldGroupClass}`;
+        }
+        else {
+            baseClasses += ' w-full';
+        }
+        return baseClasses;
+    }
+    get uploadAreaClasses() {
+        const baseClasses = 'border-2 border-dashed rounded-lg p-6 text-center transition-colors cursor-pointer';
+        if (this.disabled) {
+            return `${baseClasses} border-gray-200 bg-gray-50 cursor-not-allowed`;
+        }
+        if (this.dragOver) {
+            return `${baseClasses} border-blue-400 bg-blue-50`;
+        }
+        return `${baseClasses} border-gray-300 hover:border-gray-400 hover:bg-gray-50`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponent, 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: FileUploadComponent, isStandalone: true, selector: "file-upload", inputs: { label: "label", name: "name", id: "id", required: "required", readonly: "readonly", fieldGroupClass: "fieldGroupClass", config: "config", accept: "accept" }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, 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  <!-- Upload Area -->\n  <div\n    class=\"relative\"\n    (drop)=\"onDrop($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n  >\n    <div [class]=\"uploadAreaClasses\" (click)=\"!disabled && triggerFileInput()\">\n      <input\n        [id]=\"inputId\"\n        [name]=\"name\"\n        type=\"file\"\n        [accept]=\"accept\"\n        [multiple]=\"config.multiple\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        (change)=\"onFileSelect($event)\"\n        (blur)=\"onTouched()\"\n        class=\"hidden\"\n      />\n\n      <div class=\"flex flex-col items-center space-y-2\">\n        <i class=\"ri-upload-cloud-2-line text-3xl text-gray-400\"></i>\n        <div class=\"text-sm text-gray-600\">\n          <p class=\"font-medium\">\n            @if (config.multiple) {\n              {{ 'fileUpload.dropMultiple' | transloco }}\n            } @else {\n              {{ 'fileUpload.dropSingle' | transloco }}\n            }\n          </p>\n          <p class=\"text-xs text-gray-500 mt-1\">\n            @if (config.allowedExtensions && config.allowedExtensions.length > 0) {\n              {{ 'fileUpload.allowedExtensions' | transloco }}\n              {{ config.allowedExtensions.join(', ') }}\n            }\n            @if (config.maxFileSize) {\n              \u2022 {{ 'fileUpload.maxSize' | transloco }} {{ formatFileSize(config.maxFileSize) }}\n            }\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Files Preview -->\n  @if (files.length > 0) {\n    <div class=\"flex flex-col gap-2 mt-4\">\n      @for (file of files; track file; let i = $index) {\n        <file-upload-preview [file]=\"file\" (remove)=\"removeFile(i)\" />\n      }\n    </div>\n  }\n\n  <!-- Validation Error -->\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n\n  <!-- File Type Legend -->\n  @if (files.length === 0) {\n    <div class=\"mt-3 flex flex-wrap gap-4 text-xs text-gray-500\">\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-image-line text-blue-500\"></i>\n        <span>{{ 'fileUpload.fileTypeImages' | transloco }}</span>\n      </div>\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-file-pdf-line text-red-500\"></i>\n        <span>PDF</span>\n      </div>\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-file-excel-line text-green-500\"></i>\n        <span>{{ 'fileUpload.fileTypeExcel' | transloco }}</span>\n      </div>\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-file-word-line text-blue-600\"></i>\n        <span>{{ 'fileUpload.fileTypeWord' | transloco }}</span>\n      </div>\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-file-text-line text-gray-500\"></i>\n        <span>{{ 'fileUpload.fileTypeText' | transloco }}</span>\n      </div>\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-file-line text-gray-400\"></i>\n        <span>{{ 'fileUpload.fileTypeOther' | transloco }}</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".file-upload__drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload__disabled{border-color:#e5e7eb;background-color:#f9fafb;cursor:not-allowed}.file-upload__preview{transition:all .2s ease-in-out}.file-upload__preview:hover{transform:scale(1.05)}.file-upload__file-item{transition:all .2s ease-in-out}.file-upload__file-item:hover{background-color:#f3f4f6;border-color:#d1d5db}.file-upload__remove-btn{transition:all .2s ease-in-out}.file-upload__remove-btn:hover{background-color:#fef2f2}.file-upload__remove-btn:active{transform:scale(.95)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.file-upload__drag-active{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.file-upload__file-list{max-height:15rem;overflow-y:auto}.file-upload__file-list::-webkit-scrollbar{width:.5rem}.file-upload__file-list::-webkit-scrollbar-track{background-color:#f3f4f6;border-radius:9999px}.file-upload__file-list::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:9999px}.file-upload__file-list::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.file-type-icon--image{color:#3b82f6}.file-type-icon--pdf{color:#ef4444}.file-type-icon--excel{color:#10b981}.file-type-icon--word{color:#2563eb}.file-type-icon--text{color:#6b7280}.file-type-icon--default{color:#9ca3af}@media(max-width:640px){.file-upload__file-item{padding:.5rem}.file-upload__file-info{font-size:.75rem}.file-upload__preview{width:2rem;height:2rem}}@media(prefers-color-scheme:dark){.file-upload__file-item{background-color:#1f2937;border-color:#374151}.file-upload__file-item:hover{background-color:#111827;border-color:#4b5563}.file-upload__file-info{color:#d1d5db}.file-upload__file-name{color:#f3f4f6}.file-upload__file-size{color:#9ca3af}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: FileUploadPreviewComponent, selector: "file-upload-preview", inputs: ["file"], outputs: ["remove"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'file-upload', standalone: true, imports: [
+                        FormsModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslocoModule,
+                        FileUploadPreviewComponent,
+                    ], 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  <!-- Upload Area -->\n  <div\n    class=\"relative\"\n    (drop)=\"onDrop($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n  >\n    <div [class]=\"uploadAreaClasses\" (click)=\"!disabled && triggerFileInput()\">\n      <input\n        [id]=\"inputId\"\n        [name]=\"name\"\n        type=\"file\"\n        [accept]=\"accept\"\n        [multiple]=\"config.multiple\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        (change)=\"onFileSelect($event)\"\n        (blur)=\"onTouched()\"\n        class=\"hidden\"\n      />\n\n      <div class=\"flex flex-col items-center space-y-2\">\n        <i class=\"ri-upload-cloud-2-line text-3xl text-gray-400\"></i>\n        <div class=\"text-sm text-gray-600\">\n          <p class=\"font-medium\">\n            @if (config.multiple) {\n              {{ 'fileUpload.dropMultiple' | transloco }}\n            } @else {\n              {{ 'fileUpload.dropSingle' | transloco }}\n            }\n          </p>\n          <p class=\"text-xs text-gray-500 mt-1\">\n            @if (config.allowedExtensions && config.allowedExtensions.length > 0) {\n              {{ 'fileUpload.allowedExtensions' | transloco }}\n              {{ config.allowedExtensions.join(', ') }}\n            }\n            @if (config.maxFileSize) {\n              \u2022 {{ 'fileUpload.maxSize' | transloco }} {{ formatFileSize(config.maxFileSize) }}\n            }\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Files Preview -->\n  @if (files.length > 0) {\n    <div class=\"flex flex-col gap-2 mt-4\">\n      @for (file of files; track file; let i = $index) {\n        <file-upload-preview [file]=\"file\" (remove)=\"removeFile(i)\" />\n      }\n    </div>\n  }\n\n  <!-- Validation Error -->\n  @if (showError) {\n    <div class=\"text-red-500 text-xs mt-1\">\n      {{ errorMessage }}\n    </div>\n  }\n\n  <!-- File Type Legend -->\n  @if (files.length === 0) {\n    <div class=\"mt-3 flex flex-wrap gap-4 text-xs text-gray-500\">\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-image-line text-blue-500\"></i>\n        <span>{{ 'fileUpload.fileTypeImages' | transloco }}</span>\n      </div>\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-file-pdf-line text-red-500\"></i>\n        <span>PDF</span>\n      </div>\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-file-excel-line text-green-500\"></i>\n        <span>{{ 'fileUpload.fileTypeExcel' | transloco }}</span>\n      </div>\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-file-word-line text-blue-600\"></i>\n        <span>{{ 'fileUpload.fileTypeWord' | transloco }}</span>\n      </div>\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-file-text-line text-gray-500\"></i>\n        <span>{{ 'fileUpload.fileTypeText' | transloco }}</span>\n      </div>\n      <div class=\"flex items-center space-x-1\">\n        <i class=\"ri-file-line text-gray-400\"></i>\n        <span>{{ 'fileUpload.fileTypeOther' | transloco }}</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".file-upload__drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload__disabled{border-color:#e5e7eb;background-color:#f9fafb;cursor:not-allowed}.file-upload__preview{transition:all .2s ease-in-out}.file-upload__preview:hover{transform:scale(1.05)}.file-upload__file-item{transition:all .2s ease-in-out}.file-upload__file-item:hover{background-color:#f3f4f6;border-color:#d1d5db}.file-upload__remove-btn{transition:all .2s ease-in-out}.file-upload__remove-btn:hover{background-color:#fef2f2}.file-upload__remove-btn:active{transform:scale(.95)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.file-upload__drag-active{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.file-upload__file-list{max-height:15rem;overflow-y:auto}.file-upload__file-list::-webkit-scrollbar{width:.5rem}.file-upload__file-list::-webkit-scrollbar-track{background-color:#f3f4f6;border-radius:9999px}.file-upload__file-list::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:9999px}.file-upload__file-list::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.file-type-icon--image{color:#3b82f6}.file-type-icon--pdf{color:#ef4444}.file-type-icon--excel{color:#10b981}.file-type-icon--word{color:#2563eb}.file-type-icon--text{color:#6b7280}.file-type-icon--default{color:#9ca3af}@media(max-width:640px){.file-upload__file-item{padding:.5rem}.file-upload__file-info{font-size:.75rem}.file-upload__preview{width:2rem;height:2rem}}@media(prefers-color-scheme:dark){.file-upload__file-item{background-color:#1f2937;border-color:#374151}.file-upload__file-item:hover{background-color:#111827;border-color:#4b5563}.file-upload__file-info{color:#d1d5db}.file-upload__file-name{color:#f3f4f6}.file-upload__file-size{color:#9ca3af}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], fieldGroupClass: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], fileSelected: [{
+                type: Output
+            }], fileRemoved: [{
+                type: Output
+            }], validationError: [{
+                type: Output
+            }] } });
+
+class AsyncSelectComponent {
+    config;
+    items = [];
+    parentId;
+    label = '';
+    placeholder = 'Seleccione...';
+    name = '';
+    required = false;
+    multiple = false;
+    clearable = true;
+    searchable = true;
+    loading = false;
+    virtualScroll = false;
+    notFoundText = 'No se encontraron resultados';
+    bindLabel = 'label';
+    bindValue = 'value';
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    displayItems = [];
+    loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : []));
+    searchTerm$ = new Subject();
+    destroy$ = new Subject();
+    injector = inject(Injector);
+    _ngControl = null;
+    constructor() { }
+    get ngControl() {
+        if (!this._ngControl) {
+            this._ngControl = this.injector.get(NgControl, null);
+        }
+        return this._ngControl;
+    }
+    ngOnInit() {
+        this.setupSearch();
+        if (this.config) {
+            this.loadAndMap();
+        }
+        else {
+            this.displayItems = this.items;
+            this.searchMode();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['parentId'] && !changes['parentId'].firstChange) {
+            this.handleParentIdChange();
+        }
+        if (changes['items'] && !changes['items'].firstChange && !this.config) {
+            this.displayItems = this.items;
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setupSearch() {
+        this.searchTerm$
+            .pipe(debounceTime(400), distinctUntilChanged(), switchMap((term) => {
+            if (this.config) {
+                this.loadingSignal.set(true);
+                return this.fetchData({ search: term });
+            }
+            return of(this.displayItems);
+        }), takeUntil(this.destroy$))
+            .subscribe((options) => {
+            this.displayItems = options;
+            this.loadingSignal.set(false);
+        });
+    }
+    searchMode() {
+        this.searchTerm$
+            .pipe(debounceTime(400), distinctUntilChanged(), switchMap((term) => {
+            this.loadingSignal.set(true);
+            setTimeout(() => this.loadingSignal.set(false), 150);
+            return of(this.items.filter((item) => item.label.toLowerCase().includes(term.toLowerCase())));
+        }), takeUntil(this.destroy$))
+            .subscribe((options) => {
+            this.displayItems = options;
+        });
+    }
+    loadAndMap(params) {
+        if (!this.config)
+            return;
+        this.loadingSignal.set(true);
+        this.fetchData(params)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((options) => {
+            this.displayItems = options;
+            this.loadingSignal.set(false);
+        });
+    }
+    fetchData(params) {
+        if (!this.config)
+            return of([]);
+        const mergedParams = { ...params };
+        if (this.parentId != null && mergedParams.parentId == null) {
+            mergedParams.parentId = this.parentId;
+        }
+        return this.config.load(mergedParams).pipe(map((res) => this.config.map(res)), catchError(() => of([])));
+    }
+    handleParentIdChange() {
+        this.value = this.multiple ? [] : null;
+        this.onChange(this.value);
+        if (this.parentId != null && this.config) {
+            this.loadAndMap({ parentId: this.parentId });
+        }
+        else if (this.config) {
+            this.displayItems = [];
+            this.loadingSignal.set(false);
+        }
+    }
+    onSearch(event) {
+        const term = event?.term || '';
+        this.searchTerm$.next(term);
+    }
+    onSelectChange(value) {
+        this.value = value;
+        this.onChange(value);
+        this.onTouched();
+    }
+    get typeahead$() {
+        return this.searchTerm$;
+    }
+    get showError() {
+        if (!this.ngControl || !this.ngControl.control)
+            return false;
+        const control = this.ngControl.control;
+        return control.invalid ? control.dirty || control.touched : false;
+    }
+    get errorMessage() {
+        if (!this.ngControl?.errors)
+            return '';
+        const errorKey = Object.keys(this.ngControl.errors)[0];
+        return 'Campo inválido';
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.loading = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AsyncSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AsyncSelectComponent, isStandalone: true, selector: "async-select", inputs: { config: "config", items: "items", parentId: "parentId", label: "label", placeholder: "placeholder", name: "name", required: "required", multiple: "multiple", clearable: "clearable", searchable: "searchable", loading: "loading", virtualScroll: "virtualScroll", notFoundText: "notFoundText", bindLabel: "bindLabel", bindValue: "bindValue" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AsyncSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'async-select', standalone: true, imports: [CommonModule, FormsModule, NgSelectModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AsyncSelectComponent),
+                            multi: true,
+                        },
+                    ], 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" }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], parentId: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], notFoundText: [{
+                type: Input
+            }], bindLabel: [{
+                type: Input
+            }], bindValue: [{
+                type: Input
+            }] } });
+
+class ChangePasswordFormComponent {
+    fb;
+    changePasswordFormService;
+    customerService;
+    adminService;
+    toastService;
+    transloco;
+    changePasswordForm;
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    constructor(fb, changePasswordFormService, customerService, adminService, toastService, transloco) {
+        this.fb = fb;
+        this.changePasswordFormService = changePasswordFormService;
+        this.customerService = customerService;
+        this.adminService = adminService;
+        this.toastService = toastService;
+        this.transloco = transloco;
+        this.changePasswordForm = this.fb.group({
+            password: ['', [Validators.required, Validators.minLength(6)]],
+            confirm_password: ['', [Validators.required, Validators.minLength(6)]],
+        }, {
+            validators: MustMatchValidator('password', 'confirm_password'),
+        });
+    }
+    get isOpen() {
+        return this.changePasswordFormService.modalIsOpen;
+    }
+    get resourceId() {
+        return this.changePasswordFormService.resourceId;
+    }
+    onCloseModal() {
+        this.changePasswordForm.reset();
+        this.changePasswordFormService.close();
+    }
+    onConfirmDelete() {
+        this.loading.set(true);
+        const service = this.changePasswordFormService.isAdminMode()
+            ? this.adminService
+            : this.customerService;
+        const isAdmin = this.changePasswordFormService.isAdminMode();
+        const successKey = isAdmin ? 'changePassword.adminSuccess' : 'changePassword.customerSuccess';
+        const errorKey = isAdmin ? 'changePassword.adminError' : 'changePassword.customerError';
+        service.updateOne(this.resourceId(), this.changePasswordForm.value).subscribe({
+            next: () => {
+                this.toastService.show(this.transloco.translate(successKey), 'success');
+                this.changePasswordForm.reset();
+                this.changePasswordFormService.close();
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('Error al actualizar contraseña:', error);
+                this.toastService.show(this.transloco.translate(errorKey), 'error');
+                this.loading.set(false);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChangePasswordFormComponent, deps: [{ token: i1$1.FormBuilder }, { token: ChangePasswordFormService }, { token: CustomerService }, { token: AdminService }, { token: ToastService }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChangePasswordFormComponent, isStandalone: true, selector: "change-password-form", providers: [AdminService, CustomerService], ngImport: i0, template: "@if (isOpen()) {\n  <app-modal\n    [title]=\"'changePassword.title' | transloco\"\n    [isOpen]=\"isOpen\"\n    (closeModal)=\"onCloseModal()\"\n  >\n    <form\n      [formGroup]=\"changePasswordForm\"\n      method=\"POST\"\n      class=\"flex flex-col gap-4\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <form-input\n        [label]=\"'changePassword.newPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.newPasswordPlaceholder' | transloco\"\n        name=\"password\"\n        type=\"password\"\n        class=\"flex-1\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"password\"\n      />\n\n      <form-input\n        [label]=\"'changePassword.confirmPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.confirmPasswordPlaceholder' | transloco\"\n        name=\"confirm_password\"\n        type=\"password\"\n        class=\"flex-1\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirm_password\"\n      />\n\n      <div class=\"flex space-x-3\">\n        <app-button\n          variant=\"terciary\"\n          [text]=\"'changePassword.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          [disabled]=\"loading() || changePasswordForm.invalid || changePasswordForm.pristine\"\n          [loading]=\"loading()\"\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'changePassword.save' | transloco\"\n          [loadingText]=\"'changePassword.saving' | transloco\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".delete-confirmation-modal{animation:fadeIn .3s ease-out}.delete-confirmation-content{animation:slideUp .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.confirmation-input{transition:all .2s ease}.confirmation-input:focus{box-shadow:0 0 0 3px #ef44441a}.confirmation-input.invalid{border-color:#dc2626}.confirmation-input.invalid:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.delete-button{transition:all .2s ease}.delete-button:disabled{opacity:.5;cursor:not-allowed}.delete-button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #dc26264d}.warning-message{border-left:4px solid #f59e0b;background:linear-gradient(135deg,#fef3c7,#fde68a)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "minlength", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChangePasswordFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'change-password-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslocoModule,
+                        AppButtonComponent,
+                        FormInputComponent,
+                        AppModalComponent,
+                    ], providers: [AdminService, CustomerService], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n  <app-modal\n    [title]=\"'changePassword.title' | transloco\"\n    [isOpen]=\"isOpen\"\n    (closeModal)=\"onCloseModal()\"\n  >\n    <form\n      [formGroup]=\"changePasswordForm\"\n      method=\"POST\"\n      class=\"flex flex-col gap-4\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <form-input\n        [label]=\"'changePassword.newPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.newPasswordPlaceholder' | transloco\"\n        name=\"password\"\n        type=\"password\"\n        class=\"flex-1\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"password\"\n      />\n\n      <form-input\n        [label]=\"'changePassword.confirmPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.confirmPasswordPlaceholder' | transloco\"\n        name=\"confirm_password\"\n        type=\"password\"\n        class=\"flex-1\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirm_password\"\n      />\n\n      <div class=\"flex space-x-3\">\n        <app-button\n          variant=\"terciary\"\n          [text]=\"'changePassword.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          [disabled]=\"loading() || changePasswordForm.invalid || changePasswordForm.pristine\"\n          [loading]=\"loading()\"\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'changePassword.save' | transloco\"\n          [loadingText]=\"'changePassword.saving' | transloco\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".delete-confirmation-modal{animation:fadeIn .3s ease-out}.delete-confirmation-content{animation:slideUp .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.confirmation-input{transition:all .2s ease}.confirmation-input:focus{box-shadow:0 0 0 3px #ef44441a}.confirmation-input.invalid{border-color:#dc2626}.confirmation-input.invalid:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.delete-button{transition:all .2s ease}.delete-button:disabled{opacity:.5;cursor:not-allowed}.delete-button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #dc26264d}.warning-message{border-left:4px solid #f59e0b;background:linear-gradient(135deg,#fef3c7,#fde68a)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: ChangePasswordFormService }, { type: CustomerService }, { type: AdminService }, { type: ToastService }, { type: i2.TranslocoService }] });
+
+class AdminSelectComponent {
+    platformId;
+    adminService;
+    label = 'Equipo de trabajo';
+    placeholder = 'Selecciona un equipo de trabajo';
+    name = 'admin_id';
+    required = false;
+    readonly = false;
+    showError = true;
+    customClass = '';
+    control = null;
+    adminChange = new EventEmitter();
+    admins = signal([], ...(ngDevMode ? [{ debugName: "admins" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    destroy$ = new Subject();
+    // ControlValueAccessor properties
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(platformId, adminService) {
+        this.platformId = platformId;
+        this.adminService = adminService;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.loadAdmins();
+        }
+    }
+    // Update the formControl getter to handle the AbstractControl
+    get formControl() {
+        return this.control;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadAdmins() {
+        this.loading.set(true);
+        this.adminService
+            .fetchAdmins()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: ({ data: { admins } }) => {
+                this.admins.set(admins?.map((admin) => ({
+                    value: admin.id,
+                    label: `${admin.first_name} ${admin.last_name} - ${admin.email}`,
+                })) || []);
+                this.loading.set(false);
+            },
+            error: () => {
+                this.admins.set([]);
+                this.loading.set(false);
+            },
+        });
+    }
+    // In admin-select.component.ts
+    onAdminSelected(event) {
+        const select = event.target;
+        const value = select.value ? Number(select.value) : null;
+        // Update the local value
+        this.value = value;
+        // Update the form control if it exists
+        if (this.control) {
+            this.control.setValue(value);
+            this.control.markAsTouched();
+        }
+        // Emit the change event
+        this.adminChange.emit(value);
+    }
+    // ControlValueAccessor methods
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Validator method
+    validate(control) {
+        if (this.required && !control.value) {
+            return { required: true };
+        }
+        return null;
+    }
+    // Helper method to check if control is invalid
+    get isInvalid() {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdminSelectComponent, deps: [{ token: PLATFORM_ID }, { token: AdminService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: AdminSelectComponent, isStandalone: true, selector: "admin-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", showError: "showError", customClass: "customClass", control: "control" }, outputs: { adminChange: "adminChange" }, ngImport: i0, template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'country_id'\"\n  [class]=\"customClass\"\n  [options]=\"admins()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onAdminSelected($event)\"\n/>\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdminSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'admin-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'country_id'\"\n  [class]=\"customClass\"\n  [options]=\"admins()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onAdminSelected($event)\"\n/>\n", styles: [":host{display:block;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: AdminService }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], adminChange: [{
+                type: Output
+            }] } });
+
+class CitySelectComponent {
+    citiesService;
+    label = 'Ciudad';
+    name = 'city_id';
+    placeholder = 'Selecciona una ciudad';
+    required = false;
+    disabled = false;
+    readonly = false;
+    stateId = null;
+    showError = true;
+    customClass = '';
+    control = null;
+    cityChange = new EventEmitter();
+    cities = signal([], ...(ngDevMode ? [{ debugName: "cities" }] : []));
+    loading = false;
+    destroy$ = new Subject();
+    // ControlValueAccessor properties
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(citiesService) {
+        this.citiesService = citiesService;
+    }
+    // Update the formControl getter to handle the AbstractControl
+    get formControl() {
+        return this.control;
+    }
+    ngOnInit() {
+        this.loadCities();
+    }
+    ngOnChanges(changes) {
+        if (changes['stateId'] && !changes['stateId'].firstChange) {
+            this.value = null;
+            this.onChange(null);
+            this.cityChange.emit(null);
+            if (this.stateId) {
+                this.loadCities();
+            }
+            else {
+                this.cities.set([]);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadCities() {
+        this.loading = true;
+        this.citiesService
+            .fetchCities({ stateId: this.stateId ?? undefined })
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (response) => {
+                this.cities.set(formatCitiesResponseToSelect(response));
+                this.loading = false;
+            },
+            error: () => {
+                this.cities.set([]);
+                this.loading = false;
+            },
+        });
+    }
+    onCitySelected(event) {
+        const select = event.target;
+        const value = select.value ? Number(select.value) : null;
+        this.value = value;
+        this.onChange(value);
+        this.onTouched();
+        this.cityChange.emit(value);
+    }
+    // ControlValueAccessor methods
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    // Validator method
+    validate(control) {
+        if (this.required && !control.value) {
+            return { required: true };
+        }
+        return null;
+    }
+    get isInvalid() {
+        return false;
+    }
+    get isDisabled() {
+        return this.disabled || this.readonly || !this.stateId || this.loading;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CitySelectComponent, deps: [{ token: CitiesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CitySelectComponent, isStandalone: true, selector: "city-select", inputs: { label: "label", name: "name", placeholder: "placeholder", required: "required", disabled: "disabled", readonly: "readonly", stateId: "stateId", showError: "showError", customClass: "customClass", control: "control" }, outputs: { cityChange: "cityChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CitySelectComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => CitySelectComponent),
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name\"\n  [class]=\"customClass\"\n  [required]=\"required\"\n  [options]=\"cities()\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onCitySelected($event)\"\n/>\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CitySelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'city-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CitySelectComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => CitySelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name\"\n  [class]=\"customClass\"\n  [required]=\"required\"\n  [options]=\"cities()\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onCitySelected($event)\"\n/>\n", styles: [":host{display:block;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: CitiesService }], propDecorators: { label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], stateId: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], cityChange: [{
+                type: Output
+            }] } });
+
+class CountrySelectComponent {
+    platformId;
+    countryService;
+    label = 'País';
+    placeholder = 'Selecciona un país';
+    name = 'country_id';
+    required = false;
+    readonly = false;
+    showError = true;
+    customClass = '';
+    control = null;
+    countryChange = new EventEmitter();
+    countries = signal([], ...(ngDevMode ? [{ debugName: "countries" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    destroy$ = new Subject();
+    // ControlValueAccessor properties
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(platformId, countryService) {
+        this.platformId = platformId;
+        this.countryService = countryService;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.loadCountries();
+        }
+    }
+    // Update the formControl getter to handle the AbstractControl
+    get formControl() {
+        return this.control;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadCountries() {
+        this.loading.set(true);
+        this.countryService
+            .fetchCountries()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: ({ data: { countries } }) => {
+                this.countries.set(countries?.map((country) => ({
+                    value: country.id,
+                    label: country.name,
+                })) || []);
+                this.loading.set(false);
+            },
+            error: () => {
+                this.countries.set([]);
+                this.loading.set(false);
+            },
+        });
+    }
+    // In country-select.component.ts
+    onCountrySelected(event) {
+        const select = event.target;
+        const value = select.value ? Number(select.value) : null;
+        // Update the local value
+        this.value = value;
+        // Update the form control if it exists
+        if (this.control) {
+            this.control.setValue(value);
+            this.control.markAsTouched();
+        }
+        // Emit the change event
+        this.countryChange.emit(value);
+    }
+    // ControlValueAccessor methods
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Validator method
+    validate(control) {
+        if (this.required && !control.value) {
+            return { required: true };
+        }
+        return null;
+    }
+    // Helper method to check if control is invalid
+    get isInvalid() {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CountrySelectComponent, deps: [{ token: PLATFORM_ID }, { token: CountryService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CountrySelectComponent, isStandalone: true, selector: "country-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", showError: "showError", customClass: "customClass", control: "control" }, outputs: { countryChange: "countryChange" }, ngImport: i0, template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'country_id'\"\n  [class]=\"customClass\"\n  [options]=\"countries()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onCountrySelected($event)\"\n></form-select>\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CountrySelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'country-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'country_id'\"\n  [class]=\"customClass\"\n  [options]=\"countries()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onCountrySelected($event)\"\n></form-select>\n", styles: [":host{display:block;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: CountryService }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], countryChange: [{
+                type: Output
+            }] } });
+
+class StateSelectComponent {
+    statesService;
+    label = 'Departamento';
+    name = 'state_id';
+    placeholder = 'Selecciona un departamento';
+    required = false;
+    readonly = false;
+    countryId = null;
+    showError = true;
+    customClass = '';
+    control = null;
+    stateChange = new EventEmitter();
+    states = signal([], ...(ngDevMode ? [{ debugName: "states" }] : []));
+    loading = false;
+    destroy$ = new Subject();
+    // ControlValueAccessor properties
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(statesService) {
+        this.statesService = statesService;
+    }
+    ngOnInit() {
+        this.loadStates();
+    }
+    // Update the formControl getter to handle the AbstractControl
+    get formControl() {
+        return this.control;
+    }
+    ngOnChanges(changes) {
+        if (changes['countryId'] && !changes['countryId'].firstChange) {
+            this.value = null;
+            this.onChange(null);
+            this.stateChange.emit(null);
+            if (this.countryId) {
+                this.loadStates();
+            }
+            else {
+                this.states.set([]);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadStates() {
+        this.loading = true;
+        this.statesService
+            .fetchStates(1, undefined, this.countryId)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: ({ data: { states } }) => {
+                this.states.set(states?.map(({ id, name }) => ({ value: id, label: name })) || []);
+                this.loading = false;
+            },
+            error: () => {
+                this.states.set([]);
+                this.loading = false;
+            },
+        });
+    }
+    onStateSelected(event) {
+        const select = event.target;
+        const value = select.value ? Number(select.value) : null;
+        this.value = value;
+        this.onChange(value);
+        this.onTouched();
+        this.stateChange.emit(value);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) {
+        if (this.required && !control.value) {
+            return { required: true };
+        }
+        return null;
+    }
+    get isInvalid() {
+        return false;
+    }
+    get isDisabled() {
+        return this.readonly || !this.countryId || this.loading;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StateSelectComponent, deps: [{ token: StatesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: StateSelectComponent, isStandalone: true, selector: "state-select", inputs: { label: "label", name: "name", placeholder: "placeholder", required: "required", readonly: "readonly", countryId: "countryId", showError: "showError", customClass: "customClass", control: "control" }, outputs: { stateChange: "stateChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => StateSelectComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => StateSelectComponent),
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'state_id'\"\n  [class]=\"customClass\"\n  [options]=\"states()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onStateSelected($event)\"\n></form-select>\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StateSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'state-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StateSelectComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => StateSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'state_id'\"\n  [class]=\"customClass\"\n  [options]=\"states()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onStateSelected($event)\"\n></form-select>\n", styles: [":host{display:block;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: StatesService }], propDecorators: { label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], countryId: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }] } });
+
+class CustomerSelectComponent {
+    customerService;
+    label = 'Cliente';
+    placeholder = 'Selecciona un cliente';
+    name = 'customer_id';
+    required = false;
+    readonly = false;
+    multiple = false;
+    customerChange = new EventEmitter();
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    config = {
+        load: (params) => this.customerService.fetchCustomers(1, params?.search || '', 50),
+        map: (res) => res.data.customers?.map((customer) => ({
+            value: customer.id,
+            label: `${getCustomerFullname(customer)} - ${customer.email}`.trim(),
+        })) || [],
+    };
+    constructor(customerService) {
+        this.customerService = customerService;
+    }
+    onInternalChange(value) {
+        this.value = value;
+        this.onChange(value);
+        this.onTouched();
+        this.customerChange.emit(value);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) {
+        if (this.required && !control.value) {
+            return { required: true };
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomerSelectComponent, deps: [{ token: CustomerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CustomerSelectComponent, isStandalone: true, selector: "customer-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", multiple: "multiple" }, outputs: { customerChange: "customerChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CustomerSelectComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => CustomerSelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<async-select\n  [config]=\"config\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'customer_id'\"\n  [required]=\"required\"\n  [multiple]=\"multiple\"\n  [clearable]=\"true\"\n  bindLabel=\"label\"\n  bindValue=\"value\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"onInternalChange($event)\"\n/>\n", dependencies: [{ kind: "component", type: AsyncSelectComponent, selector: "async-select", inputs: ["config", "items", "parentId", "label", "placeholder", "name", "required", "multiple", "clearable", "searchable", "loading", "virtualScroll", "notFoundText", "bindLabel", "bindValue"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomerSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'customer-select', standalone: true, imports: [AsyncSelectComponent, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CustomerSelectComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => CustomerSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<async-select\n  [config]=\"config\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'customer_id'\"\n  [required]=\"required\"\n  [multiple]=\"multiple\"\n  [clearable]=\"true\"\n  bindLabel=\"label\"\n  bindValue=\"value\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"onInternalChange($event)\"\n/>\n" }]
+        }], ctorParameters: () => [{ type: CustomerService }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], customerChange: [{
+                type: Output
+            }] } });
+
+class PerformanceSelectComponent {
+    platformId;
+    performanceService;
+    label = 'Función';
+    placeholder = 'Selecciona una función';
+    name = 'performance_id';
+    required = false;
+    readonly = false;
+    showError = true;
+    customClass = '';
+    control = null;
+    performanceChange = new EventEmitter();
+    performances = signal([], ...(ngDevMode ? [{ debugName: "performances" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    searchTerm = '';
+    searchSubject = new Subject();
+    destroy$ = new Subject();
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(platformId, performanceService) {
+        this.platformId = platformId;
+        this.performanceService = performanceService;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.performanceService.loadPerformances({ search: this.searchTerm });
+            this.performanceService.performances$
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((performances) => {
+                this.performances.set(performances?.map((p) => ({
+                    value: p.id,
+                    label: `${p.show?.title || `Show #${p.show_id}`} - ${new Date(p.start_time).toLocaleDateString()}`,
+                })) || []);
+                this.loading.set(false);
+            });
+            this.searchSubject
+                .pipe(debounceTime(400), distinctUntilChanged(), takeUntil(this.destroy$))
+                .subscribe((search) => {
+                this.searchTerm = search;
+                this.performanceService.loadPerformances({ search: this.searchTerm });
+            });
+        }
+    }
+    get formControl() {
+        return this.control;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onSearchChange(search) {
+        this.searchSubject.next(search);
+    }
+    onPerformanceSelected(event) {
+        const select = event.target;
+        const value = select.value ? Number(select.value) : null;
+        this.value = value;
+        if (this.control) {
+            this.control.setValue(value);
+            this.control.markAsTouched();
+        }
+        this.performanceChange.emit(value);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) {
+        if (this.required && !control.value) {
+            return { required: true };
+        }
+        return null;
+    }
+    get isInvalid() {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceSelectComponent, deps: [{ token: PLATFORM_ID }, { token: PerformanceService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PerformanceSelectComponent, isStandalone: true, selector: "performance-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", showError: "showError", customClass: "customClass", control: "control" }, outputs: { performanceChange: "performanceChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PerformanceSelectComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => PerformanceSelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'performance_id'\"\n  [class]=\"customClass\"\n  [options]=\"performances()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onPerformanceSelected($event)\"\n></form-select>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'performance-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PerformanceSelectComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => PerformanceSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'performance_id'\"\n  [class]=\"customClass\"\n  [options]=\"performances()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onPerformanceSelected($event)\"\n></form-select>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: PerformanceService }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], performanceChange: [{
+                type: Output
+            }] } });
+
+class PerformanceMultiSelectComponent {
+    platformId;
+    performanceService;
+    label = 'Funciones';
+    placeholder = 'Buscar funciones...';
+    allPerformances = signal([], ...(ngDevMode ? [{ debugName: "allPerformances" }] : []));
+    filteredPerformances = signal([], ...(ngDevMode ? [{ debugName: "filteredPerformances" }] : []));
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    selectedIds = [];
+    searchTerm = '';
+    searchSubject = new Subject();
+    destroy$ = new Subject();
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(platformId, performanceService) {
+        this.platformId = platformId;
+        this.performanceService = performanceService;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.performanceService.loadPerformances({});
+            this.performanceService.performances$
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((performances) => {
+                this.allPerformances.set(performances?.map((p) => ({
+                    value: p.id,
+                    label: `${p.show?.title || `Show #${p.show_id}`} - ${new Date(p.start_time).toLocaleString()}`,
+                })) || []);
+                this.applyFilter();
+                this.loading.set(false);
+            });
+            this.searchSubject
+                .pipe(debounceTime(400), distinctUntilChanged(), takeUntil(this.destroy$))
+                .subscribe((search) => {
+                this.searchTerm = search;
+                this.performanceService.loadPerformances({ search: this.searchTerm });
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    applyFilter() {
+        if (this.searchTerm) {
+            const term = this.searchTerm.toLowerCase();
+            this.filteredPerformances.set(this.allPerformances().filter((p) => p.label.toLowerCase().includes(term)));
+        }
+        else {
+            this.filteredPerformances.set([...this.allPerformances()]);
+        }
+    }
+    onSearchChange(event) {
+        const value = event.target.value;
+        this.searchSubject.next(value);
+    }
+    isSelected(id) {
+        return this.selectedIds.includes(id);
+    }
+    togglePerformance(id) {
+        const index = this.selectedIds.indexOf(id);
+        if (index > -1) {
+            this.selectedIds = this.selectedIds.filter((v) => v !== id);
+        }
+        else {
+            this.selectedIds = [...this.selectedIds, id];
+        }
+        this.onChange(this.selectedIds);
+        this.onTouched();
+    }
+    removePerformance(id) {
+        this.togglePerformance(id);
+    }
+    getPerformanceLabel(id) {
+        return this.allPerformances().find((p) => p.value === id)?.label || '';
+    }
+    writeValue(value) {
+        this.selectedIds = value || [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceMultiSelectComponent, deps: [{ token: PLATFORM_ID }, { token: PerformanceService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PerformanceMultiSelectComponent, isStandalone: true, selector: "performance-multi-select", inputs: { label: "label", placeholder: "placeholder" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PerformanceMultiSelectComponent),
+                multi: 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    </label>\n  }\n\n  @if (selectedIds.length > 0) {\n    <div class=\"flex flex-wrap gap-1 mb-2\">\n      @for (id of selectedIds; track id) {\n        <span\n          class=\"inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800\"\n        >\n          {{ getPerformanceLabel(id) }}\n          <button\n            type=\"button\"\n            class=\"ml-1 hover:text-green-600 leading-none\"\n            (click)=\"removePerformance(id)\"\n          >\n            &times;\n          </button>\n        </span>\n      }\n    </div>\n  }\n\n  <input\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    class=\"w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent\"\n    (input)=\"onSearchChange($event)\"\n  />\n\n  @if (loading()) {\n    <div class=\"flex items-center gap-2 mt-2 text-sm text-gray-500\">\n      <div\n        class=\"w-4 h-4 border-2 border-gray-200 border-t-green-500 rounded-full animate-spin\"\n      ></div>\n      Cargando funciones...\n    </div>\n  }\n\n  @if (!loading() && filteredPerformances().length > 0) {\n    <div\n      class=\"mt-1 max-h-48 overflow-y-auto border border-gray-200 rounded-md divide-y divide-gray-100\"\n    >\n      @for (p of filteredPerformances(); track p.value) {\n        <label class=\"flex items-center gap-2 px-3 py-2 hover:bg-gray-50 cursor-pointer text-sm\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(p.value)\"\n            (change)=\"togglePerformance(p.value)\"\n            class=\"w-4 h-4 accent-green-500 cursor-pointer\"\n          />\n          <span class=\"text-gray-700 select-none\">{{ p.label }}</span>\n        </label>\n      }\n    </div>\n  }\n\n  @if (!loading() && filteredPerformances().length === 0) {\n    <p class=\"text-sm text-gray-500 mt-1\">No se encontraron funciones</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'performance-multi-select', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PerformanceMultiSelectComponent),
+                            multi: true,
+                        },
+                    ], 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    </label>\n  }\n\n  @if (selectedIds.length > 0) {\n    <div class=\"flex flex-wrap gap-1 mb-2\">\n      @for (id of selectedIds; track id) {\n        <span\n          class=\"inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800\"\n        >\n          {{ getPerformanceLabel(id) }}\n          <button\n            type=\"button\"\n            class=\"ml-1 hover:text-green-600 leading-none\"\n            (click)=\"removePerformance(id)\"\n          >\n            &times;\n          </button>\n        </span>\n      }\n    </div>\n  }\n\n  <input\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    class=\"w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent\"\n    (input)=\"onSearchChange($event)\"\n  />\n\n  @if (loading()) {\n    <div class=\"flex items-center gap-2 mt-2 text-sm text-gray-500\">\n      <div\n        class=\"w-4 h-4 border-2 border-gray-200 border-t-green-500 rounded-full animate-spin\"\n      ></div>\n      Cargando funciones...\n    </div>\n  }\n\n  @if (!loading() && filteredPerformances().length > 0) {\n    <div\n      class=\"mt-1 max-h-48 overflow-y-auto border border-gray-200 rounded-md divide-y divide-gray-100\"\n    >\n      @for (p of filteredPerformances(); track p.value) {\n        <label class=\"flex items-center gap-2 px-3 py-2 hover:bg-gray-50 cursor-pointer text-sm\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(p.value)\"\n            (change)=\"togglePerformance(p.value)\"\n            class=\"w-4 h-4 accent-green-500 cursor-pointer\"\n          />\n          <span class=\"text-gray-700 select-none\">{{ p.label }}</span>\n        </label>\n      }\n    </div>\n  }\n\n  @if (!loading() && filteredPerformances().length === 0) {\n    <p class=\"text-sm text-gray-500 mt-1\">No se encontraron funciones</p>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: PerformanceService }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+class ProductSelectComponent {
+    platformId;
+    productService;
+    label = 'Producto';
+    placeholder = 'Selecciona un producto';
+    name = 'product_id';
+    required = false;
+    readonly = false;
+    showError = true;
+    customClass = '';
+    control = null;
+    productChange = new EventEmitter();
+    products = signal([], ...(ngDevMode ? [{ debugName: "products" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    searchTerm = '';
+    searchSubject = new Subject();
+    destroy$ = new Subject();
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(platformId, productService) {
+        this.platformId = platformId;
+        this.productService = productService;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.productService.loadProducts({ search: this.searchTerm });
+            this.productService.products$
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((products) => {
+                this.products.set(products?.map((product) => ({
+                    value: product.id,
+                    label: product.name,
+                })) || []);
+                this.loading.set(false);
+            });
+            this.searchSubject
+                .pipe(debounceTime(400), distinctUntilChanged(), takeUntil(this.destroy$))
+                .subscribe((search) => {
+                this.searchTerm = search;
+                this.productService.loadProducts({ search: this.searchTerm });
+            });
+        }
+    }
+    get formControl() {
+        return this.control;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onSearchChange(search) {
+        this.searchSubject.next(search);
+    }
+    onProductSelected(event) {
+        const select = event.target;
+        const value = select.value ? Number(select.value) : null;
+        this.value = value;
+        if (this.control) {
+            this.control.setValue(value);
+            this.control.markAsTouched();
+        }
+        this.productChange.emit(value);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) {
+        if (this.required && !control.value) {
+            return { required: true };
+        }
+        return null;
+    }
+    get isInvalid() {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProductSelectComponent, deps: [{ token: PLATFORM_ID }, { token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ProductSelectComponent, isStandalone: true, selector: "product-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", showError: "showError", customClass: "customClass", control: "control" }, outputs: { productChange: "productChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ProductSelectComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => ProductSelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'product_id'\"\n  [class]=\"customClass\"\n  [options]=\"products()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onProductSelected($event)\"\n></form-select>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProductSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'product-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ProductSelectComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => ProductSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'product_id'\"\n  [class]=\"customClass\"\n  [options]=\"products()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onProductSelected($event)\"\n></form-select>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: ProductService }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], productChange: [{
+                type: Output
+            }] } });
+
+class ProductMultiSelectComponent {
+    platformId;
+    productService;
+    label = 'Productos';
+    placeholder = 'Buscar productos...';
+    set initialSelection(ids) {
+        this.selectedIds = ids ?? [];
+    }
+    selectionChange = new EventEmitter();
+    allProducts = signal([], ...(ngDevMode ? [{ debugName: "allProducts" }] : []));
+    filteredProducts = signal([], ...(ngDevMode ? [{ debugName: "filteredProducts" }] : []));
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    selectedIds = [];
+    searchTerm = '';
+    searchSubject = new Subject();
+    destroy$ = new Subject();
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(platformId, productService) {
+        this.platformId = platformId;
+        this.productService = productService;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.productService.loadProducts({ search: this.searchTerm });
+            this.productService.products$
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((products) => {
+                this.allProducts.set(products?.map((p) => ({
+                    value: p.id,
+                    label: p.name,
+                    imageUrl: p.images?.[0]?.full_url ?? null,
+                })) || []);
+                this.applyFilter();
+                this.loading.set(false);
+            });
+            this.searchSubject
+                .pipe(debounceTime(400), distinctUntilChanged(), takeUntil(this.destroy$))
+                .subscribe((search) => {
+                this.searchTerm = search;
+                this.productService.loadProducts({ search: this.searchTerm });
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    applyFilter() {
+        if (this.searchTerm) {
+            const term = this.searchTerm.toLowerCase();
+            this.filteredProducts.set(this.allProducts().filter((p) => p.label.toLowerCase().includes(term)));
+        }
+        else {
+            this.filteredProducts.set([...this.allProducts()]);
+        }
+    }
+    onSearchChange(event) {
+        const value = event.target.value;
+        this.searchSubject.next(value);
+    }
+    isSelected(id) {
+        return this.selectedIds.includes(id);
+    }
+    toggleProduct(id) {
+        const index = this.selectedIds.indexOf(id);
+        if (index > -1) {
+            this.selectedIds = this.selectedIds.filter((v) => v !== id);
+        }
+        else {
+            this.selectedIds = [...this.selectedIds, id];
+        }
+        this.onChange(this.selectedIds);
+        this.onTouched();
+        this.selectionChange.emit(this.selectedIds);
+    }
+    removeProduct(id) {
+        this.toggleProduct(id);
+    }
+    getProductOption(id) {
+        return this.allProducts().find((p) => p.value === id);
+    }
+    writeValue(value) {
+        this.selectedIds = value || [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProductMultiSelectComponent, deps: [{ token: PLATFORM_ID }, { token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ProductMultiSelectComponent, isStandalone: true, selector: "product-multi-select", inputs: { label: "label", placeholder: "placeholder", initialSelection: "initialSelection" }, outputs: { selectionChange: "selectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ProductMultiSelectComponent),
+                multi: 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    </label>\n  }\n\n  @if (selectedIds.length > 0) {\n    <div class=\"flex flex-wrap gap-1 mb-2\">\n      @for (id of selectedIds; track id) {\n        @let product = getProductOption(id);\n        <span\n          class=\"inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800\"\n        >\n          @if (product?.imageUrl) {\n            <img [src]=\"product!.imageUrl\" alt=\"\" class=\"w-4 h-4 rounded-full object-cover\" />\n          }\n          {{ product?.label ?? id }}\n          <button\n            type=\"button\"\n            class=\"ml-1 hover:text-green-600 leading-none\"\n            (click)=\"removeProduct(id)\"\n          >\n            &times;\n          </button>\n        </span>\n      }\n    </div>\n  }\n\n  <input\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    class=\"w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent\"\n    (input)=\"onSearchChange($event)\"\n  />\n\n  @if (loading()) {\n    <div class=\"flex items-center gap-2 mt-2 text-sm text-gray-500\">\n      <div\n        class=\"w-4 h-4 border-2 border-gray-200 border-t-green-500 rounded-full animate-spin\"\n      ></div>\n      Cargando productos...\n    </div>\n  }\n\n  @if (!loading() && filteredProducts().length > 0) {\n    <div\n      class=\"mt-1 max-h-48 overflow-y-auto border border-gray-200 rounded-md divide-y divide-gray-100\"\n    >\n      @for (p of filteredProducts(); track p.value) {\n        <label class=\"flex items-center gap-2 px-3 py-2 hover:bg-gray-50 cursor-pointer text-sm\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(p.value)\"\n            (change)=\"toggleProduct(p.value)\"\n            class=\"w-4 h-4 accent-green-500 cursor-pointer\"\n          />\n          @if (p.imageUrl) {\n            <img [src]=\"p.imageUrl\" alt=\"\" class=\"w-6 h-6 rounded object-cover\" />\n          } @else {\n            <div class=\"w-6 h-6 rounded bg-gray-200 flex items-center justify-center\">\n              <i class=\"ri-image-line text-gray-400 text-xs\"></i>\n            </div>\n          }\n          <span class=\"text-gray-700 select-none\">{{ p.label }}</span>\n        </label>\n      }\n    </div>\n  }\n\n  @if (!loading() && filteredProducts().length === 0) {\n    <p class=\"text-sm text-gray-500 mt-1\">No se encontraron productos</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProductMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'product-multi-select', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ProductMultiSelectComponent),
+                            multi: true,
+                        },
+                    ], 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    </label>\n  }\n\n  @if (selectedIds.length > 0) {\n    <div class=\"flex flex-wrap gap-1 mb-2\">\n      @for (id of selectedIds; track id) {\n        @let product = getProductOption(id);\n        <span\n          class=\"inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800\"\n        >\n          @if (product?.imageUrl) {\n            <img [src]=\"product!.imageUrl\" alt=\"\" class=\"w-4 h-4 rounded-full object-cover\" />\n          }\n          {{ product?.label ?? id }}\n          <button\n            type=\"button\"\n            class=\"ml-1 hover:text-green-600 leading-none\"\n            (click)=\"removeProduct(id)\"\n          >\n            &times;\n          </button>\n        </span>\n      }\n    </div>\n  }\n\n  <input\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    class=\"w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent\"\n    (input)=\"onSearchChange($event)\"\n  />\n\n  @if (loading()) {\n    <div class=\"flex items-center gap-2 mt-2 text-sm text-gray-500\">\n      <div\n        class=\"w-4 h-4 border-2 border-gray-200 border-t-green-500 rounded-full animate-spin\"\n      ></div>\n      Cargando productos...\n    </div>\n  }\n\n  @if (!loading() && filteredProducts().length > 0) {\n    <div\n      class=\"mt-1 max-h-48 overflow-y-auto border border-gray-200 rounded-md divide-y divide-gray-100\"\n    >\n      @for (p of filteredProducts(); track p.value) {\n        <label class=\"flex items-center gap-2 px-3 py-2 hover:bg-gray-50 cursor-pointer text-sm\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(p.value)\"\n            (change)=\"toggleProduct(p.value)\"\n            class=\"w-4 h-4 accent-green-500 cursor-pointer\"\n          />\n          @if (p.imageUrl) {\n            <img [src]=\"p.imageUrl\" alt=\"\" class=\"w-6 h-6 rounded object-cover\" />\n          } @else {\n            <div class=\"w-6 h-6 rounded bg-gray-200 flex items-center justify-center\">\n              <i class=\"ri-image-line text-gray-400 text-xs\"></i>\n            </div>\n          }\n          <span class=\"text-gray-700 select-none\">{{ p.label }}</span>\n        </label>\n      }\n    </div>\n  }\n\n  @if (!loading() && filteredProducts().length === 0) {\n    <p class=\"text-sm text-gray-500 mt-1\">No se encontraron productos</p>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: ProductService }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], initialSelection: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+class ShowSelectComponent {
+    platformId;
+    showService;
+    label = 'Función';
+    placeholder = 'Selecciona una función';
+    name = 'show_id';
+    required = false;
+    readonly = false;
+    showError = true;
+    customClass = '';
+    control = null;
+    showChange = new EventEmitter();
+    shows = signal([], ...(ngDevMode ? [{ debugName: "shows" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    searchTerm = '';
+    searchSubject = new Subject();
+    destroy$ = new Subject();
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(platformId, showService) {
+        this.platformId = platformId;
+        this.showService = showService;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.showService.loadShows({ search: this.searchTerm });
+            this.showService.shows$.pipe(takeUntil(this.destroy$)).subscribe((shows) => {
+                const formatted = shows?.map((show) => ({ value: show.id, label: show.title })) || [];
+                this.shows.set(formatted);
+                this.loading.set(false);
+            });
+            this.searchSubject
+                .pipe(debounceTime(400), distinctUntilChanged(), takeUntil(this.destroy$))
+                .subscribe((search) => {
+                this.searchTerm = search;
+                this.showService.loadShows({ search: this.searchTerm });
+            });
+        }
+    }
+    get formControl() {
+        return this.control;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onSearchChange(search) {
+        this.searchSubject.next(search);
+    }
+    onShowSelected(event) {
+        const select = event.target;
+        const value = select.value ? Number(select.value) : null;
+        this.value = value;
+        if (this.control) {
+            this.control.setValue(value);
+            this.control.markAsTouched();
+        }
+        this.showChange.emit(value);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) {
+        if (this.required && !control.value) {
+            return { required: true };
+        }
+        return null;
+    }
+    get isInvalid() {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowSelectComponent, deps: [{ token: PLATFORM_ID }, { token: ShowService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ShowSelectComponent, isStandalone: true, selector: "show-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", showError: "showError", customClass: "customClass", control: "control" }, outputs: { showChange: "showChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ShowSelectComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => ShowSelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'show_id'\"\n  [class]=\"customClass\"\n  [options]=\"shows()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onShowSelected($event)\"\n></form-select>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'show-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ShowSelectComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => ShowSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'show_id'\"\n  [class]=\"customClass\"\n  [options]=\"shows()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onShowSelected($event)\"\n></form-select>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: ShowService }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], showChange: [{
+                type: Output
+            }] } });
+
+class ShowMultiSelectComponent {
+    platformId;
+    showService;
+    label = 'Funciones';
+    placeholder = 'Buscar funciones...';
+    allShows = signal([], ...(ngDevMode ? [{ debugName: "allShows" }] : []));
+    filteredShows = signal([], ...(ngDevMode ? [{ debugName: "filteredShows" }] : []));
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    selectedIds = [];
+    searchTerm = '';
+    searchSubject = new Subject();
+    destroy$ = new Subject();
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(platformId, showService) {
+        this.platformId = platformId;
+        this.showService = showService;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.showService.loadShows({});
+            this.showService.shows$.pipe(takeUntil(this.destroy$)).subscribe((shows) => {
+                this.allShows.set(shows?.map((show) => ({
+                    value: show.id,
+                    label: show.title,
+                })) || []);
+                this.applyFilter();
+                this.loading.set(false);
+            });
+            this.searchSubject
+                .pipe(debounceTime(400), distinctUntilChanged(), takeUntil(this.destroy$))
+                .subscribe((search) => {
+                this.searchTerm = search;
+                this.showService.loadShows({ search: this.searchTerm });
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    applyFilter() {
+        if (this.searchTerm) {
+            const term = this.searchTerm.toLowerCase();
+            this.filteredShows.set(this.allShows().filter((s) => s.label.toLowerCase().includes(term)));
+        }
+        else {
+            this.filteredShows.set([...this.allShows()]);
+        }
+    }
+    onSearchChange(event) {
+        const value = event.target.value;
+        this.searchSubject.next(value);
+    }
+    isSelected(id) {
+        return this.selectedIds.includes(id);
+    }
+    toggleShow(id) {
+        const index = this.selectedIds.indexOf(id);
+        if (index > -1) {
+            this.selectedIds = this.selectedIds.filter((v) => v !== id);
+        }
+        else {
+            this.selectedIds = [...this.selectedIds, id];
+        }
+        this.onChange(this.selectedIds);
+        this.onTouched();
+    }
+    removeShow(id) {
+        this.toggleShow(id);
+    }
+    getShowLabel(id) {
+        return this.allShows().find((s) => s.value === id)?.label || '';
+    }
+    writeValue(value) {
+        this.selectedIds = value || [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowMultiSelectComponent, deps: [{ token: PLATFORM_ID }, { token: ShowService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ShowMultiSelectComponent, isStandalone: true, selector: "show-multi-select", inputs: { label: "label", placeholder: "placeholder" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ShowMultiSelectComponent),
+                multi: 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    </label>\n  }\n\n  @if (selectedIds.length > 0) {\n    <div class=\"flex flex-wrap gap-1 mb-2\">\n      @for (id of selectedIds; track id) {\n        <span\n          class=\"inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800\"\n        >\n          {{ getShowLabel(id) }}\n          <button\n            type=\"button\"\n            class=\"ml-1 hover:text-blue-600 leading-none\"\n            (click)=\"removeShow(id)\"\n          >\n            &times;\n          </button>\n        </span>\n      }\n    </div>\n  }\n\n  <input\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    class=\"w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n    (input)=\"onSearchChange($event)\"\n  />\n\n  @if (loading()) {\n    <div class=\"flex items-center gap-2 mt-2 text-sm text-gray-500\">\n      <div\n        class=\"w-4 h-4 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin\"\n      ></div>\n      Cargando funciones...\n    </div>\n  }\n\n  @if (!loading() && filteredShows().length > 0) {\n    <div\n      class=\"mt-1 max-h-48 overflow-y-auto border border-gray-200 rounded-md divide-y divide-gray-100\"\n    >\n      @for (show of filteredShows(); track show.value) {\n        <label class=\"flex items-center gap-2 px-3 py-2 hover:bg-gray-50 cursor-pointer text-sm\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(show.value)\"\n            (change)=\"toggleShow(show.value)\"\n            class=\"w-4 h-4 accent-blue-500 cursor-pointer\"\n          />\n          <span class=\"text-gray-700 select-none\">{{ show.label }}</span>\n        </label>\n      }\n    </div>\n  }\n\n  @if (!loading() && filteredShows().length === 0) {\n    <p class=\"text-sm text-gray-500 mt-1\">No se encontraron funciones</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'show-multi-select', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ShowMultiSelectComponent),
+                            multi: true,
+                        },
+                    ], 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    </label>\n  }\n\n  @if (selectedIds.length > 0) {\n    <div class=\"flex flex-wrap gap-1 mb-2\">\n      @for (id of selectedIds; track id) {\n        <span\n          class=\"inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800\"\n        >\n          {{ getShowLabel(id) }}\n          <button\n            type=\"button\"\n            class=\"ml-1 hover:text-blue-600 leading-none\"\n            (click)=\"removeShow(id)\"\n          >\n            &times;\n          </button>\n        </span>\n      }\n    </div>\n  }\n\n  <input\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    class=\"w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n    (input)=\"onSearchChange($event)\"\n  />\n\n  @if (loading()) {\n    <div class=\"flex items-center gap-2 mt-2 text-sm text-gray-500\">\n      <div\n        class=\"w-4 h-4 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin\"\n      ></div>\n      Cargando funciones...\n    </div>\n  }\n\n  @if (!loading() && filteredShows().length > 0) {\n    <div\n      class=\"mt-1 max-h-48 overflow-y-auto border border-gray-200 rounded-md divide-y divide-gray-100\"\n    >\n      @for (show of filteredShows(); track show.value) {\n        <label class=\"flex items-center gap-2 px-3 py-2 hover:bg-gray-50 cursor-pointer text-sm\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(show.value)\"\n            (change)=\"toggleShow(show.value)\"\n            class=\"w-4 h-4 accent-blue-500 cursor-pointer\"\n          />\n          <span class=\"text-gray-700 select-none\">{{ show.label }}</span>\n        </label>\n      }\n    </div>\n  }\n\n  @if (!loading() && filteredShows().length === 0) {\n    <p class=\"text-sm text-gray-500 mt-1\">No se encontraron funciones</p>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: ShowService }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+class PriceZoneSelectComponent {
+    platformId;
+    priceZoneService;
+    label = 'Categoría';
+    placeholder = 'Selecciona una categoría';
+    name = 'price_zone_id';
+    required = false;
+    readonly = false;
+    showError = true;
+    customClass = '';
+    control = null;
+    priceZoneChange = new EventEmitter();
+    priceZones = signal([], ...(ngDevMode ? [{ debugName: "priceZones" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    searchTerm = '';
+    searchSubject = new Subject();
+    destroy$ = new Subject();
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(platformId, priceZoneService) {
+        this.platformId = platformId;
+        this.priceZoneService = priceZoneService;
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.priceZoneService.loadPriceZones({ search: this.searchTerm });
+            this.priceZoneService.priceZones$
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((priceZones) => {
+                this.priceZones.set(priceZones?.map((pz) => ({
+                    value: pz.id,
+                    label: pz.name,
+                })) || []);
+                this.loading.set(false);
+            });
+            this.searchSubject
+                .pipe(debounceTime(400), distinctUntilChanged(), takeUntil(this.destroy$))
+                .subscribe((search) => {
+                this.searchTerm = search;
+                this.priceZoneService.loadPriceZones({ search: this.searchTerm });
+            });
+        }
+    }
+    get formControl() {
+        return this.control;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onSearchChange(search) {
+        this.searchSubject.next(search);
+    }
+    onPriceZoneSelected(event) {
+        const select = event.target;
+        const value = select.value ? Number(select.value) : null;
+        this.value = value;
+        if (this.control) {
+            this.control.setValue(value);
+            this.control.markAsTouched();
+        }
+        this.priceZoneChange.emit(value);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) {
+        if (this.required && !control.value) {
+            return { required: true };
+        }
+        return null;
+    }
+    get isInvalid() {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneSelectComponent, deps: [{ token: PLATFORM_ID }, { token: PriceZoneService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PriceZoneSelectComponent, isStandalone: true, selector: "price-zone-select", inputs: { label: "label", placeholder: "placeholder", name: "name", required: "required", readonly: "readonly", showError: "showError", customClass: "customClass", control: "control" }, outputs: { priceZoneChange: "priceZoneChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PriceZoneSelectComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => PriceZoneSelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'price_zone_id'\"\n  [class]=\"customClass\"\n  [options]=\"priceZones()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onPriceZoneSelected($event)\"\n></form-select>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormSelectComponent, selector: "form-select", inputs: ["label", "name", "id", "placeholder", "required", "disabled", "readonly", "options", "fieldGroupClass", "showDefaultOption", "defaultOptionLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PriceZoneSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'price-zone-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormSelectComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PriceZoneSelectComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => PriceZoneSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<form-select\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n  [name]=\"name || 'price_zone_id'\"\n  [class]=\"customClass\"\n  [options]=\"priceZones()\"\n  [required]=\"required\"\n  [readonly]=\"readonly\"\n  [formControl]=\"formControl\"\n  (change)=\"onPriceZoneSelected($event)\"\n></form-select>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: PriceZoneService }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], priceZoneChange: [{
+                type: Output
+            }] } });
+
+// 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 };
+//# sourceMappingURL=tickera-angular-components.mjs.map