@up_si_vale/sivale-componentes-angular 1.0.0 → 1.0.1

package/fesm2022/up_si_vale-sivale-componentes-angular.mjs

@@ -0,0 +1,3844 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, Input, Optional, Inject, Directive, HostListener, Self, HostBinding, EventEmitter, Output, Component, forwardRef, ChangeDetectionStrategy, ElementRef, ViewChild, RendererStyleFlags2, ContentChild, ContentChildren } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1$1 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+
+/**
+ * Base URL para los assets remotos del microfrontend (íconos, imágenes).
+ * El consumidor debe proveerlo, normalmente con el valor de `environment.mfAssetsUrl`.
+ */
+const ASSET_BASE_URL = new InjectionToken('ASSET_BASE_URL', {
+    providedIn: 'root',
+    factory: () => ''
+});
+
+class SnackbarService {
+    snackbarSubject = new Subject();
+    snackbar$ = this.snackbarSubject.asObservable();
+    dismissSubject = new Subject();
+    dismiss$ = this.dismissSubject.asObservable();
+    snackbarIdCounter = 0;
+    constructor() {
+    }
+    /**
+     * Show success snackbar
+     */
+    success(message, duration = 5000, position) {
+        this.show({
+            message,
+            type: 'success',
+            duration,
+            position
+        });
+    }
+    /**
+     * Show error snackbar
+     */
+    error(message, duration = 5000, position) {
+        this.show({
+            message,
+            type: 'error',
+            duration,
+            position
+        });
+    }
+    /**
+     * Show warning snackbar
+     */
+    warning(message, duration = 5000, position) {
+        this.show({
+            message,
+            type: 'warning',
+            duration,
+            position
+        });
+    }
+    /**
+     * Show info snackbar
+     */
+    info(message, duration = 5000, position) {
+        this.show({
+            message,
+            type: 'info',
+            duration,
+            position
+        });
+    }
+    /**
+     * Show snackbar with custom configuration
+     */
+    show(config) {
+        const id = `snackbar-${++this.snackbarIdCounter}`;
+        const snackbarData = {
+            ...config,
+            id,
+            duration: config.duration ?? 5000,
+            position: config.position ?? 'top-right'
+        };
+        this.snackbarSubject.next(snackbarData);
+        // Auto dismiss after duration
+        if (snackbarData.duration && snackbarData.duration > 0) {
+            setTimeout(() => {
+                this.dismiss(id);
+            }, snackbarData.duration);
+        }
+    }
+    /**
+     * Dismiss specific snackbar by id
+     */
+    dismiss(id) {
+        this.dismissSubject.next(id);
+    }
+    /**
+     * Dismiss all snackbars
+     */
+    dismissAll() {
+        this.dismissSubject.next('all');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class AssetSourceDirective {
+    el;
+    assetBaseUrl;
+    assetSource = 'mf';
+    assetPath;
+    originalSrc = null;
+    constructor(el, assetBaseUrl) {
+        this.el = el;
+        this.assetBaseUrl = assetBaseUrl;
+    }
+    ngOnInit() {
+        this.captureOriginalSrc();
+    }
+    ngAfterViewInit() {
+        this.updateSrc();
+    }
+    ngOnChanges() {
+        this.updateSrc();
+    }
+    captureOriginalSrc() {
+        if (this.el.nativeElement.tagName === 'IMG') {
+            this.originalSrc = this.el.nativeElement.getAttribute('src');
+        }
+    }
+    updateSrc() {
+        const assetPath = this.assetPath || this.originalSrc;
+        if (!assetPath) {
+            return;
+        }
+        const baseUrl = this.getBaseUrl();
+        const fullPath = `${baseUrl}/${assetPath}`;
+        if (this.el.nativeElement.tagName === 'IMG') {
+            this.el.nativeElement.src = fullPath;
+        }
+    }
+    getBaseUrl() {
+        switch (this.assetSource) {
+            case 'mf':
+                return this.assetBaseUrl ?? '';
+            case 'main':
+                return '/assets';
+            default:
+                return this.assetBaseUrl ?? '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AssetSourceDirective, deps: [{ token: i0.ElementRef }, { token: ASSET_BASE_URL, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AssetSourceDirective, isStandalone: true, selector: "[assetSource]", inputs: { assetSource: "assetSource", assetPath: "assetPath" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AssetSourceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[assetSource]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ASSET_BASE_URL]
+                }] }], propDecorators: { assetSource: [{
+                type: Input
+            }], assetPath: [{
+                type: Input
+            }] } });
+
+class IconSourceDirective {
+    el;
+    assetBaseUrl;
+    iconName;
+    assetSource = 'mf';
+    constructor(el, assetBaseUrl) {
+        this.el = el;
+        this.assetBaseUrl = assetBaseUrl;
+    }
+    ngOnInit() {
+        this.addIconClass();
+    }
+    ngAfterViewInit() {
+        this.setIconUrl();
+    }
+    ngOnChanges() {
+        this.setIconUrl();
+    }
+    addIconClass() {
+        if (this.iconName) {
+            this.el.nativeElement.classList.add(`icon-${this.iconName}`);
+        }
+    }
+    setIconUrl() {
+        if (!this.iconName) {
+            return;
+        }
+        const baseUrl = this.getBaseUrl();
+        const iconUrl = `${baseUrl}/icons/${this.iconName}.svg`;
+        this.el.nativeElement.style.maskImage = `url('${iconUrl}')`;
+        this.el.nativeElement.style.webkitMaskImage = `url('${iconUrl}')`;
+    }
+    getBaseUrl() {
+        switch (this.assetSource) {
+            case 'mf':
+                return this.assetBaseUrl ?? '';
+            case 'main':
+                return '/assets';
+            default:
+                return this.assetBaseUrl ?? '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconSourceDirective, deps: [{ token: i0.ElementRef }, { token: ASSET_BASE_URL, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: IconSourceDirective, isStandalone: true, selector: "i[iconName]", inputs: { iconName: "iconName", assetSource: "assetSource" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconSourceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'i[iconName]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ASSET_BASE_URL]
+                }] }], propDecorators: { iconName: [{
+                type: Input
+            }], assetSource: [{
+                type: Input
+            }] } });
+
+class OnlyNumberDirective {
+    onInput(event) {
+        const value = event.target.value;
+        event.target.value = value.replace(/\D/g, '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnlyNumberDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OnlyNumberDirective, isStandalone: true, selector: "[onlyNumber]", host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnlyNumberDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[onlyNumber]',
+                    standalone: true
+                }]
+        }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
+class OnlyLettersDirective {
+    regex = /^[A-Za-zÁÉÍÓÚÜÑáéíóúüñ' -]*$/;
+    onInput(event) {
+        const value = event.target.value;
+        event.target.value = value
+            .split('')
+            .filter(char => this.regex.test(char))
+            .join('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnlyLettersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OnlyLettersDirective, isStandalone: true, selector: "[onlyLetters]", host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnlyLettersDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[onlyLetters]',
+                    standalone: true
+                }]
+        }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
+class RfcDirective {
+    ngControl;
+    tipoContribuyente = null;
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+    }
+    // Función para obtener el límite según el tipo de contribuyente
+    getMaxLength() {
+        if (this.tipoContribuyente === 'fisica')
+            return 13;
+        if (this.tipoContribuyente === 'moral')
+            return 12;
+        return 13; // Default por si no llega el valor
+    }
+    onInput(event) {
+        const input = event.target;
+        let value = input.value;
+        // Solo letras y números
+        value = value.replace(/[^a-zA-Z0-9]/g, '');
+        // Mayúsculas
+        value = value.toUpperCase();
+        // Aplicar límite dinámico
+        const max = this.getMaxLength();
+        if (value.length > max) {
+            value = value.substring(0, max);
+        }
+        this.ngControl?.control?.setValue(value, { emitEvent: false });
+    }
+    onPaste(event) {
+        const pasted = event.clipboardData?.getData('text') || '';
+        const max = this.getMaxLength();
+        // Bloquear pegado con caracteres inválidos
+        if (/[^a-zA-Z0-9]/.test(pasted)) {
+            event.preventDefault();
+            return;
+        }
+        // Bloquear pegado si excede el máximo
+        if (pasted.length > max) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RfcDirective, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: RfcDirective, isStandalone: true, selector: "[rfcValidator]", inputs: { tipoContribuyente: "tipoContribuyente" }, host: { listeners: { "input": "onInput($event)", "paste": "onPaste($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RfcDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rfcValidator]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { tipoContribuyente: [{
+                type: Input
+            }], onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }] } });
+
+class NoLeadingSpaceDirective {
+    onInput(event) {
+        const value = event.target.value;
+        // Elimina espacios al inicio
+        if (value.startsWith(' ')) {
+            event.target.value = value.trimStart();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoLeadingSpaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NoLeadingSpaceDirective, isStandalone: true, selector: "[noLeadingSpace]", host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoLeadingSpaceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[noLeadingSpace]',
+                    standalone: true
+                }]
+        }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
+class TooltipDirective {
+    el;
+    renderer;
+    tooltipText = '';
+    tooltipPosition = 'auto';
+    tooltipDelay = 300;
+    tooltipMaxWidth = 280;
+    tooltipClass = '';
+    cursor = 'help';
+    tooltipElement = null;
+    showTimeout;
+    hideTimeout;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    onMouseEnter() {
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = undefined;
+        }
+        this.showTimeout = window.setTimeout(() => {
+            this.showTooltip();
+        }, this.tooltipDelay);
+    }
+    onMouseLeave() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = undefined;
+        }
+        this.hideTimeout = window.setTimeout(() => {
+            this.hideTooltip();
+        }, 100);
+    }
+    onClick() {
+        // Allow click events to propagate
+    }
+    showTooltip() {
+        if (!this.tooltipText || this.tooltipElement) {
+            return;
+        }
+        // Create tooltip element
+        this.tooltipElement = this.renderer.createElement('div');
+        this.renderer.addClass(this.tooltipElement, 'app-tooltip');
+        if (this.tooltipClass) {
+            this.renderer.addClass(this.tooltipElement, this.tooltipClass);
+        }
+        // Create tooltip content
+        const tooltipContent = this.renderer.createElement('div');
+        this.renderer.addClass(tooltipContent, 'app-tooltip-content');
+        this.renderer.setStyle(tooltipContent, 'max-width', `${this.tooltipMaxWidth}px`);
+        const textNode = this.renderer.createText(this.tooltipText);
+        this.renderer.appendChild(tooltipContent, textNode);
+        this.renderer.appendChild(this.tooltipElement, tooltipContent);
+        // Create arrow element
+        const arrow = this.renderer.createElement('div');
+        this.renderer.addClass(arrow, 'app-tooltip-arrow');
+        this.renderer.appendChild(this.tooltipElement, arrow);
+        // Add to body
+        this.renderer.appendChild(document.body, this.tooltipElement);
+        // Position tooltip
+        this.positionTooltip();
+        // Trigger animation
+        requestAnimationFrame(() => {
+            if (this.tooltipElement) {
+                this.renderer.addClass(this.tooltipElement, 'app-tooltip-show');
+            }
+        });
+    }
+    hideTooltip() {
+        if (!this.tooltipElement) {
+            return;
+        }
+        this.renderer.removeClass(this.tooltipElement, 'app-tooltip-show');
+        setTimeout(() => {
+            if (this.tooltipElement) {
+                this.renderer.removeChild(document.body, this.tooltipElement);
+                this.tooltipElement = null;
+            }
+        }, 200);
+    }
+    positionTooltip() {
+        if (!this.tooltipElement) {
+            return;
+        }
+        const hostRect = this.el.nativeElement.getBoundingClientRect();
+        const tooltipRect = this.tooltipElement.getBoundingClientRect();
+        const scrollX = window.scrollX || window.pageXOffset;
+        const scrollY = window.scrollY || window.pageYOffset;
+        const gap = 16; // Space between element and tooltip
+        // Calculate available space in each direction
+        const spaceTop = hostRect.top;
+        const spaceBottom = window.innerHeight - hostRect.bottom;
+        const spaceLeft = hostRect.left;
+        const spaceRight = window.innerWidth - hostRect.right;
+        let position = this.tooltipPosition;
+        let top = 0;
+        let left = 0;
+        // Auto-detect best position
+        if (position === 'auto') {
+            if (spaceTop >= tooltipRect.height + gap) {
+                position = 'top';
+            }
+            else if (spaceBottom >= tooltipRect.height + gap) {
+                position = 'bottom';
+            }
+            else if (spaceRight >= tooltipRect.width + gap) {
+                position = 'right';
+            }
+            else if (spaceLeft >= tooltipRect.width + gap) {
+                position = 'left';
+            }
+            else {
+                // Default to top if no space is sufficient
+                position = 'top';
+            }
+        }
+        // Calculate position based on detected/specified position
+        switch (position) {
+            case 'top':
+                top = hostRect.top + scrollY - tooltipRect.height - gap;
+                left = hostRect.left + scrollX + (hostRect.width / 2) - (tooltipRect.width / 2);
+                break;
+            case 'bottom':
+                top = hostRect.bottom + scrollY + gap;
+                left = hostRect.left + scrollX + (hostRect.width / 2) - (tooltipRect.width / 2);
+                break;
+            case 'left':
+                top = hostRect.top + scrollY + (hostRect.height / 2) - (tooltipRect.height / 2);
+                left = hostRect.left + scrollX - tooltipRect.width - gap;
+                break;
+            case 'right':
+                top = hostRect.top + scrollY + (hostRect.height / 2) - (tooltipRect.height / 2);
+                left = hostRect.right + scrollX + gap;
+                break;
+        }
+        // Adjust horizontal position to keep tooltip within viewport
+        if (position === 'top' || position === 'bottom') {
+            const minLeft = scrollX + 10;
+            const maxLeft = scrollX + window.innerWidth - tooltipRect.width - 10;
+            left = Math.max(minLeft, Math.min(left, maxLeft));
+        }
+        // Adjust vertical position to keep tooltip within viewport
+        if (position === 'left' || position === 'right') {
+            const minTop = scrollY + 10;
+            const maxTop = scrollY + window.innerHeight - tooltipRect.height - 10;
+            top = Math.max(minTop, Math.min(top, maxTop));
+        }
+        // Apply position
+        this.renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
+        this.renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
+        // Add position class for arrow styling
+        this.renderer.addClass(this.tooltipElement, `app-tooltip-${position}`);
+    }
+    ngOnDestroy() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+        }
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+        }
+        this.hideTooltip();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: TooltipDirective, isStandalone: true, selector: "[appTooltip]", inputs: { tooltipText: ["appTooltip", "tooltipText"], tooltipPosition: "tooltipPosition", tooltipDelay: "tooltipDelay", tooltipMaxWidth: "tooltipMaxWidth", tooltipClass: "tooltipClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" }, properties: { "style.cursor": "this.cursor" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appTooltip]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipText: [{
+                type: Input,
+                args: ['appTooltip']
+            }], tooltipPosition: [{
+                type: Input
+            }], tooltipDelay: [{
+                type: Input
+            }], tooltipMaxWidth: [{
+                type: Input
+            }], tooltipClass: [{
+                type: Input
+            }], cursor: [{
+                type: HostBinding,
+                args: ['style.cursor']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class ButtonComponent {
+    variant = 'primary';
+    size = 'medium';
+    type = 'button';
+    disabled = false;
+    loading = false;
+    fullWidth = false;
+    id;
+    ariaLabel;
+    onClick = new EventEmitter();
+    get buttonClasses() {
+        return [
+            'svu-btn',
+            `svu-btn--${this.variant}`,
+            `svu-btn--${this.size}`,
+            this.fullWidth ? 'svu-btn--full-width' : '',
+            this.loading ? 'svu-btn--loading' : '',
+            this.disabled ? 'svu-btn--disabled' : ''
+        ].filter(Boolean).join(' ');
+    }
+    handleClick(event) {
+        if (!this.disabled && !this.loading) {
+            this.onClick.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { variant: "variant", size: "size", type: "type", disabled: "disabled", loading: "loading", fullWidth: "fullWidth", id: "id", ariaLabel: "ariaLabel" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [class]=\"buttonClasses\"\n  [disabled]=\"disabled || loading\"\n  [id]=\"id\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-busy]=\"loading\"\n  (click)=\"handleClick($event)\">\n\n  <!-- Loading spinner -->\n  <span *ngIf=\"loading\" class=\"svu-btn__spinner\">\n    <svg class=\"svu-spinner\" viewBox=\"0 0 24 24\">\n      <circle class=\"svu-spinner__circle\" cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke-width=\"3\"></circle>\n    </svg>\n  </span>\n\n  <!-- Content -->\n  <span [class.svu-btn__content--hidden]=\"loading\" class=\"svu-btn__content\">\n    <ng-content></ng-content>\n  </span>\n</button>", styles: [".svu-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:Quicksand,sans-serif;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease-in-out;outline:none!important;text-decoration:none;white-space:nowrap;width:100%}.svu-btn:focus-visible{outline:2px solid transparent;outline-offset:2px}.svu-btn--small{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;height:inherit}.svu-btn--medium{padding:.75rem 1.5rem;font-size:1rem;line-height:1.5rem}.svu-btn--large{padding:1rem 2rem;font-size:1.125rem;line-height:1.75rem}.svu-btn--full-width{width:100%}.svu-btn--primary{background:#364b9f;color:#fff}.svu-btn--primary:hover:not(:disabled):not(.btn--loading){background:#2a3b7f;transform:translateY(-1px);box-shadow:0 4px 12px #364b9f4d}.svu-btn--primary:active:not(:disabled):not(.btn--loading){transform:translateY(0);background:#1f2d5f}.svu-btn--primary:focus-visible{box-shadow:0 0 0 3px #364b9f4d}.svu-btn--secondary{background:#f3f4f6;color:#374151}.svu-btn--secondary:hover:not(:disabled):not(.btn--loading){background:#e5e7eb;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.svu-btn--secondary:active:not(:disabled):not(.btn--loading){transform:translateY(0)}.svu-btn--secondary:focus-visible{box-shadow:0 0 0 3px #37415133}.svu-btn--outline{background:transparent;color:#364b9f;border:1px solid #364B9F}.svu-btn--outline:hover:not(:disabled):not(.btn--loading){background:#364b9f0d;border-color:#2a3b7f;color:#2a3b7f;transform:translateY(-1px)}.svu-btn--outline:active:not(:disabled):not(.btn--loading){transform:translateY(0);background:#364b9f1a}.svu-btn--outline:focus-visible{box-shadow:0 0 0 3px #364b9f33}.svu-btn--ghost{background:transparent;color:#364b9f}.svu-btn--ghost:hover:not(:disabled):not(.btn--loading){background:#364b9f1a;transform:translateY(-1px)}.svu-btn--ghost:active:not(:disabled):not(.btn--loading){transform:translateY(0);background:#364b9f26}.svu-btn--ghost:focus-visible{box-shadow:0 0 0 3px #364b9f33}.svu-btn--danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.svu-btn--danger:hover:not(:disabled):not(.btn--loading){background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}.svu-btn--danger:active:not(:disabled):not(.btn--loading){transform:translateY(0)}.svu-btn--danger:focus-visible{box-shadow:0 0 0 3px #ef44444d}.svu-btn--success{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.svu-btn--success:hover:not(:disabled):not(.btn--loading){background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.svu-btn--success:active:not(:disabled):not(.btn--loading){transform:translateY(0)}.svu-btn--success:focus-visible{box-shadow:0 0 0 3px #10b9814d}.svu-btn:disabled,.svu-btn--disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.svu-btn--loading{cursor:wait;pointer-events:none}.svu-btn__spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}.svu-btn__content{display:flex;align-items:center;gap:.5rem}.svu-btn__content--hidden{visibility:hidden}.svu-spinner{width:1.25rem;height:1.25rem;animation:svu-spin .8s linear infinite}.svu-spinner__circle{stroke:currentColor;stroke-dasharray:50;stroke-dashoffset:25;stroke-linecap:round;animation:svu-spinner-dash 1.5s ease-in-out infinite}@keyframes svu-spin{to{transform:rotate(360deg)}}@keyframes svu-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: "<button\n  [type]=\"type\"\n  [class]=\"buttonClasses\"\n  [disabled]=\"disabled || loading\"\n  [id]=\"id\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-busy]=\"loading\"\n  (click)=\"handleClick($event)\">\n\n  <!-- Loading spinner -->\n  <span *ngIf=\"loading\" class=\"svu-btn__spinner\">\n    <svg class=\"svu-spinner\" viewBox=\"0 0 24 24\">\n      <circle class=\"svu-spinner__circle\" cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke-width=\"3\"></circle>\n    </svg>\n  </span>\n\n  <!-- Content -->\n  <span [class.svu-btn__content--hidden]=\"loading\" class=\"svu-btn__content\">\n    <ng-content></ng-content>\n  </span>\n</button>", styles: [".svu-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:Quicksand,sans-serif;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease-in-out;outline:none!important;text-decoration:none;white-space:nowrap;width:100%}.svu-btn:focus-visible{outline:2px solid transparent;outline-offset:2px}.svu-btn--small{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;height:inherit}.svu-btn--medium{padding:.75rem 1.5rem;font-size:1rem;line-height:1.5rem}.svu-btn--large{padding:1rem 2rem;font-size:1.125rem;line-height:1.75rem}.svu-btn--full-width{width:100%}.svu-btn--primary{background:#364b9f;color:#fff}.svu-btn--primary:hover:not(:disabled):not(.btn--loading){background:#2a3b7f;transform:translateY(-1px);box-shadow:0 4px 12px #364b9f4d}.svu-btn--primary:active:not(:disabled):not(.btn--loading){transform:translateY(0);background:#1f2d5f}.svu-btn--primary:focus-visible{box-shadow:0 0 0 3px #364b9f4d}.svu-btn--secondary{background:#f3f4f6;color:#374151}.svu-btn--secondary:hover:not(:disabled):not(.btn--loading){background:#e5e7eb;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.svu-btn--secondary:active:not(:disabled):not(.btn--loading){transform:translateY(0)}.svu-btn--secondary:focus-visible{box-shadow:0 0 0 3px #37415133}.svu-btn--outline{background:transparent;color:#364b9f;border:1px solid #364B9F}.svu-btn--outline:hover:not(:disabled):not(.btn--loading){background:#364b9f0d;border-color:#2a3b7f;color:#2a3b7f;transform:translateY(-1px)}.svu-btn--outline:active:not(:disabled):not(.btn--loading){transform:translateY(0);background:#364b9f1a}.svu-btn--outline:focus-visible{box-shadow:0 0 0 3px #364b9f33}.svu-btn--ghost{background:transparent;color:#364b9f}.svu-btn--ghost:hover:not(:disabled):not(.btn--loading){background:#364b9f1a;transform:translateY(-1px)}.svu-btn--ghost:active:not(:disabled):not(.btn--loading){transform:translateY(0);background:#364b9f26}.svu-btn--ghost:focus-visible{box-shadow:0 0 0 3px #364b9f33}.svu-btn--danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.svu-btn--danger:hover:not(:disabled):not(.btn--loading){background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}.svu-btn--danger:active:not(:disabled):not(.btn--loading){transform:translateY(0)}.svu-btn--danger:focus-visible{box-shadow:0 0 0 3px #ef44444d}.svu-btn--success{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.svu-btn--success:hover:not(:disabled):not(.btn--loading){background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.svu-btn--success:active:not(:disabled):not(.btn--loading){transform:translateY(0)}.svu-btn--success:focus-visible{box-shadow:0 0 0 3px #10b9814d}.svu-btn:disabled,.svu-btn--disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.svu-btn--loading{cursor:wait;pointer-events:none}.svu-btn__spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}.svu-btn__content{display:flex;align-items:center;gap:.5rem}.svu-btn__content--hidden{visibility:hidden}.svu-spinner{width:1.25rem;height:1.25rem;animation:svu-spin .8s linear infinite}.svu-spinner__circle{stroke:currentColor;stroke-dasharray:50;stroke-dashoffset:25;stroke-linecap:round;animation:svu-spinner-dash 1.5s ease-in-out infinite}@keyframes svu-spin{to{transform:rotate(360deg)}}@keyframes svu-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class InputComponent {
+    cdr;
+    label = '';
+    id = '';
+    placeholder = '';
+    type = 'text';
+    maxLength;
+    hasError = false;
+    errorMessage = '';
+    disabled = false;
+    readonly = false;
+    format = 'alphanumeric';
+    unstyled = false; // Para usar dentro de componentes compuestos
+    value = '';
+    formattedValue = '';
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    writeValue(value) {
+        let processedValue = value || '';
+        // For currency format, enforce maxLength on the raw value (without commas)
+        if (this.format === 'currency' && this.maxLength) {
+            const rawValue = String(processedValue).replace(/[^0-9.]/g, '');
+            if (rawValue.length > this.maxLength) {
+                processedValue = rawValue.slice(0, this.maxLength);
+            }
+        }
+        // For number inputs, enforce maxLength on initial value
+        if (this.type === 'number' && this.maxLength && String(processedValue).length > this.maxLength) {
+            processedValue = String(processedValue).slice(0, this.maxLength);
+        }
+        this.value = processedValue;
+        this.formattedValue = this.applyFormat(this.value);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onInputChange(event) {
+        const target = event.target;
+        let inputValue = target.value;
+        // Parse the value first (removes formatting like commas)
+        let rawValue = this.parseValue(inputValue);
+        // For currency format, enforce maxLength on the raw value (without commas)
+        if (this.format === 'currency' && this.maxLength && String(rawValue).length > this.maxLength) {
+            rawValue = String(rawValue).slice(0, this.maxLength);
+        }
+        // For number inputs or numeric format, maxLength doesn't work natively, so we handle it manually
+        if ((this.type === 'number' || this.format === 'numeric') && this.maxLength) {
+            // Check the length of the raw value (without formatting)
+            const rawString = String(rawValue);
+            if (rawString.length > this.maxLength) {
+                rawValue = rawString.slice(0, this.maxLength);
+                // Update the input value to reflect the truncation
+                target.value = rawValue;
+            }
+        }
+        this.value = rawValue;
+        this.formattedValue = this.applyFormat(rawValue);
+        // Update the input display (for formatted inputs like currency)
+        if (this.format === 'currency') {
+            target.value = this.formattedValue;
+        }
+        this.onChange(rawValue);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    parseValue(value) {
+        switch (this.format) {
+            case 'currency':
+                // Remove all non-numeric characters except decimal point
+                return value.replace(/[^0-9.]/g, '');
+            case 'numeric':
+                // Remove all non-numeric characters (only digits allowed)
+                return value.replace(/[^0-9]/g, '');
+            case 'alphanumeric':
+            default:
+                return value;
+        }
+    }
+    applyFormat(value) {
+        if (!value && value !== 0)
+            return '';
+        switch (this.format) {
+            case 'currency':
+                return this.formatCurrency(value);
+            case 'alphanumeric':
+            default:
+                return String(value);
+        }
+    }
+    formatCurrency(value) {
+        const numValue = typeof value === 'string' ? parseFloat(value.replace(/[^0-9.]/g, '')) : value;
+        if (isNaN(numValue))
+            return '';
+        // Format with thousands separator
+        return numValue.toLocaleString('es-MX', {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { label: "label", id: "id", placeholder: "placeholder", type: "type", maxLength: "maxLength", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled", readonly: "readonly", format: "format", unstyled: "unstyled" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div class="input-wrapper" [class.input-wrapper--unstyled]="unstyled">
+      <label *ngIf="label && !unstyled" [for]="id">{{ label }}</label>
+      <div class="input-container" [class.error]="hasError && !unstyled" [class.input-container--unstyled]="unstyled">
+        <div class="input-prefix-wrapper">
+          <ng-content select="[prefix]"></ng-content>
+        </div>
+        <input
+          noLeadingSpace
+          [type]="type"
+          [id]="id"
+          [placeholder]="placeholder"
+          [attr.maxlength]="format === 'currency' ? null : maxLength"
+          [disabled]="disabled"
+          [readonly]="readonly"
+          class="input-field"
+          [class.error]="hasError && !unstyled"
+          [class.input-field--unstyled]="unstyled"
+          [value]="formattedValue"
+          (blur)="onBlur()"
+          (input)="onInputChange($event)">
+        <div class="input-suffix-wrapper">
+          <ng-content select="[suffix]"></ng-content>
+        </div>
+      </div>
+      <div *ngIf="hasError && errorMessage && !unstyled" class="field-error">
+        {{ errorMessage }}
+      </div>
+    </div>
+  `, isInline: true, styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px white inset!important;box-shadow:0 0 0 30px #fff inset!important;-webkit-text-fill-color:#2E353A!important;transition:background-color 5000s ease-in-out 0s}.input-prefix-wrapper,.input-suffix-wrapper{flex-shrink:0;display:flex;align-items:center;gap:.5rem;font-family:Quicksand,sans-serif;font-size:14px;font-weight:500;color:#969a9c;position:relative;z-index:2;pointer-events:auto!important}.input-prefix-wrapper{margin-right:.5rem;&:empty{display:none;margin-right:0}}.input-suffix-wrapper{margin-left:.5rem;&:empty{display:none;margin-left:0}}.input-prefix-wrapper *,.input-suffix-wrapper *{pointer-events:auto!important}.input-field{position:relative;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NoLeadingSpaceDirective, selector: "[noLeadingSpace]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, IconSourceDirective, NoLeadingSpaceDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="input-wrapper" [class.input-wrapper--unstyled]="unstyled">
+      <label *ngIf="label && !unstyled" [for]="id">{{ label }}</label>
+      <div class="input-container" [class.error]="hasError && !unstyled" [class.input-container--unstyled]="unstyled">
+        <div class="input-prefix-wrapper">
+          <ng-content select="[prefix]"></ng-content>
+        </div>
+        <input
+          noLeadingSpace
+          [type]="type"
+          [id]="id"
+          [placeholder]="placeholder"
+          [attr.maxlength]="format === 'currency' ? null : maxLength"
+          [disabled]="disabled"
+          [readonly]="readonly"
+          class="input-field"
+          [class.error]="hasError && !unstyled"
+          [class.input-field--unstyled]="unstyled"
+          [value]="formattedValue"
+          (blur)="onBlur()"
+          (input)="onInputChange($event)">
+        <div class="input-suffix-wrapper">
+          <ng-content select="[suffix]"></ng-content>
+        </div>
+      </div>
+      <div *ngIf="hasError && errorMessage && !unstyled" class="field-error">
+        {{ errorMessage }}
+      </div>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputComponent),
+                            multi: true
+                        }
+                    ], styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px white inset!important;box-shadow:0 0 0 30px #fff inset!important;-webkit-text-fill-color:#2E353A!important;transition:background-color 5000s ease-in-out 0s}.input-prefix-wrapper,.input-suffix-wrapper{flex-shrink:0;display:flex;align-items:center;gap:.5rem;font-family:Quicksand,sans-serif;font-size:14px;font-weight:500;color:#969a9c;position:relative;z-index:2;pointer-events:auto!important}.input-prefix-wrapper{margin-right:.5rem;&:empty{display:none;margin-right:0}}.input-suffix-wrapper{margin-left:.5rem;&:empty{display:none;margin-left:0}}.input-prefix-wrapper *,.input-suffix-wrapper *{pointer-events:auto!important}.input-field{position:relative;z-index:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], unstyled: [{
+                type: Input
+            }] } });
+
+class TextareaComponent {
+    cdr;
+    label = '';
+    id = '';
+    placeholder = '';
+    rows = 4;
+    maxLength;
+    hasError = false;
+    errorMessage = '';
+    disabled = false;
+    readonly = false;
+    value = '';
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    writeValue(value) {
+        this.value = value || '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onInputChange(event) {
+        const target = event.target;
+        this.value = target.value;
+        this.onChange(this.value);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextareaComponent, isStandalone: true, selector: "app-textarea", inputs: { label: "label", id: "id", placeholder: "placeholder", rows: "rows", maxLength: "maxLength", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled", readonly: "readonly" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextareaComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div class="textarea-wrapper">
+      <label *ngIf="label" [for]="id" class="textarea-label">{{ label }}</label>
+      <div class="textarea-container" [class.error]="hasError">
+        <textarea
+          [id]="id"
+          [placeholder]="placeholder"
+          [rows]="rows"
+          [disabled]="disabled"
+          [readonly]="readonly"
+          [attr.maxlength]="maxLength"
+          class="textarea-field"
+          [class.error]="hasError"
+          [value]="value"
+          (blur)="onBlur()"
+          (input)="onInputChange($event)"
+        ></textarea>
+      </div>
+      <div *ngIf="hasError && errorMessage" class="field-error">
+        {{ errorMessage }}
+      </div>
+    </div>
+  `, isInline: true, styles: [".textarea-wrapper{width:100%;display:flex;flex-direction:column;gap:6px}.textarea-label{font-family:Quicksand,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#414651}.textarea-container{width:100%;&.error .textarea-field{border-color:#f04438}}.textarea-field{width:100%;padding:10px 14px;background:#fff;border:1px solid #D5D7DA;border-radius:8px;font-family:Quicksand,sans-serif;font-weight:400;font-size:16px;line-height:24px;color:#2e353a;resize:vertical;min-height:100px;transition:all .2s ease;box-sizing:border-box;&::placeholder{color:#a4a7ae}&:focus{outline:none;border-color:#f59100;box-shadow:0 0 0 4px #f591001a}&:disabled{background:#f9fafb;cursor:not-allowed}&.error{border-color:#f04438;&:focus{box-shadow:0 0 0 4px #f044381a}}}.field-error{color:#f04438;font-size:.875rem;font-family:Quicksand,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-textarea', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="textarea-wrapper">
+      <label *ngIf="label" [for]="id" class="textarea-label">{{ label }}</label>
+      <div class="textarea-container" [class.error]="hasError">
+        <textarea
+          [id]="id"
+          [placeholder]="placeholder"
+          [rows]="rows"
+          [disabled]="disabled"
+          [readonly]="readonly"
+          [attr.maxlength]="maxLength"
+          class="textarea-field"
+          [class.error]="hasError"
+          [value]="value"
+          (blur)="onBlur()"
+          (input)="onInputChange($event)"
+        ></textarea>
+      </div>
+      <div *ngIf="hasError && errorMessage" class="field-error">
+        {{ errorMessage }}
+      </div>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextareaComponent),
+                            multi: true
+                        }
+                    ], styles: [".textarea-wrapper{width:100%;display:flex;flex-direction:column;gap:6px}.textarea-label{font-family:Quicksand,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#414651}.textarea-container{width:100%;&.error .textarea-field{border-color:#f04438}}.textarea-field{width:100%;padding:10px 14px;background:#fff;border:1px solid #D5D7DA;border-radius:8px;font-family:Quicksand,sans-serif;font-weight:400;font-size:16px;line-height:24px;color:#2e353a;resize:vertical;min-height:100px;transition:all .2s ease;box-sizing:border-box;&::placeholder{color:#a4a7ae}&:focus{outline:none;border-color:#f59100;box-shadow:0 0 0 4px #f591001a}&:disabled{background:#f9fafb;cursor:not-allowed}&.error{border-color:#f04438;&:focus{box-shadow:0 0 0 4px #f044381a}}}.field-error{color:#f04438;font-size:.875rem;font-family:Quicksand,sans-serif}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }] } });
+
+class CheckboxComponent {
+    cdr;
+    elRef;
+    label = '';
+    id = '';
+    hasError = false;
+    errorMessage = '';
+    disabled = false;
+    indeterminate = false;
+    set checked(value) {
+        this.value = !!value;
+        this.cdr.markForCheck();
+    }
+    get checked() {
+        return this.value;
+    }
+    changed = new EventEmitter();
+    value = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr, elRef) {
+        this.cdr = cdr;
+        this.elRef = elRef;
+    }
+    ngAfterViewInit() {
+        this.updateNativeIndeterminate();
+    }
+    ngOnChanges(changes) {
+        if (changes['indeterminate']) {
+            this.updateNativeIndeterminate();
+        }
+    }
+    updateNativeIndeterminate() {
+        const input = this.elRef.nativeElement.querySelector('input[type="checkbox"]');
+        if (input)
+            input.indeterminate = this.indeterminate;
+    }
+    onCheckboxChange(event) {
+        const target = event.target;
+        this.value = target.checked;
+        this.onChange(this.value);
+        this.changed.emit(this.value); // ← EMITE EVENTO MANUAL PARA USO EXTERNO
+        this.cdr.markForCheck();
+    }
+    onTextClick(event) {
+        const target = event.target;
+        if (target.tagName === 'A' || target.closest('a')) {
+            return;
+        }
+        if (this.disabled) {
+            return;
+        }
+        this.value = !this.value;
+        this.onChange(this.value);
+        this.changed.emit(this.value);
+        this.cdr.markForCheck();
+    }
+    writeValue(value) {
+        this.value = !!value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { label: "label", id: "id", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled", indeterminate: "indeterminate", checked: "checked" }, outputs: { changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxComponent),
+                multi: true
+            }
+        ], usesOnChanges: true, ngImport: i0, template: `
+    <div class="checkbox-wrapper" [class.disabled]="disabled">
+      <div class="checkbox-container">
+        <label [for]="id" class="checkbox-label-input">
+          <input
+            type="checkbox"
+            [id]="id"
+            [disabled]="disabled"
+            [checked]="value"
+            (blur)="onTouched()"
+            (change)="onCheckboxChange($event)">
+          <span class="checkbox-custom" [class.checked]="value" [class.indeterminate]="indeterminate">
+            <!-- Paloma -->
+            <svg *ngIf="value && !indeterminate" class="check-icon" width="14" height="10" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M9 1L3.5 6.5L1 4" stroke="#F59100" stroke-width="1.6666" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <!-- Guion -->
+            <svg *ngIf="indeterminate && !value" class="minus-icon" width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect width="12" height="2" rx="1" fill="#F59100"/>
+            </svg>
+          </span>
+        </label>
+        <span class="checkbox-text" (click)="onTextClick($event)">
+          <ng-content></ng-content>
+          <span *ngIf="label" [innerHTML]="label"></span>
+        </span>
+      </div>
+      <div *ngIf="hasError && errorMessage" class="field-error">
+        {{ errorMessage }}
+      </div>
+    </div>
+  `, isInline: true, styles: [".checkbox-wrapper{width:100%;padding:0 4px}.checkbox-wrapper.disabled{opacity:.6;cursor:not-allowed}.checkbox-container{display:flex;align-items:flex-start;gap:.75rem}.checkbox-label-input{cursor:pointer;position:relative;display:flex;align-items:center}.checkbox-label-input input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:22px;height:22px;margin:0;z-index:2;top:2px;left:0}.checkbox-label-input .checkbox-custom{width:22px;height:22px;min-width:22px;border:2.5px solid #D5D7D8;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.4,0,.2,1);background:#fff;margin-top:2px;position:relative}.checkbox-label-input .checkbox-custom:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:4px;background:#f59100;opacity:0;transform:scale(.5);transition:all .25s cubic-bezier(.4,0,.2,1)}.checkbox-label-input .checkbox-custom.checked,.checkbox-label-input .checkbox-custom.indeterminate{background:#fff;border-color:#f59100;border-width:2.5px;box-shadow:0 3px 8px #f26d0040,0 1px 3px #f26d0026;transform:scale(1.05)}.checkbox-label-input .checkbox-custom.checked:after,.checkbox-label-input .checkbox-custom.indeterminate:after{opacity:0}.checkbox-label-input .checkbox-custom .check-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;animation:checkPop .3s cubic-bezier(.68,-.55,.265,1.55)}.checkbox-label-input:hover .checkbox-custom:not(.checked){border-color:#f26d00;transform:scale(1.05)}.checkbox-text{flex:1;font-family:Quicksand,sans-serif;font-size:14px;font-weight:500;line-height:1.7;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-text ::ng-deep a{color:#364b9f;font-family:Quicksand,sans-serif;font-size:14px;font-weight:500;line-height:1.7;cursor:pointer}.checkbox-wrapper.disabled .checkbox-text{cursor:not-allowed}@keyframes checkPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.field-error{color:#f04438;font-size:.875rem;margin-top:.25rem;font-family:Quicksand,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checkbox', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], template: `
+    <div class="checkbox-wrapper" [class.disabled]="disabled">
+      <div class="checkbox-container">
+        <label [for]="id" class="checkbox-label-input">
+          <input
+            type="checkbox"
+            [id]="id"
+            [disabled]="disabled"
+            [checked]="value"
+            (blur)="onTouched()"
+            (change)="onCheckboxChange($event)">
+          <span class="checkbox-custom" [class.checked]="value" [class.indeterminate]="indeterminate">
+            <!-- Paloma -->
+            <svg *ngIf="value && !indeterminate" class="check-icon" width="14" height="10" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M9 1L3.5 6.5L1 4" stroke="#F59100" stroke-width="1.6666" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <!-- Guion -->
+            <svg *ngIf="indeterminate && !value" class="minus-icon" width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect width="12" height="2" rx="1" fill="#F59100"/>
+            </svg>
+          </span>
+        </label>
+        <span class="checkbox-text" (click)="onTextClick($event)">
+          <ng-content></ng-content>
+          <span *ngIf="label" [innerHTML]="label"></span>
+        </span>
+      </div>
+      <div *ngIf="hasError && errorMessage" class="field-error">
+        {{ errorMessage }}
+      </div>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true
+                        }
+                    ], styles: [".checkbox-wrapper{width:100%;padding:0 4px}.checkbox-wrapper.disabled{opacity:.6;cursor:not-allowed}.checkbox-container{display:flex;align-items:flex-start;gap:.75rem}.checkbox-label-input{cursor:pointer;position:relative;display:flex;align-items:center}.checkbox-label-input input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:22px;height:22px;margin:0;z-index:2;top:2px;left:0}.checkbox-label-input .checkbox-custom{width:22px;height:22px;min-width:22px;border:2.5px solid #D5D7D8;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.4,0,.2,1);background:#fff;margin-top:2px;position:relative}.checkbox-label-input .checkbox-custom:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:4px;background:#f59100;opacity:0;transform:scale(.5);transition:all .25s cubic-bezier(.4,0,.2,1)}.checkbox-label-input .checkbox-custom.checked,.checkbox-label-input .checkbox-custom.indeterminate{background:#fff;border-color:#f59100;border-width:2.5px;box-shadow:0 3px 8px #f26d0040,0 1px 3px #f26d0026;transform:scale(1.05)}.checkbox-label-input .checkbox-custom.checked:after,.checkbox-label-input .checkbox-custom.indeterminate:after{opacity:0}.checkbox-label-input .checkbox-custom .check-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;animation:checkPop .3s cubic-bezier(.68,-.55,.265,1.55)}.checkbox-label-input:hover .checkbox-custom:not(.checked){border-color:#f26d00;transform:scale(1.05)}.checkbox-text{flex:1;font-family:Quicksand,sans-serif;font-size:14px;font-weight:500;line-height:1.7;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-text ::ng-deep a{color:#364b9f;font-family:Quicksand,sans-serif;font-size:14px;font-weight:500;line-height:1.7;cursor:pointer}.checkbox-wrapper.disabled .checkbox-text{cursor:not-allowed}@keyframes checkPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.field-error{color:#f04438;font-size:.875rem;margin-top:.25rem;font-family:Quicksand,sans-serif}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }] } });
+
+class RadioComponent {
+    cdr;
+    label = '';
+    id = '';
+    name = '';
+    radioValue = '';
+    disabled = false;
+    changed = new EventEmitter();
+    value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    get isSelected() {
+        return this.value === this.radioValue;
+    }
+    onContainerClick() {
+        if (this.disabled)
+            return;
+        this.value = this.radioValue;
+        this.onChange(this.value);
+        this.changed.emit(this.value);
+        this.cdr.markForCheck();
+    }
+    onRadioChange(event) {
+        event.stopPropagation();
+        const target = event.target;
+        if (target.checked) {
+            this.value = this.radioValue;
+            this.onChange(this.value);
+            this.changed.emit(this.value);
+            this.cdr.markForCheck();
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioComponent, isStandalone: true, selector: "app-radio", inputs: { label: "label", id: "id", name: "name", radioValue: "radioValue", disabled: "disabled" }, outputs: { changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div
+      class="radio-wrapper"
+      [class.disabled]="disabled"
+      [class.radio-wrapper--selected]="isSelected"
+      (click)="onContainerClick()"
+    >
+      <div class="radio-container">
+        <input
+          type="radio"
+          [id]="id"
+          [name]="name"
+          [value]="radioValue"
+          [disabled]="disabled"
+          [checked]="isSelected"
+          (blur)="onTouched()"
+          (change)="onRadioChange($event)"
+          class="radio-input"
+        />
+        <span class="radio-custom" [class.checked]="isSelected">
+          <span class="radio-dot" *ngIf="isSelected"></span>
+        </span>
+        <span class="radio-text">
+          <ng-content></ng-content>
+          <span *ngIf="label">{{ label }}</span>
+        </span>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;outline:none!important}:host:focus,:host:focus-visible,:host:focus-within{outline:none!important;box-shadow:none!important}.radio-wrapper{cursor:pointer;outline:none!important;box-shadow:none!important}.radio-wrapper:focus,.radio-wrapper:focus-visible,.radio-wrapper:focus-within{outline:none!important;box-shadow:none!important}.radio-wrapper.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.radio-wrapper--selected .radio-custom{border-color:#f59100}.radio-container{display:flex;align-items:center;gap:12px;padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important}.radio-container:focus,.radio-container:focus-visible,.radio-container:focus-within{outline:none!important;box-shadow:none!important}.radio-container:hover .radio-custom:not(.checked){border-color:#f59100}.radio-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0;padding:0;border:none!important;outline:none!important;box-shadow:none!important}.radio-input:focus,.radio-input:focus-visible,.radio-input:checked{outline:none!important;box-shadow:none!important;border:none!important}.radio-custom{width:20px;height:20px;min-width:20px;border:2px solid #D5D7DA;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease;background:#fff;flex-shrink:0;outline:none!important;box-shadow:none!important}.radio-custom.checked{border-color:#f59100}.radio-custom .radio-dot{width:10px;height:10px;border-radius:50%;background:#f59100}.radio-text{font-family:Quicksand,sans-serif;font-size:16px;font-weight:500;line-height:24px;color:#585d61;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-radio', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], template: `
+    <div
+      class="radio-wrapper"
+      [class.disabled]="disabled"
+      [class.radio-wrapper--selected]="isSelected"
+      (click)="onContainerClick()"
+    >
+      <div class="radio-container">
+        <input
+          type="radio"
+          [id]="id"
+          [name]="name"
+          [value]="radioValue"
+          [disabled]="disabled"
+          [checked]="isSelected"
+          (blur)="onTouched()"
+          (change)="onRadioChange($event)"
+          class="radio-input"
+        />
+        <span class="radio-custom" [class.checked]="isSelected">
+          <span class="radio-dot" *ngIf="isSelected"></span>
+        </span>
+        <span class="radio-text">
+          <ng-content></ng-content>
+          <span *ngIf="label">{{ label }}</span>
+        </span>
+      </div>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioComponent),
+                            multi: true
+                        }
+                    ], styles: [":host{display:block;outline:none!important}:host:focus,:host:focus-visible,:host:focus-within{outline:none!important;box-shadow:none!important}.radio-wrapper{cursor:pointer;outline:none!important;box-shadow:none!important}.radio-wrapper:focus,.radio-wrapper:focus-visible,.radio-wrapper:focus-within{outline:none!important;box-shadow:none!important}.radio-wrapper.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.radio-wrapper--selected .radio-custom{border-color:#f59100}.radio-container{display:flex;align-items:center;gap:12px;padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important}.radio-container:focus,.radio-container:focus-visible,.radio-container:focus-within{outline:none!important;box-shadow:none!important}.radio-container:hover .radio-custom:not(.checked){border-color:#f59100}.radio-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0;padding:0;border:none!important;outline:none!important;box-shadow:none!important}.radio-input:focus,.radio-input:focus-visible,.radio-input:checked{outline:none!important;box-shadow:none!important;border:none!important}.radio-custom{width:20px;height:20px;min-width:20px;border:2px solid #D5D7DA;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease;background:#fff;flex-shrink:0;outline:none!important;box-shadow:none!important}.radio-custom.checked{border-color:#f59100}.radio-custom .radio-dot{width:10px;height:10px;border-radius:50%;background:#f59100}.radio-text{font-family:Quicksand,sans-serif;font-size:16px;font-weight:500;line-height:24px;color:#585d61;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], radioValue: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }] } });
+
+class DatePickerComponent {
+    renderer;
+    document;
+    label = '';
+    id = '';
+    placeholder = 'Seleccionar fecha';
+    hasError = false;
+    errorMessage = '';
+    disabled = false;
+    minDate;
+    maxDate;
+    rangeMode = false; // false = single date, true = date range
+    iconPosition = 'left';
+    trigger;
+    dropdown;
+    // Single date value
+    singleValue = null;
+    // Range value
+    rangeValue = { startDate: null, endDate: null };
+    isOpen = false;
+    onChange = () => { };
+    onTouched = () => { };
+    leftMonthDate = new Date();
+    rightMonthDate = new Date();
+    tempStartDate = null;
+    tempEndDate = null;
+    tempSingleDate = null;
+    hoverDate = null;
+    // Store original calendar positions for cancel
+    originalLeftMonthDate = new Date();
+    originalRightMonthDate = new Date();
+    // Cached calendar days
+    leftCalendarDays = [];
+    rightCalendarDays = [];
+    filterOptions = [
+        { value: 'hoy', label: 'Hoy' },
+        { value: 'ayer', label: 'Ayer' },
+        { value: 'esta-semana', label: 'Esta semana' },
+        { value: 'semana-pasada', label: 'Semana pasada' },
+        { value: 'este-mes', label: 'Este mes' },
+        { value: 'mes-pasado', label: 'Mes pasado' },
+        { value: 'este-ano', label: 'Este año' },
+        { value: 'ano-pasado', label: 'Año pasado' },
+        { value: 'mostrar-todo', label: 'Mostrar todo' }
+    ];
+    selectedFilter = '';
+    weekDays = ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'];
+    months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
+    // Month/Year picker state
+    showLeftMonthPicker = false;
+    showRightMonthPicker = false;
+    years = [];
+    leftYearPickerPage = 0;
+    rightYearPickerPage = 0;
+    yearsPerPage = 12;
+    scrollHandler = null;
+    resizeHandler = null;
+    dropdownPosition = { top: '0px', left: '0px' };
+    constructor(renderer, document) {
+        this.renderer = renderer;
+        this.document = document;
+    }
+    ngOnInit() {
+        this.initializeDates();
+    }
+    ngOnDestroy() {
+        this.removeRepositionListeners();
+    }
+    initializeDates() {
+        const today = new Date();
+        this.leftMonthDate = new Date(today.getFullYear(), today.getMonth(), 1);
+        this.rightMonthDate = new Date(today.getFullYear(), today.getMonth() + 1, 1);
+        this.updateCalendarDays();
+    }
+    updateCalendarDays() {
+        this.leftCalendarDays = this.generateCalendarDays(this.leftMonthDate);
+        if (this.rangeMode) {
+            this.rightCalendarDays = this.generateCalendarDays(this.rightMonthDate);
+        }
+    }
+    onDocumentClick(event) {
+        if (!this.isOpen)
+            return;
+        const triggerElement = this.trigger?.nativeElement;
+        const dropdownElement = this.document.querySelector('.date-picker-dropdown');
+        const monthYearPickers = this.document.querySelectorAll('.month-year-picker');
+        const monthYearButtons = this.document.querySelectorAll('.month-year');
+        let isOnMonthYearButton = false;
+        monthYearButtons.forEach(button => {
+            if (button.contains(event.target)) {
+                isOnMonthYearButton = true;
+            }
+        });
+        let isInsideMonthYearPicker = false;
+        monthYearPickers.forEach(picker => {
+            if (picker.contains(event.target)) {
+                isInsideMonthYearPicker = true;
+            }
+        });
+        if (isOnMonthYearButton || isInsideMonthYearPicker) {
+            return;
+        }
+        if (dropdownElement && dropdownElement.contains(event.target)) {
+            this.showLeftMonthPicker = false;
+            this.showRightMonthPicker = false;
+            return;
+        }
+        if (triggerElement && !triggerElement.contains(event.target)) {
+            if (dropdownElement && !dropdownElement.contains(event.target)) {
+                this.closeDropdown();
+            }
+        }
+    }
+    toggleDropdown(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    openDropdown() {
+        if (!this.trigger)
+            return;
+        if (this.rangeMode) {
+            this.tempStartDate = this.rangeValue.startDate;
+            this.tempEndDate = this.rangeValue.endDate;
+        }
+        else {
+            this.tempSingleDate = this.singleValue;
+        }
+        this.originalLeftMonthDate = new Date(this.leftMonthDate);
+        this.originalRightMonthDate = new Date(this.rightMonthDate);
+        this.leftYearPickerPage = 0;
+        this.rightYearPickerPage = 0;
+        this.isOpen = true;
+        setTimeout(() => {
+            this.updateDropdownPosition();
+            this.addRepositionListeners();
+        }, 0);
+    }
+    getDropdownStyle() {
+        if (!this.trigger)
+            return {};
+        const position = this.calculatePosition();
+        return {
+            'position': 'fixed',
+            'left': position.left,
+            'top': position.top,
+            'z-index': '10000'
+        };
+    }
+    calculatePosition() {
+        const triggerElement = this.trigger.nativeElement;
+        const rect = triggerElement.getBoundingClientRect();
+        let dropdownWidth = this.rangeMode ? 830 : 320;
+        let dropdownHeight = this.rangeMode ? 520 : 400;
+        if (this.dropdown) {
+            const dropdownElement = this.dropdown.nativeElement;
+            const dropdownRect = dropdownElement.getBoundingClientRect();
+            if (dropdownRect.width > 0) {
+                dropdownWidth = dropdownRect.width;
+            }
+            else {
+                dropdownWidth = window.innerWidth < 768 ? 280 : (this.rangeMode ? 830 : 320);
+            }
+            if (dropdownRect.height > 0) {
+                dropdownHeight = dropdownRect.height;
+            }
+        }
+        else {
+            dropdownWidth = window.innerWidth < 768 ? 280 : (this.rangeMode ? 830 : 320);
+        }
+        const spaceOnRight = window.innerWidth - rect.left;
+        let left = rect.left;
+        if (spaceOnRight < dropdownWidth) {
+            left = rect.right - dropdownWidth;
+            if (left < 0) {
+                left = Math.max(8, window.innerWidth - dropdownWidth - 8);
+            }
+        }
+        if (window.innerWidth < 768) {
+            const centeredLeft = rect.left + (rect.width / 2) - (dropdownWidth / 2);
+            const minLeft = 8;
+            const maxLeft = window.innerWidth - dropdownWidth - 8;
+            left = Math.max(minLeft, Math.min(centeredLeft, maxLeft));
+        }
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        let top = rect.bottom + 4;
+        if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+            top = rect.top - dropdownHeight - 4;
+        }
+        return {
+            top: `${top}px`,
+            left: `${left}px`
+        };
+    }
+    closeDropdown() {
+        this.leftMonthDate = new Date(this.originalLeftMonthDate);
+        this.rightMonthDate = new Date(this.originalRightMonthDate);
+        if (this.rangeMode) {
+            this.tempStartDate = this.rangeValue.startDate;
+            this.tempEndDate = this.rangeValue.endDate;
+        }
+        else {
+            this.tempSingleDate = this.singleValue;
+        }
+        this.updateCalendarDays();
+        this.removeRepositionListeners();
+        this.isOpen = false;
+        this.hoverDate = null;
+        this.showLeftMonthPicker = false;
+        this.showRightMonthPicker = false;
+    }
+    addRepositionListeners() {
+        const scrollHandler = () => this.updateDropdownPosition();
+        const resizeHandler = () => this.updateDropdownPosition();
+        window.addEventListener('scroll', scrollHandler, true);
+        this.scrollHandler = () => window.removeEventListener('scroll', scrollHandler, true);
+        window.addEventListener('resize', resizeHandler);
+        this.resizeHandler = () => window.removeEventListener('resize', resizeHandler);
+    }
+    removeRepositionListeners() {
+        if (this.scrollHandler) {
+            this.scrollHandler();
+            this.scrollHandler = null;
+        }
+        if (this.resizeHandler) {
+            this.resizeHandler();
+            this.resizeHandler = null;
+        }
+    }
+    updateDropdownPosition() {
+        if (!this.trigger)
+            return;
+        this.dropdownPosition = this.calculatePosition();
+    }
+    getDisplayValue() {
+        if (this.rangeMode) {
+            if (this.rangeValue.startDate && this.rangeValue.endDate) {
+                const start = this.formatDateShort(this.rangeValue.startDate);
+                const end = this.formatDateShort(this.rangeValue.endDate);
+                return `${start} - ${end}`;
+            }
+        }
+        else {
+            if (this.singleValue) {
+                return this.formatDateShort(this.singleValue);
+            }
+        }
+        return '';
+    }
+    formatDateShort(date) {
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
+    generateCalendarDays(monthDate) {
+        const year = monthDate.getFullYear();
+        const month = monthDate.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        let startDay = firstDay.getDay() - 1;
+        if (startDay === -1)
+            startDay = 6;
+        const days = [];
+        const prevMonthLastDay = new Date(year, month, 0);
+        for (let i = startDay - 1; i >= 0; i--) {
+            const date = new Date(year, month - 1, prevMonthLastDay.getDate() - i);
+            date.setHours(0, 0, 0, 0);
+            days.push(this.createCalendarDay(date, false));
+        }
+        for (let day = 1; day <= lastDay.getDate(); day++) {
+            const date = new Date(year, month, day);
+            date.setHours(0, 0, 0, 0);
+            days.push(this.createCalendarDay(date, true));
+        }
+        const remainingDays = 42 - days.length;
+        for (let day = 1; day <= remainingDays; day++) {
+            const date = new Date(year, month + 1, day);
+            date.setHours(0, 0, 0, 0);
+            days.push(this.createCalendarDay(date, false));
+        }
+        return days;
+    }
+    createCalendarDay(date, isCurrentMonth) {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const dateOnly = new Date(date);
+        dateOnly.setHours(0, 0, 0, 0);
+        const isToday = dateOnly.getTime() === today.getTime();
+        let isSelected = false;
+        let isRangeStart = false;
+        let isRangeEnd = false;
+        let isInRange = false;
+        if (this.rangeMode) {
+            const startDate = this.tempStartDate ? new Date(this.tempStartDate) : null;
+            const endDate = this.tempEndDate ? new Date(this.tempEndDate) : null;
+            if (startDate)
+                startDate.setHours(0, 0, 0, 0);
+            if (endDate)
+                endDate.setHours(0, 0, 0, 0);
+            isRangeStart = isCurrentMonth && startDate ? dateOnly.getTime() === startDate.getTime() : false;
+            isRangeEnd = isCurrentMonth && endDate ? dateOnly.getTime() === endDate.getTime() : false;
+            isSelected = isRangeStart || isRangeEnd;
+            if (isCurrentMonth && startDate && endDate) {
+                isInRange = dateOnly > startDate && dateOnly < endDate;
+            }
+            else if (isCurrentMonth && startDate && this.hoverDate && !endDate) {
+                const hoverDateOnly = new Date(this.hoverDate);
+                hoverDateOnly.setHours(0, 0, 0, 0);
+                if (hoverDateOnly > startDate) {
+                    isInRange = dateOnly > startDate && dateOnly < hoverDateOnly;
+                }
+            }
+        }
+        else {
+            const selectedDate = this.tempSingleDate ? new Date(this.tempSingleDate) : null;
+            if (selectedDate)
+                selectedDate.setHours(0, 0, 0, 0);
+            isSelected = isCurrentMonth && selectedDate ? dateOnly.getTime() === selectedDate.getTime() : false;
+        }
+        const isDisabled = !isCurrentMonth || this.isDateDisabled(date);
+        return {
+            date,
+            isCurrentMonth,
+            isToday,
+            isSelected,
+            isInRange,
+            isRangeStart,
+            isRangeEnd,
+            isDisabled
+        };
+    }
+    isDateDisabled(date) {
+        if (this.minDate && date < this.minDate)
+            return true;
+        if (this.maxDate && date > this.maxDate)
+            return true;
+        return false;
+    }
+    trackByDate(index, day) {
+        return day.date.getTime().toString();
+    }
+    isInRange(date) {
+        if (!this.rangeMode)
+            return false;
+        const dateOnly = new Date(date);
+        dateOnly.setHours(0, 0, 0, 0);
+        const startDate = this.tempStartDate ? new Date(this.tempStartDate) : null;
+        const endDate = this.tempEndDate ? new Date(this.tempEndDate) : null;
+        if (startDate)
+            startDate.setHours(0, 0, 0, 0);
+        if (endDate)
+            endDate.setHours(0, 0, 0, 0);
+        if (startDate && endDate) {
+            return dateOnly > startDate && dateOnly < endDate;
+        }
+        else if (startDate && this.hoverDate && !endDate) {
+            const hoverDateOnly = new Date(this.hoverDate);
+            hoverDateOnly.setHours(0, 0, 0, 0);
+            if (hoverDateOnly > startDate) {
+                return dateOnly > startDate && dateOnly < hoverDateOnly;
+            }
+        }
+        return false;
+    }
+    onDayClick(day) {
+        if (day.isDisabled)
+            return;
+        const clickedDate = new Date(day.date);
+        clickedDate.setHours(0, 0, 0, 0);
+        if (this.rangeMode) {
+            this.selectedFilter = '';
+            if (!this.tempStartDate || (this.tempStartDate && this.tempEndDate)) {
+                this.tempStartDate = clickedDate;
+                this.tempEndDate = null;
+                this.hoverDate = null;
+            }
+            else if (this.tempStartDate && !this.tempEndDate) {
+                const startDate = new Date(this.tempStartDate);
+                startDate.setHours(0, 0, 0, 0);
+                if (clickedDate.getTime() === startDate.getTime()) {
+                    this.tempEndDate = clickedDate;
+                }
+                else if (clickedDate > startDate) {
+                    this.tempEndDate = clickedDate;
+                }
+                else {
+                    this.tempEndDate = startDate;
+                    this.tempStartDate = clickedDate;
+                }
+                this.hoverDate = null;
+            }
+        }
+        else {
+            this.tempSingleDate = clickedDate;
+            // Auto-apply for single date mode
+            this.apply();
+            return;
+        }
+        this.updateCalendarDays();
+    }
+    onDayHover(day) {
+        if (day.isDisabled || !this.rangeMode)
+            return;
+        this.hoverDate = day.date;
+    }
+    onDayLeave() {
+        this.hoverDate = null;
+    }
+    previousMonth() {
+        if (!this.canNavigatePreviousMonth())
+            return;
+        this.leftMonthDate = new Date(this.leftMonthDate.getFullYear(), this.leftMonthDate.getMonth() - 1, 1);
+        if (this.rangeMode) {
+            this.rightMonthDate = new Date(this.rightMonthDate.getFullYear(), this.rightMonthDate.getMonth() - 1, 1);
+        }
+        this.updateCalendarDays();
+    }
+    nextMonth() {
+        if (!this.canNavigateNextMonth())
+            return;
+        this.leftMonthDate = new Date(this.leftMonthDate.getFullYear(), this.leftMonthDate.getMonth() + 1, 1);
+        if (this.rangeMode) {
+            this.rightMonthDate = new Date(this.rightMonthDate.getFullYear(), this.rightMonthDate.getMonth() + 1, 1);
+        }
+        this.updateCalendarDays();
+    }
+    canNavigatePreviousMonth() {
+        if (!this.minDate)
+            return true;
+        const newLeftMonth = new Date(this.leftMonthDate.getFullYear(), this.leftMonthDate.getMonth() - 1, 1);
+        const minDateMonth = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), 1);
+        return newLeftMonth >= minDateMonth;
+    }
+    canNavigateNextMonth() {
+        if (!this.maxDate)
+            return true;
+        const checkMonth = this.rangeMode ? this.rightMonthDate : this.leftMonthDate;
+        const newMonth = new Date(checkMonth.getFullYear(), checkMonth.getMonth() + 1, 1);
+        const maxDateMonth = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), 1);
+        return newMonth <= maxDateMonth;
+    }
+    getMonthYear(date) {
+        return `${this.months[date.getMonth()]} ${date.getFullYear()}`;
+    }
+    selectFilter(filter) {
+        this.selectedFilter = filter;
+        this.applyFilter(filter);
+        this.updateCalendarDays();
+    }
+    applyFilter(filter) {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        let startDate = null;
+        let endDate = null;
+        switch (filter) {
+            case 'hoy':
+                startDate = new Date(today);
+                endDate = new Date(today);
+                break;
+            case 'ayer':
+                startDate = new Date(today);
+                startDate.setDate(startDate.getDate() - 1);
+                endDate = new Date(startDate);
+                break;
+            case 'esta-semana':
+                startDate = this.getStartOfWeek(today);
+                endDate = new Date(today);
+                break;
+            case 'semana-pasada':
+                const lastWeekEnd = new Date(this.getStartOfWeek(today));
+                lastWeekEnd.setDate(lastWeekEnd.getDate() - 1);
+                startDate = this.getStartOfWeek(lastWeekEnd);
+                endDate = lastWeekEnd;
+                break;
+            case 'este-mes':
+                startDate = new Date(today.getFullYear(), today.getMonth(), 1);
+                endDate = new Date(today);
+                break;
+            case 'mes-pasado':
+                startDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+                endDate = new Date(today.getFullYear(), today.getMonth(), 0);
+                break;
+            case 'este-ano':
+                startDate = new Date(today.getFullYear(), 0, 1);
+                endDate = new Date(today);
+                break;
+            case 'ano-pasado':
+                startDate = new Date(today.getFullYear() - 1, 0, 1);
+                endDate = new Date(today.getFullYear() - 1, 11, 31);
+                break;
+            case 'mostrar-todo':
+                startDate = null;
+                endDate = null;
+                break;
+        }
+        this.tempStartDate = startDate;
+        this.tempEndDate = endDate;
+        if (startDate) {
+            this.leftMonthDate = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
+            this.rightMonthDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 1);
+        }
+        else {
+            const currentDate = new Date();
+            this.leftMonthDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+            this.rightMonthDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+        }
+    }
+    getStartOfWeek(date) {
+        const day = date.getDay();
+        const diff = day === 0 ? -6 : 1 - day;
+        const startOfWeek = new Date(date);
+        startOfWeek.setDate(date.getDate() + diff);
+        return startOfWeek;
+    }
+    cancel() {
+        if (this.rangeMode) {
+            this.tempStartDate = this.rangeValue.startDate;
+            this.tempEndDate = this.rangeValue.endDate;
+        }
+        else {
+            this.tempSingleDate = this.singleValue;
+        }
+        this.selectedFilter = '';
+        this.leftMonthDate = new Date(this.originalLeftMonthDate);
+        this.rightMonthDate = new Date(this.originalRightMonthDate);
+        this.updateCalendarDays();
+        this.closeDropdown();
+    }
+    apply() {
+        if (this.rangeMode) {
+            this.rangeValue = {
+                startDate: this.tempStartDate,
+                endDate: this.tempEndDate
+            };
+            this.onChange(this.rangeValue);
+        }
+        else {
+            this.singleValue = this.tempSingleDate;
+            this.onChange(this.singleValue);
+        }
+        this.originalLeftMonthDate = new Date(this.leftMonthDate);
+        this.originalRightMonthDate = new Date(this.rightMonthDate);
+        this.onTouched();
+        this.removeRepositionListeners();
+        this.isOpen = false;
+        this.hoverDate = null;
+        this.showLeftMonthPicker = false;
+        this.showRightMonthPicker = false;
+    }
+    getStartDateDisplay() {
+        if (this.tempStartDate) {
+            return this.formatDateForInput(this.tempStartDate);
+        }
+        return 'Fecha inicio';
+    }
+    getEndDateDisplay() {
+        if (this.tempEndDate) {
+            return this.formatDateForInput(this.tempEndDate);
+        }
+        return 'Fecha fin';
+    }
+    formatDateForInput(date) {
+        const day = date.getDate();
+        const month = date.toLocaleString('es-ES', { month: 'short' });
+        const year = date.getFullYear();
+        return `${day} ${month} ${year}`;
+    }
+    toggleLeftMonthPicker(event) {
+        event.stopPropagation();
+        this.showLeftMonthPicker = !this.showLeftMonthPicker;
+        this.showRightMonthPicker = false;
+        if (this.showLeftMonthPicker) {
+            this.leftYearPickerPage = 0;
+        }
+    }
+    toggleRightMonthPicker(event) {
+        event.stopPropagation();
+        this.showRightMonthPicker = !this.showRightMonthPicker;
+        this.showLeftMonthPicker = false;
+        if (this.showRightMonthPicker) {
+            this.rightYearPickerPage = 0;
+        }
+    }
+    getLeftYears() {
+        const currentYear = this.leftMonthDate.getFullYear();
+        const baseYear = currentYear + (this.leftYearPickerPage * this.yearsPerPage);
+        const years = [];
+        for (let i = 0; i < this.yearsPerPage; i++) {
+            const year = baseYear - 5 + i;
+            years.push(year);
+        }
+        return years;
+    }
+    getRightYears() {
+        const currentYear = this.rightMonthDate.getFullYear();
+        const baseYear = currentYear + (this.rightYearPickerPage * this.yearsPerPage);
+        const years = [];
+        for (let i = 0; i < this.yearsPerPage; i++) {
+            const year = baseYear - 5 + i;
+            years.push(year);
+        }
+        return years;
+    }
+    previousLeftYearPage(event) {
+        event.stopPropagation();
+        this.leftYearPickerPage--;
+    }
+    nextLeftYearPage(event) {
+        event.stopPropagation();
+        this.leftYearPickerPage++;
+    }
+    previousRightYearPage(event) {
+        event.stopPropagation();
+        this.rightYearPickerPage--;
+    }
+    nextRightYearPage(event) {
+        event.stopPropagation();
+        this.rightYearPickerPage++;
+    }
+    isMonthDisabled(monthIndex, calendarDate) {
+        const testDate = new Date(calendarDate.getFullYear(), monthIndex, 1);
+        if (this.minDate) {
+            const minDateMonth = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), 1);
+            if (testDate < minDateMonth)
+                return true;
+        }
+        if (this.maxDate) {
+            const maxDateMonth = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), 1);
+            if (testDate > maxDateMonth)
+                return true;
+        }
+        return false;
+    }
+    isYearDisabled(year) {
+        if (this.minDate && year < this.minDate.getFullYear())
+            return true;
+        if (this.maxDate && year > this.maxDate.getFullYear())
+            return true;
+        return false;
+    }
+    getLeftYearRangeLabel() {
+        const years = this.getLeftYears();
+        return `${years[0]} - ${years[years.length - 1]}`;
+    }
+    getRightYearRangeLabel() {
+        const years = this.getRightYears();
+        return `${years[0]} - ${years[years.length - 1]}`;
+    }
+    canNavigateLeftYearsPrevious() {
+        if (!this.minDate && !this.maxDate)
+            return true;
+        const currentYear = this.leftMonthDate.getFullYear();
+        const baseYear = currentYear + ((this.leftYearPickerPage - 1) * this.yearsPerPage);
+        const previousPageYears = [];
+        for (let i = 0; i < this.yearsPerPage; i++) {
+            previousPageYears.push(baseYear - 5 + i);
+        }
+        return previousPageYears.some(year => !this.isYearDisabled(year));
+    }
+    canNavigateLeftYearsNext() {
+        if (!this.minDate && !this.maxDate)
+            return true;
+        const currentYear = this.leftMonthDate.getFullYear();
+        const baseYear = currentYear + ((this.leftYearPickerPage + 1) * this.yearsPerPage);
+        const nextPageYears = [];
+        for (let i = 0; i < this.yearsPerPage; i++) {
+            nextPageYears.push(baseYear - 5 + i);
+        }
+        return nextPageYears.some(year => !this.isYearDisabled(year));
+    }
+    canNavigateRightYearsPrevious() {
+        if (!this.minDate && !this.maxDate)
+            return true;
+        const currentYear = this.rightMonthDate.getFullYear();
+        const baseYear = currentYear + ((this.rightYearPickerPage - 1) * this.yearsPerPage);
+        const previousPageYears = [];
+        for (let i = 0; i < this.yearsPerPage; i++) {
+            previousPageYears.push(baseYear - 5 + i);
+        }
+        return previousPageYears.some(year => !this.isYearDisabled(year));
+    }
+    canNavigateRightYearsNext() {
+        if (!this.minDate && !this.maxDate)
+            return true;
+        const currentYear = this.rightMonthDate.getFullYear();
+        const baseYear = currentYear + ((this.rightYearPickerPage + 1) * this.yearsPerPage);
+        const nextPageYears = [];
+        for (let i = 0; i < this.yearsPerPage; i++) {
+            nextPageYears.push(baseYear - 5 + i);
+        }
+        return nextPageYears.some(year => !this.isYearDisabled(year));
+    }
+    selectLeftMonth(monthIndex, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.leftMonthDate = new Date(this.leftMonthDate.getFullYear(), monthIndex, 1);
+        if (this.rangeMode) {
+            this.rightMonthDate = new Date(this.leftMonthDate.getFullYear(), monthIndex + 1, 1);
+        }
+        this.updateCalendarDays();
+        this.showLeftMonthPicker = false;
+    }
+    selectRightMonth(monthIndex, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.rightMonthDate = new Date(this.rightMonthDate.getFullYear(), monthIndex, 1);
+        this.leftMonthDate = new Date(this.rightMonthDate.getFullYear(), monthIndex - 1, 1);
+        this.updateCalendarDays();
+        this.showRightMonthPicker = false;
+    }
+    selectLeftYear(year, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.leftMonthDate = new Date(year, this.leftMonthDate.getMonth(), 1);
+        if (this.rangeMode) {
+            this.rightMonthDate = new Date(year, this.leftMonthDate.getMonth() + 1, 1);
+        }
+        this.updateCalendarDays();
+        this.showLeftMonthPicker = false;
+    }
+    selectRightYear(year, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.rightMonthDate = new Date(year, this.rightMonthDate.getMonth(), 1);
+        this.leftMonthDate = new Date(year, this.rightMonthDate.getMonth() - 1, 1);
+        this.updateCalendarDays();
+        this.showRightMonthPicker = false;
+    }
+    writeValue(value) {
+        if (this.rangeMode) {
+            const rangeVal = value;
+            this.rangeValue = rangeVal || { startDate: null, endDate: null };
+            this.tempStartDate = this.rangeValue.startDate;
+            this.tempEndDate = this.rangeValue.endDate;
+        }
+        else {
+            this.singleValue = value;
+            this.tempSingleDate = this.singleValue;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    resetDatePicker() {
+        if (this.rangeMode) {
+            this.rangeValue = { startDate: null, endDate: null };
+            this.tempStartDate = null;
+            this.tempEndDate = null;
+            this.onChange(this.rangeValue);
+        }
+        else {
+            this.singleValue = null;
+            this.tempSingleDate = null;
+            this.onChange(this.singleValue);
+        }
+        this.selectedFilter = '';
+        this.initializeDates();
+        this.updateCalendarDays();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { label: "label", id: "id", placeholder: "placeholder", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled", minDate: "minDate", maxDate: "maxDate", rangeMode: "rangeMode", iconPosition: "iconPosition" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatePickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"date-picker-wrapper\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n\n  <div class=\"date-picker-container\">\n    <div\n      #trigger\n      class=\"date-picker-input\"\n      [class.error]=\"hasError\"\n      [class.disabled]=\"disabled\"\n      [class.open]=\"isOpen\"\n      [class.icon-right]=\"iconPosition === 'right'\"\n      (click)=\"toggleDropdown($event)\">\n\n      <svg *ngIf=\"iconPosition === 'left'\" class=\"calendar-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M6.66667 1.66667V4.16667M13.3333 1.66667V4.16667M2.5 7.5H17.5M4.16667 3.33333H15.8333C16.7538 3.33333 17.5 4.07953 17.5 5V16.6667C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6667V5C2.5 4.07953 3.24619 3.33333 4.16667 3.33333Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n\n      <span class=\"date-picker-placeholder\" *ngIf=\"!getDisplayValue()\">\n        {{ placeholder }}\n      </span>\n      <span class=\"date-picker-value\" *ngIf=\"getDisplayValue()\">\n        {{ getDisplayValue() }}\n      </span>\n\n      <svg *ngIf=\"iconPosition === 'right'\" class=\"calendar-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M6.66667 1.66667V4.16667M13.3333 1.66667V4.16667M2.5 7.5H17.5M4.16667 3.33333H15.8333C16.7538 3.33333 17.5 4.07953 17.5 5V16.6667C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6667V5C2.5 4.07953 3.24619 3.33333 4.16667 3.33333Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <div *ngIf=\"hasError && errorMessage\" class=\"field-error\">\n    {{ errorMessage }}\n  </div>\n</div>\n\n<!-- Dropdown content (rendered with fixed position) -->\n<div *ngIf=\"isOpen\" class=\"date-picker-overlay\">\n  <div #dropdown class=\"date-picker-dropdown\" [class.open]=\"isOpen\" [class.range-mode]=\"rangeMode\" [ngStyle]=\"getDropdownStyle()\">\n    <div class=\"date-picker-content\">\n      <!-- Sidebar with filters (only for range mode) -->\n      <div class=\"filter-sidebar\" *ngIf=\"rangeMode\">\n        <div\n          *ngFor=\"let option of filterOptions\"\n          class=\"filter-option\"\n          [class.active]=\"selectedFilter === option.value\"\n          (click)=\"selectFilter(option.value)\">\n          {{ option.label }}\n        </div>\n      </div>\n\n      <!-- Main content (calendars + footer) -->\n      <div class=\"date-picker-main\">\n        <!-- Calendars -->\n        <div class=\"calendars-container\">\n          <!-- Left Calendar (or single calendar in single mode) -->\n          <div class=\"calendar\">\n            <div class=\"calendar-header\">\n              <button\n                type=\"button\"\n                class=\"nav-button\"\n                [disabled]=\"!canNavigatePreviousMonth()\"\n                [class.disabled]=\"!canNavigatePreviousMonth()\"\n                (click)=\"previousMonth()\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M7.5 2L3.5 6L7.5 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n              <div class=\"month-year-selector\">\n                <button type=\"button\" class=\"month-year\" (click)=\"toggleLeftMonthPicker($event)\">\n                  {{ getMonthYear(leftMonthDate) }}\n                </button>\n\n                <!-- Month/Year Picker Dropdown -->\n                <div class=\"month-year-picker\" *ngIf=\"showLeftMonthPicker\" (click)=\"$event.stopPropagation()\">\n                  <div class=\"picker-section\">\n                    <div class=\"picker-title\">Mes</div>\n                    <div class=\"months-grid\">\n                      <button\n                        type=\"button\"\n                        *ngFor=\"let month of months; let i = index\"\n                        class=\"month-option\"\n                        [class.active]=\"i === leftMonthDate.getMonth()\"\n                        [class.disabled]=\"isMonthDisabled(i, leftMonthDate)\"\n                        [disabled]=\"isMonthDisabled(i, leftMonthDate)\"\n                        (click)=\"selectLeftMonth(i, $event)\">\n                        {{ month.substring(0, 3) }}\n                      </button>\n                    </div>\n                  </div>\n                  <div class=\"picker-section\">\n                    <div class=\"picker-header\">\n                      <button\n                        type=\"button\"\n                        class=\"year-nav-button\"\n                        [disabled]=\"!canNavigateLeftYearsPrevious()\"\n                        [class.disabled]=\"!canNavigateLeftYearsPrevious()\"\n                        (click)=\"previousLeftYearPage($event)\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path d=\"M6.25 2.5L3.75 5L6.25 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                      </button>\n                      <div class=\"picker-title\">{{ getLeftYearRangeLabel() }}</div>\n                      <button\n                        type=\"button\"\n                        class=\"year-nav-button\"\n                        [disabled]=\"!canNavigateLeftYearsNext()\"\n                        [class.disabled]=\"!canNavigateLeftYearsNext()\"\n                        (click)=\"nextLeftYearPage($event)\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path d=\"M3.75 2.5L6.25 5L3.75 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                      </button>\n                    </div>\n                    <div class=\"years-grid\">\n                      <button\n                        type=\"button\"\n                        *ngFor=\"let year of getLeftYears()\"\n                        class=\"year-option\"\n                        [class.active]=\"year === leftMonthDate.getFullYear()\"\n                        [class.disabled]=\"isYearDisabled(year)\"\n                        [disabled]=\"isYearDisabled(year)\"\n                        (click)=\"selectLeftYear(year, $event)\">\n                        {{ year }}\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"nav-button\"\n                [disabled]=\"!canNavigateNextMonth()\"\n                [class.disabled]=\"!canNavigateNextMonth()\"\n                (click)=\"nextMonth()\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M4.5 2L8.5 6L4.5 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n            </div>\n\n            <div class=\"calendar-grid\">\n              <div class=\"weekday-header\" *ngFor=\"let day of weekDays\">\n                {{ day }}\n              </div>\n\n              <div\n                *ngFor=\"let day of leftCalendarDays; trackBy: trackByDate\"\n                class=\"calendar-day\"\n                [class.other-month]=\"!day.isCurrentMonth\"\n                [class.today]=\"day.isToday\"\n                [class.selected]=\"day.isSelected\"\n                [class.in-range]=\"rangeMode && isInRange(day.date)\"\n                [class.range-start]=\"day.isRangeStart\"\n                [class.range-end]=\"day.isRangeEnd\"\n                [class.disabled]=\"day.isDisabled\"\n                (click)=\"onDayClick(day)\"\n                (mouseenter)=\"onDayHover(day)\"\n                (mouseleave)=\"onDayLeave()\">\n                <span>{{ day.date.getDate() }}</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Calendar (only for range mode) -->\n          <div class=\"calendar\" *ngIf=\"rangeMode\">\n            <div class=\"calendar-header\">\n              <div class=\"nav-button-placeholder\"></div>\n              <div class=\"month-year-selector\">\n                <button type=\"button\" class=\"month-year\" (click)=\"toggleRightMonthPicker($event)\">\n                  {{ getMonthYear(rightMonthDate) }}\n                </button>\n\n                <!-- Month/Year Picker Dropdown -->\n                <div class=\"month-year-picker\" *ngIf=\"showRightMonthPicker\" (click)=\"$event.stopPropagation()\">\n                  <div class=\"picker-section\">\n                    <div class=\"picker-title\">Mes</div>\n                    <div class=\"months-grid\">\n                      <button\n                        type=\"button\"\n                        *ngFor=\"let month of months; let i = index\"\n                        class=\"month-option\"\n                        [class.active]=\"i === rightMonthDate.getMonth()\"\n                        [class.disabled]=\"isMonthDisabled(i, rightMonthDate)\"\n                        [disabled]=\"isMonthDisabled(i, rightMonthDate)\"\n                        (click)=\"selectRightMonth(i, $event)\">\n                        {{ month.substring(0, 3) }}\n                      </button>\n                    </div>\n                  </div>\n                  <div class=\"picker-section\">\n                    <div class=\"picker-header\">\n                      <button\n                        type=\"button\"\n                        class=\"year-nav-button\"\n                        [disabled]=\"!canNavigateRightYearsPrevious()\"\n                        [class.disabled]=\"!canNavigateRightYearsPrevious()\"\n                        (click)=\"previousRightYearPage($event)\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path d=\"M6.25 2.5L3.75 5L6.25 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                      </button>\n                      <div class=\"picker-title\">{{ getRightYearRangeLabel() }}</div>\n                      <button\n                        type=\"button\"\n                        class=\"year-nav-button\"\n                        [disabled]=\"!canNavigateRightYearsNext()\"\n                        [class.disabled]=\"!canNavigateRightYearsNext()\"\n                        (click)=\"nextRightYearPage($event)\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path d=\"M3.75 2.5L6.25 5L3.75 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                      </button>\n                    </div>\n                    <div class=\"years-grid\">\n                      <button\n                        type=\"button\"\n                        *ngFor=\"let year of getRightYears()\"\n                        class=\"year-option\"\n                        [class.active]=\"year === rightMonthDate.getFullYear()\"\n                        [class.disabled]=\"isYearDisabled(year)\"\n                        [disabled]=\"isYearDisabled(year)\"\n                        (click)=\"selectRightYear(year, $event)\">\n                        {{ year }}\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"nav-button\"\n                [disabled]=\"!canNavigateNextMonth()\"\n                [class.disabled]=\"!canNavigateNextMonth()\"\n                (click)=\"nextMonth()\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M4.5 2L8.5 6L4.5 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n            </div>\n\n            <div class=\"calendar-grid\">\n              <div class=\"weekday-header\" *ngFor=\"let day of weekDays\">\n                {{ day }}\n              </div>\n\n              <div\n                *ngFor=\"let day of rightCalendarDays; trackBy: trackByDate\"\n                class=\"calendar-day\"\n                [class.other-month]=\"!day.isCurrentMonth\"\n                [class.today]=\"day.isToday\"\n                [class.selected]=\"day.isSelected\"\n                [class.in-range]=\"isInRange(day.date)\"\n                [class.range-start]=\"day.isRangeStart\"\n                [class.range-end]=\"day.isRangeEnd\"\n                [class.disabled]=\"day.isDisabled\"\n                (click)=\"onDayClick(day)\"\n                (mouseenter)=\"onDayHover(day)\"\n                (mouseleave)=\"onDayLeave()\">\n                <span>{{ day.date.getDate() }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Footer with dates and actions (only for range mode) -->\n        <div class=\"footer\" *ngIf=\"rangeMode\">\n          <div class=\"selected-dates\">\n            <div class=\"date-display\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5.33333 1.33333V3.33333M10.6667 1.33333V3.33333M2 6H14M3.33333 2.66667H12.6667C13.403 2.66667 14 3.26362 14 4V13.3333C14 14.0697 13.403 14.6667 12.6667 14.6667H3.33333C2.59695 14.6667 2 14.0697 2 13.3333V4C2 3.26362 2.59695 2.66667 3.33333 2.66667Z\" stroke=\"#6B7280\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"date-text\">{{ getStartDateDisplay() }}</span>\n            </div>\n            <span class=\"date-separator\">-</span>\n            <div class=\"date-display\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5.33333 1.33333V3.33333M10.6667 1.33333V3.33333M2 6H14M3.33333 2.66667H12.6667C13.403 2.66667 14 3.26362 14 4V13.3333C14 14.0697 13.403 14.6667 12.6667 14.6667H3.33333C2.59695 14.6667 2 14.0697 2 13.3333V4C2 3.26362 2.59695 2.66667 3.33333 2.66667Z\" stroke=\"#6B7280\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"date-text\">{{ getEndDateDisplay() }}</span>\n            </div>\n          </div>\n\n          <div class=\"action-buttons\">\n            <button type=\"button\" class=\"btn-cancel\" (click)=\"cancel()\">\n              Cancelar\n            </button>\n            <button type=\"button\" class=\"btn-apply\" (click)=\"apply()\">\n              Aplicar\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".date-picker-wrapper{display:flex;flex-direction:column;width:100%;margin-bottom:6px;padding:0 4px}.date-picker-wrapper label{display:block;margin-bottom:.5rem;font-family:Quicksand,sans-serif;font-weight:500;font-size:14px;color:#585d61}.date-picker-container{position:relative;width:100%}.date-picker-input{display:flex;align-items:center;gap:.5rem;width:100%;min-height:44px;height:44px;padding:0 .75rem;border:1px solid #EAECF5;box-shadow:0 1px 2px #a1afec66;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease;font-family:Quicksand,sans-serif}.date-picker-input:hover:not(.disabled){border-color:#fbd399}.date-picker-input.open{border-color:#fbd399;box-shadow:0 0 0 4px #ffe8c8,0 1px 2px #0a0d120d}.date-picker-input.error{border-color:#f04438}.date-picker-input.disabled{background:#f9fafb;cursor:not-allowed;opacity:.6}.date-picker-input .calendar-icon{color:#a4a7ae;flex-shrink:0}.date-picker-input .date-picker-placeholder{color:#a4a7ae;font-size:14px;flex:1}.date-picker-input .date-picker-value{color:#2e353a;font-size:14px;font-weight:500;flex:1}.field-error{color:#f04438;font-size:.875rem;margin-top:.25rem;font-family:Quicksand,sans-serif}.date-picker-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none}.date-picker-dropdown{pointer-events:all;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;opacity:0;transform:translateY(-10px);transition:all .2s ease;overflow:visible}.date-picker-dropdown.open{opacity:1;transform:translateY(0)}.date-picker-content{display:flex;font-family:Quicksand,sans-serif;overflow:visible}.date-picker-main{display:flex;flex-direction:column;flex:1;overflow:visible}.filter-sidebar{padding:.5rem .8rem;min-width:170px;display:flex;flex-direction:column;border-right:1px solid #F3F4F6}.filter-sidebar .filter-option{font-family:Quicksand,sans-serif;padding:.625rem .8rem;color:#6b7280;cursor:pointer;transition:all .15s ease;white-space:nowrap;position:relative;font-weight:400;font-size:14px}.filter-sidebar .filter-option:hover:not(.active){background:#f9fafb}.filter-sidebar .filter-option.active{background:#fef4e6;color:#f7a733;font-weight:500;border-radius:6px}.calendars-container{display:flex;gap:3rem;padding:1rem;overflow:visible}.date-picker-dropdown:not(.range-mode) .calendars-container{gap:0;justify-content:center}.calendar{display:flex;flex-direction:column;gap:1rem;position:relative;overflow:visible}.calendar .calendar-header{display:flex;align-items:center;justify-content:space-between;padding:0 .25rem;margin-bottom:.5rem;position:relative;overflow:visible}.calendar .calendar-header .month-year-selector{position:relative;flex:1;display:flex;justify-content:center}.calendar .calendar-header .month-year{font-size:.9375rem;font-weight:600;color:#1f2937;min-width:160px;text-align:center;background:transparent;border:none;cursor:pointer;padding:.375rem .5rem;border-radius:6px;transition:all .15s ease}.calendar .calendar-header .month-year:hover{background:#f3f4f6}.calendar .calendar-header .nav-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:#6b7280;transition:all .15s ease;padding:0}.calendar .calendar-header .nav-button:hover:not(:disabled):not(.disabled){background:#f3f4f6;color:#1f2937}.calendar .calendar-header .nav-button.disabled,.calendar .calendar-header .nav-button:disabled{color:#d1d5db;cursor:not-allowed;opacity:.4}.calendar .calendar-header .nav-button svg{width:10px;height:10px}.calendar .calendar-header .nav-button-placeholder{width:28px;height:28px}.calendar .month-year-picker{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:.5rem;background:#fff;border-radius:8px;box-shadow:0 10px 30px #0003;z-index:10002;padding:1rem;min-width:280px;border:1px solid #E5E7EB}.calendar .month-year-picker .picker-section{margin-bottom:1rem}.calendar .month-year-picker .picker-section:last-child{margin-bottom:0}.calendar .month-year-picker .picker-section .picker-title{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.calendar .month-year-picker .picker-section .picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.calendar .month-year-picker .picker-section .picker-header .picker-title{margin-bottom:0;font-size:.75rem;font-weight:600;color:#1f2937;text-transform:none;letter-spacing:0}.calendar .month-year-picker .picker-section .picker-header .year-nav-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;color:#6b7280;transition:all .15s ease;padding:0}.calendar .month-year-picker .picker-section .picker-header .year-nav-button:hover:not(:disabled):not(.disabled){background:#f3f4f6;color:#1f2937}.calendar .month-year-picker .picker-section .picker-header .year-nav-button.disabled,.calendar .month-year-picker .picker-section .picker-header .year-nav-button:disabled{color:#d1d5db;cursor:not-allowed;opacity:.5}.calendar .month-year-picker .picker-section .picker-header .year-nav-button svg{width:10px;height:10px}.calendar .month-year-picker .months-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem}.calendar .month-year-picker .months-grid .month-option{padding:.5rem;border:1px solid #E5E7EB;background:#fff;border-radius:6px;font-size:.75rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s ease}.calendar .month-year-picker .months-grid .month-option:hover{background:#f9fafb;border-color:#d1d5db}.calendar .month-year-picker .months-grid .month-option.active{background:#f59100;color:#fff;border-color:#f59100}.calendar .month-year-picker .months-grid .month-option.disabled,.calendar .month-year-picker .months-grid .month-option:disabled{background:#f9fafb;color:#d1d5db;border-color:#e5e7eb;cursor:not-allowed;pointer-events:none}.calendar .month-year-picker .years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem;max-height:200px;overflow-y:auto}.calendar .month-year-picker .years-grid .year-option{padding:.5rem;border:1px solid #E5E7EB;background:#fff;border-radius:6px;font-size:.75rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s ease}.calendar .month-year-picker .years-grid .year-option:hover{background:#f9fafb;border-color:#d1d5db}.calendar .month-year-picker .years-grid .year-option.active{background:#f59100;color:#fff;border-color:#f59100}.calendar .month-year-picker .years-grid .year-option.disabled,.calendar .month-year-picker .years-grid .year-option:disabled{background:#f9fafb;color:#d1d5db;border-color:#e5e7eb;cursor:not-allowed;pointer-events:none}.calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 0}.calendar .calendar-grid .weekday-header{display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:500;color:#9ca3af;padding:.5rem 0;text-transform:uppercase;letter-spacing:.5px}.calendar .calendar-grid .calendar-day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:.8125rem;color:#1f2937;cursor:pointer;transition:all .15s ease;position:relative;font-weight:400;border-radius:0}.calendar .calendar-grid .calendar-day.other-month{color:#d1d5db}.calendar .calendar-grid .calendar-day.today{font-weight:600;color:#f59100;background:transparent}.calendar .calendar-grid .calendar-day.today:after{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background:#f59100;border-radius:50%}.calendar .calendar-grid .calendar-day:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end):not(.in-range){background:#fef4e6;border-radius:50%}.calendar .calendar-grid .calendar-day.in-range:hover:not(.disabled):not(.range-start):not(.range-end){position:relative;background:transparent}.calendar .calendar-grid .calendar-day.in-range:hover:not(.disabled):not(.range-start):not(.range-end):before{content:\"\";position:absolute;inset:0;background:#fef4e6;z-index:-1;border-radius:0}.calendar .calendar-grid .calendar-day.in-range:hover:not(.disabled):not(.range-start):not(.range-end):after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:#fef4e6;border-radius:50%;z-index:0}.calendar .calendar-grid .calendar-day.in-range:hover:not(.disabled):not(.range-start):not(.range-end) span{position:relative;z-index:1;color:#f59100}.calendar .calendar-grid .calendar-day.in-range:not(.disabled):not(.range-start):not(.range-end){background:#fef4e6;color:#f59100;border-radius:0}.calendar .calendar-grid .calendar-day.in-range:not(.disabled):not(.range-start):not(.range-end):nth-child(7n+8){border-radius:50% 0 0 50%}.calendar .calendar-grid .calendar-day.in-range:not(.disabled):not(.range-start):not(.range-end):nth-child(7n+14){border-radius:0 50% 50% 0}.calendar .calendar-grid .calendar-day.in-range:not(.disabled):not(.range-start):not(.range-end):nth-child(7n+8):nth-child(7n+14){border-radius:50%}.calendar .calendar-grid .calendar-day.range-start:not(.disabled){position:relative;background:transparent;color:#fff;font-weight:600;z-index:2}.calendar .calendar-grid .calendar-day.range-start:not(.disabled):before{content:\"\";position:absolute;inset:0;background:#fef4e6;z-index:-1;border-radius:50% 0 0 50%}.calendar .calendar-grid .calendar-day.range-start:not(.disabled):after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:#f59100;border-radius:50%;z-index:1}.calendar .calendar-grid .calendar-day.range-start:not(.disabled) span{position:relative;z-index:2}.calendar .calendar-grid .calendar-day.range-start:not(.disabled).range-end:before{border-radius:50%}.calendar .calendar-grid .calendar-day.range-end:not(.disabled){position:relative;background:transparent;color:#fff;font-weight:600;z-index:2}.calendar .calendar-grid .calendar-day.range-end:not(.disabled):before{content:\"\";position:absolute;inset:0;background:#fef4e6;z-index:-1;border-radius:0 50% 50% 0}.calendar .calendar-grid .calendar-day.range-end:not(.disabled):after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:#f59100;border-radius:50%;z-index:1}.calendar .calendar-grid .calendar-day.range-end:not(.disabled) span{position:relative;z-index:2}.calendar .calendar-grid .calendar-day.range-end:not(.disabled).range-start:before{border-radius:50%}.calendar .calendar-grid .calendar-day.range-start.in-range:not(.disabled){position:relative}.calendar .calendar-grid .calendar-day.range-start.in-range:not(.disabled):before{content:\"\";position:absolute;inset:0 -2px 0 50%;background:#fef4e6;z-index:-1}.calendar .calendar-grid .calendar-day.range-end.in-range:not(.disabled){position:relative}.calendar .calendar-grid .calendar-day.range-end.in-range:not(.disabled):before{content:\"\";position:absolute;inset:0 50% 0 -2px;background:#fef4e6;z-index:-1}.calendar .calendar-grid .calendar-day.selected:not(.range-start):not(.range-end){background:#f59100;color:#fff;font-weight:600;border-radius:50%}.calendar .calendar-grid .calendar-day.disabled{color:#e5e7eb;cursor:not-allowed;pointer-events:none}.footer{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-top:1px solid #E5E7EB}.footer .selected-dates{display:flex;align-items:center;gap:.75rem}.footer .selected-dates .date-display{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#fff;border:1px solid #E5E7EB;border-radius:6px;font-size:.8125rem;color:#6b7280}.footer .selected-dates .date-display svg{flex-shrink:0;color:#9ca3af}.footer .selected-dates .date-display .date-text{font-weight:400;white-space:nowrap;-webkit-user-select:none;user-select:none}.footer .selected-dates .date-separator{color:#9ca3af;font-weight:400;font-size:.875rem}.footer .action-buttons{display:flex;gap:.75rem}.footer .action-buttons button{padding:.625rem 1.75rem;border-radius:8px;font-size:.875rem;font-weight:500;font-family:Quicksand,sans-serif;cursor:pointer;transition:all .15s ease;border:none;outline:none}.footer .action-buttons button:focus-visible{outline:2px solid rgba(245,145,0,.3);outline-offset:2px}.footer .action-buttons .btn-cancel{background:#fff;color:#6b7280;border:1px solid #D1D5DB}.footer .action-buttons .btn-cancel:hover{background:#f9fafb;border-color:#9ca3af}.footer .action-buttons .btn-apply{background:#f59100;color:#fff;border:1px solid #F59100}.footer .action-buttons .btn-apply:hover{background:#e08500;border-color:#e08500}.footer .action-buttons .btn-apply:active{background:#cc7a00;border-color:#cc7a00}@media (max-width: 768px){.date-picker-content{flex-direction:column}.filter-sidebar{display:none}.calendars-container{padding:.75rem;gap:0;justify-content:center}.calendars-container .calendar:last-child:not(:first-child){display:none}.calendar .calendar-header .month-year-selector{flex:1}.calendar .calendar-header .month-year{min-width:auto;font-size:.875rem;padding:.25rem .375rem}.calendar .calendar-header .nav-button{width:28px;height:28px}.calendar .calendar-header .nav-button svg{width:10px;height:10px}.calendar .calendar-header .nav-button-placeholder{display:none}.calendar .month-year-picker{min-width:240px;padding:.75rem}.calendar .month-year-picker .picker-section .picker-title{font-size:.7rem}.calendar .month-year-picker .months-grid{grid-template-columns:repeat(3,1fr);gap:.25rem}.calendar .month-year-picker .months-grid .month-option{padding:.4rem;font-size:.7rem}.calendar .month-year-picker .years-grid{grid-template-columns:repeat(3,1fr);gap:.25rem;max-height:150px}.calendar .month-year-picker .years-grid .year-option{padding:.4rem;font-size:.7rem}.calendar .calendar-grid{gap:2px 0}.calendar .calendar-grid .calendar-day{width:30px;height:30px;font-size:.75rem}.calendar .calendar-grid .weekday-header{font-size:.65rem}.footer{flex-direction:column;gap:.75rem;padding:.75rem}.footer .selected-dates{width:100%;justify-content:center;flex-wrap:wrap;gap:.5rem}.footer .selected-dates .date-display{font-size:.7rem;padding:.35rem .5rem}.footer .selected-dates .date-display svg{width:12px;height:12px}.footer .selected-dates .date-separator{font-size:.7rem}.footer .action-buttons{width:100%;gap:.5rem}.footer .action-buttons button{flex:1;padding:.625rem .75rem;font-size:.75rem}.date-picker-dropdown{width:280px!important;max-width:calc(100vw - 2rem);max-height:calc(100vh - 4rem);overflow-y:auto}.date-picker-dropdown.range-mode{width:280px!important}}@media (max-width: 480px){.calendars-container{padding:.5rem}.calendar .calendar-header .month-year{font-size:.8125rem;padding:.2rem .3rem}.calendar .calendar-header .nav-button{width:26px;height:26px}.calendar .calendar-header .nav-button svg{width:9px;height:9px}.calendar .month-year-picker{min-width:220px;padding:.625rem}.calendar .month-year-picker .picker-section{margin-bottom:.75rem}.calendar .month-year-picker .picker-section .picker-title{font-size:.65rem;margin-bottom:.375rem}.calendar .month-year-picker .months-grid{gap:.2rem}.calendar .month-year-picker .months-grid .month-option{padding:.35rem;font-size:.65rem}.calendar .month-year-picker .years-grid{gap:.2rem;max-height:120px}.calendar .month-year-picker .years-grid .year-option{padding:.35rem;font-size:.65rem}.calendar .calendar-grid{gap:1px 0}.calendar .calendar-grid .weekday-header{font-size:.6rem;padding:.35rem 0}.calendar .calendar-grid .calendar-day{width:28px;height:28px;font-size:.7rem}.footer{padding:.5rem;gap:.5rem}.footer .selected-dates{gap:.4rem}.footer .selected-dates .date-display{font-size:.65rem;padding:.3rem .4rem}.footer .selected-dates .date-display svg{width:11px;height:11px}.footer .selected-dates .date-separator{font-size:.65rem}.footer .action-buttons{gap:.4rem}.footer .action-buttons button{padding:.5rem .625rem;font-size:.7rem}.date-picker-dropdown{width:260px!important;max-width:calc(100vw - 1rem)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-date-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"date-picker-wrapper\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n\n  <div class=\"date-picker-container\">\n    <div\n      #trigger\n      class=\"date-picker-input\"\n      [class.error]=\"hasError\"\n      [class.disabled]=\"disabled\"\n      [class.open]=\"isOpen\"\n      [class.icon-right]=\"iconPosition === 'right'\"\n      (click)=\"toggleDropdown($event)\">\n\n      <svg *ngIf=\"iconPosition === 'left'\" class=\"calendar-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M6.66667 1.66667V4.16667M13.3333 1.66667V4.16667M2.5 7.5H17.5M4.16667 3.33333H15.8333C16.7538 3.33333 17.5 4.07953 17.5 5V16.6667C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6667V5C2.5 4.07953 3.24619 3.33333 4.16667 3.33333Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n\n      <span class=\"date-picker-placeholder\" *ngIf=\"!getDisplayValue()\">\n        {{ placeholder }}\n      </span>\n      <span class=\"date-picker-value\" *ngIf=\"getDisplayValue()\">\n        {{ getDisplayValue() }}\n      </span>\n\n      <svg *ngIf=\"iconPosition === 'right'\" class=\"calendar-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M6.66667 1.66667V4.16667M13.3333 1.66667V4.16667M2.5 7.5H17.5M4.16667 3.33333H15.8333C16.7538 3.33333 17.5 4.07953 17.5 5V16.6667C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6667V5C2.5 4.07953 3.24619 3.33333 4.16667 3.33333Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <div *ngIf=\"hasError && errorMessage\" class=\"field-error\">\n    {{ errorMessage }}\n  </div>\n</div>\n\n<!-- Dropdown content (rendered with fixed position) -->\n<div *ngIf=\"isOpen\" class=\"date-picker-overlay\">\n  <div #dropdown class=\"date-picker-dropdown\" [class.open]=\"isOpen\" [class.range-mode]=\"rangeMode\" [ngStyle]=\"getDropdownStyle()\">\n    <div class=\"date-picker-content\">\n      <!-- Sidebar with filters (only for range mode) -->\n      <div class=\"filter-sidebar\" *ngIf=\"rangeMode\">\n        <div\n          *ngFor=\"let option of filterOptions\"\n          class=\"filter-option\"\n          [class.active]=\"selectedFilter === option.value\"\n          (click)=\"selectFilter(option.value)\">\n          {{ option.label }}\n        </div>\n      </div>\n\n      <!-- Main content (calendars + footer) -->\n      <div class=\"date-picker-main\">\n        <!-- Calendars -->\n        <div class=\"calendars-container\">\n          <!-- Left Calendar (or single calendar in single mode) -->\n          <div class=\"calendar\">\n            <div class=\"calendar-header\">\n              <button\n                type=\"button\"\n                class=\"nav-button\"\n                [disabled]=\"!canNavigatePreviousMonth()\"\n                [class.disabled]=\"!canNavigatePreviousMonth()\"\n                (click)=\"previousMonth()\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M7.5 2L3.5 6L7.5 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n              <div class=\"month-year-selector\">\n                <button type=\"button\" class=\"month-year\" (click)=\"toggleLeftMonthPicker($event)\">\n                  {{ getMonthYear(leftMonthDate) }}\n                </button>\n\n                <!-- Month/Year Picker Dropdown -->\n                <div class=\"month-year-picker\" *ngIf=\"showLeftMonthPicker\" (click)=\"$event.stopPropagation()\">\n                  <div class=\"picker-section\">\n                    <div class=\"picker-title\">Mes</div>\n                    <div class=\"months-grid\">\n                      <button\n                        type=\"button\"\n                        *ngFor=\"let month of months; let i = index\"\n                        class=\"month-option\"\n                        [class.active]=\"i === leftMonthDate.getMonth()\"\n                        [class.disabled]=\"isMonthDisabled(i, leftMonthDate)\"\n                        [disabled]=\"isMonthDisabled(i, leftMonthDate)\"\n                        (click)=\"selectLeftMonth(i, $event)\">\n                        {{ month.substring(0, 3) }}\n                      </button>\n                    </div>\n                  </div>\n                  <div class=\"picker-section\">\n                    <div class=\"picker-header\">\n                      <button\n                        type=\"button\"\n                        class=\"year-nav-button\"\n                        [disabled]=\"!canNavigateLeftYearsPrevious()\"\n                        [class.disabled]=\"!canNavigateLeftYearsPrevious()\"\n                        (click)=\"previousLeftYearPage($event)\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path d=\"M6.25 2.5L3.75 5L6.25 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                      </button>\n                      <div class=\"picker-title\">{{ getLeftYearRangeLabel() }}</div>\n                      <button\n                        type=\"button\"\n                        class=\"year-nav-button\"\n                        [disabled]=\"!canNavigateLeftYearsNext()\"\n                        [class.disabled]=\"!canNavigateLeftYearsNext()\"\n                        (click)=\"nextLeftYearPage($event)\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path d=\"M3.75 2.5L6.25 5L3.75 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                      </button>\n                    </div>\n                    <div class=\"years-grid\">\n                      <button\n                        type=\"button\"\n                        *ngFor=\"let year of getLeftYears()\"\n                        class=\"year-option\"\n                        [class.active]=\"year === leftMonthDate.getFullYear()\"\n                        [class.disabled]=\"isYearDisabled(year)\"\n                        [disabled]=\"isYearDisabled(year)\"\n                        (click)=\"selectLeftYear(year, $event)\">\n                        {{ year }}\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"nav-button\"\n                [disabled]=\"!canNavigateNextMonth()\"\n                [class.disabled]=\"!canNavigateNextMonth()\"\n                (click)=\"nextMonth()\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M4.5 2L8.5 6L4.5 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n            </div>\n\n            <div class=\"calendar-grid\">\n              <div class=\"weekday-header\" *ngFor=\"let day of weekDays\">\n                {{ day }}\n              </div>\n\n              <div\n                *ngFor=\"let day of leftCalendarDays; trackBy: trackByDate\"\n                class=\"calendar-day\"\n                [class.other-month]=\"!day.isCurrentMonth\"\n                [class.today]=\"day.isToday\"\n                [class.selected]=\"day.isSelected\"\n                [class.in-range]=\"rangeMode && isInRange(day.date)\"\n                [class.range-start]=\"day.isRangeStart\"\n                [class.range-end]=\"day.isRangeEnd\"\n                [class.disabled]=\"day.isDisabled\"\n                (click)=\"onDayClick(day)\"\n                (mouseenter)=\"onDayHover(day)\"\n                (mouseleave)=\"onDayLeave()\">\n                <span>{{ day.date.getDate() }}</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Calendar (only for range mode) -->\n          <div class=\"calendar\" *ngIf=\"rangeMode\">\n            <div class=\"calendar-header\">\n              <div class=\"nav-button-placeholder\"></div>\n              <div class=\"month-year-selector\">\n                <button type=\"button\" class=\"month-year\" (click)=\"toggleRightMonthPicker($event)\">\n                  {{ getMonthYear(rightMonthDate) }}\n                </button>\n\n                <!-- Month/Year Picker Dropdown -->\n                <div class=\"month-year-picker\" *ngIf=\"showRightMonthPicker\" (click)=\"$event.stopPropagation()\">\n                  <div class=\"picker-section\">\n                    <div class=\"picker-title\">Mes</div>\n                    <div class=\"months-grid\">\n                      <button\n                        type=\"button\"\n                        *ngFor=\"let month of months; let i = index\"\n                        class=\"month-option\"\n                        [class.active]=\"i === rightMonthDate.getMonth()\"\n                        [class.disabled]=\"isMonthDisabled(i, rightMonthDate)\"\n                        [disabled]=\"isMonthDisabled(i, rightMonthDate)\"\n                        (click)=\"selectRightMonth(i, $event)\">\n                        {{ month.substring(0, 3) }}\n                      </button>\n                    </div>\n                  </div>\n                  <div class=\"picker-section\">\n                    <div class=\"picker-header\">\n                      <button\n                        type=\"button\"\n                        class=\"year-nav-button\"\n                        [disabled]=\"!canNavigateRightYearsPrevious()\"\n                        [class.disabled]=\"!canNavigateRightYearsPrevious()\"\n                        (click)=\"previousRightYearPage($event)\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path d=\"M6.25 2.5L3.75 5L6.25 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                      </button>\n                      <div class=\"picker-title\">{{ getRightYearRangeLabel() }}</div>\n                      <button\n                        type=\"button\"\n                        class=\"year-nav-button\"\n                        [disabled]=\"!canNavigateRightYearsNext()\"\n                        [class.disabled]=\"!canNavigateRightYearsNext()\"\n                        (click)=\"nextRightYearPage($event)\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path d=\"M3.75 2.5L6.25 5L3.75 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                      </button>\n                    </div>\n                    <div class=\"years-grid\">\n                      <button\n                        type=\"button\"\n                        *ngFor=\"let year of getRightYears()\"\n                        class=\"year-option\"\n                        [class.active]=\"year === rightMonthDate.getFullYear()\"\n                        [class.disabled]=\"isYearDisabled(year)\"\n                        [disabled]=\"isYearDisabled(year)\"\n                        (click)=\"selectRightYear(year, $event)\">\n                        {{ year }}\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"nav-button\"\n                [disabled]=\"!canNavigateNextMonth()\"\n                [class.disabled]=\"!canNavigateNextMonth()\"\n                (click)=\"nextMonth()\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M4.5 2L8.5 6L4.5 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n            </div>\n\n            <div class=\"calendar-grid\">\n              <div class=\"weekday-header\" *ngFor=\"let day of weekDays\">\n                {{ day }}\n              </div>\n\n              <div\n                *ngFor=\"let day of rightCalendarDays; trackBy: trackByDate\"\n                class=\"calendar-day\"\n                [class.other-month]=\"!day.isCurrentMonth\"\n                [class.today]=\"day.isToday\"\n                [class.selected]=\"day.isSelected\"\n                [class.in-range]=\"isInRange(day.date)\"\n                [class.range-start]=\"day.isRangeStart\"\n                [class.range-end]=\"day.isRangeEnd\"\n                [class.disabled]=\"day.isDisabled\"\n                (click)=\"onDayClick(day)\"\n                (mouseenter)=\"onDayHover(day)\"\n                (mouseleave)=\"onDayLeave()\">\n                <span>{{ day.date.getDate() }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Footer with dates and actions (only for range mode) -->\n        <div class=\"footer\" *ngIf=\"rangeMode\">\n          <div class=\"selected-dates\">\n            <div class=\"date-display\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5.33333 1.33333V3.33333M10.6667 1.33333V3.33333M2 6H14M3.33333 2.66667H12.6667C13.403 2.66667 14 3.26362 14 4V13.3333C14 14.0697 13.403 14.6667 12.6667 14.6667H3.33333C2.59695 14.6667 2 14.0697 2 13.3333V4C2 3.26362 2.59695 2.66667 3.33333 2.66667Z\" stroke=\"#6B7280\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"date-text\">{{ getStartDateDisplay() }}</span>\n            </div>\n            <span class=\"date-separator\">-</span>\n            <div class=\"date-display\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M5.33333 1.33333V3.33333M10.6667 1.33333V3.33333M2 6H14M3.33333 2.66667H12.6667C13.403 2.66667 14 3.26362 14 4V13.3333C14 14.0697 13.403 14.6667 12.6667 14.6667H3.33333C2.59695 14.6667 2 14.0697 2 13.3333V4C2 3.26362 2.59695 2.66667 3.33333 2.66667Z\" stroke=\"#6B7280\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"date-text\">{{ getEndDateDisplay() }}</span>\n            </div>\n          </div>\n\n          <div class=\"action-buttons\">\n            <button type=\"button\" class=\"btn-cancel\" (click)=\"cancel()\">\n              Cancelar\n            </button>\n            <button type=\"button\" class=\"btn-apply\" (click)=\"apply()\">\n              Aplicar\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".date-picker-wrapper{display:flex;flex-direction:column;width:100%;margin-bottom:6px;padding:0 4px}.date-picker-wrapper label{display:block;margin-bottom:.5rem;font-family:Quicksand,sans-serif;font-weight:500;font-size:14px;color:#585d61}.date-picker-container{position:relative;width:100%}.date-picker-input{display:flex;align-items:center;gap:.5rem;width:100%;min-height:44px;height:44px;padding:0 .75rem;border:1px solid #EAECF5;box-shadow:0 1px 2px #a1afec66;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease;font-family:Quicksand,sans-serif}.date-picker-input:hover:not(.disabled){border-color:#fbd399}.date-picker-input.open{border-color:#fbd399;box-shadow:0 0 0 4px #ffe8c8,0 1px 2px #0a0d120d}.date-picker-input.error{border-color:#f04438}.date-picker-input.disabled{background:#f9fafb;cursor:not-allowed;opacity:.6}.date-picker-input .calendar-icon{color:#a4a7ae;flex-shrink:0}.date-picker-input .date-picker-placeholder{color:#a4a7ae;font-size:14px;flex:1}.date-picker-input .date-picker-value{color:#2e353a;font-size:14px;font-weight:500;flex:1}.field-error{color:#f04438;font-size:.875rem;margin-top:.25rem;font-family:Quicksand,sans-serif}.date-picker-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none}.date-picker-dropdown{pointer-events:all;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;opacity:0;transform:translateY(-10px);transition:all .2s ease;overflow:visible}.date-picker-dropdown.open{opacity:1;transform:translateY(0)}.date-picker-content{display:flex;font-family:Quicksand,sans-serif;overflow:visible}.date-picker-main{display:flex;flex-direction:column;flex:1;overflow:visible}.filter-sidebar{padding:.5rem .8rem;min-width:170px;display:flex;flex-direction:column;border-right:1px solid #F3F4F6}.filter-sidebar .filter-option{font-family:Quicksand,sans-serif;padding:.625rem .8rem;color:#6b7280;cursor:pointer;transition:all .15s ease;white-space:nowrap;position:relative;font-weight:400;font-size:14px}.filter-sidebar .filter-option:hover:not(.active){background:#f9fafb}.filter-sidebar .filter-option.active{background:#fef4e6;color:#f7a733;font-weight:500;border-radius:6px}.calendars-container{display:flex;gap:3rem;padding:1rem;overflow:visible}.date-picker-dropdown:not(.range-mode) .calendars-container{gap:0;justify-content:center}.calendar{display:flex;flex-direction:column;gap:1rem;position:relative;overflow:visible}.calendar .calendar-header{display:flex;align-items:center;justify-content:space-between;padding:0 .25rem;margin-bottom:.5rem;position:relative;overflow:visible}.calendar .calendar-header .month-year-selector{position:relative;flex:1;display:flex;justify-content:center}.calendar .calendar-header .month-year{font-size:.9375rem;font-weight:600;color:#1f2937;min-width:160px;text-align:center;background:transparent;border:none;cursor:pointer;padding:.375rem .5rem;border-radius:6px;transition:all .15s ease}.calendar .calendar-header .month-year:hover{background:#f3f4f6}.calendar .calendar-header .nav-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:#6b7280;transition:all .15s ease;padding:0}.calendar .calendar-header .nav-button:hover:not(:disabled):not(.disabled){background:#f3f4f6;color:#1f2937}.calendar .calendar-header .nav-button.disabled,.calendar .calendar-header .nav-button:disabled{color:#d1d5db;cursor:not-allowed;opacity:.4}.calendar .calendar-header .nav-button svg{width:10px;height:10px}.calendar .calendar-header .nav-button-placeholder{width:28px;height:28px}.calendar .month-year-picker{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:.5rem;background:#fff;border-radius:8px;box-shadow:0 10px 30px #0003;z-index:10002;padding:1rem;min-width:280px;border:1px solid #E5E7EB}.calendar .month-year-picker .picker-section{margin-bottom:1rem}.calendar .month-year-picker .picker-section:last-child{margin-bottom:0}.calendar .month-year-picker .picker-section .picker-title{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.calendar .month-year-picker .picker-section .picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.calendar .month-year-picker .picker-section .picker-header .picker-title{margin-bottom:0;font-size:.75rem;font-weight:600;color:#1f2937;text-transform:none;letter-spacing:0}.calendar .month-year-picker .picker-section .picker-header .year-nav-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;color:#6b7280;transition:all .15s ease;padding:0}.calendar .month-year-picker .picker-section .picker-header .year-nav-button:hover:not(:disabled):not(.disabled){background:#f3f4f6;color:#1f2937}.calendar .month-year-picker .picker-section .picker-header .year-nav-button.disabled,.calendar .month-year-picker .picker-section .picker-header .year-nav-button:disabled{color:#d1d5db;cursor:not-allowed;opacity:.5}.calendar .month-year-picker .picker-section .picker-header .year-nav-button svg{width:10px;height:10px}.calendar .month-year-picker .months-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem}.calendar .month-year-picker .months-grid .month-option{padding:.5rem;border:1px solid #E5E7EB;background:#fff;border-radius:6px;font-size:.75rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s ease}.calendar .month-year-picker .months-grid .month-option:hover{background:#f9fafb;border-color:#d1d5db}.calendar .month-year-picker .months-grid .month-option.active{background:#f59100;color:#fff;border-color:#f59100}.calendar .month-year-picker .months-grid .month-option.disabled,.calendar .month-year-picker .months-grid .month-option:disabled{background:#f9fafb;color:#d1d5db;border-color:#e5e7eb;cursor:not-allowed;pointer-events:none}.calendar .month-year-picker .years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem;max-height:200px;overflow-y:auto}.calendar .month-year-picker .years-grid .year-option{padding:.5rem;border:1px solid #E5E7EB;background:#fff;border-radius:6px;font-size:.75rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s ease}.calendar .month-year-picker .years-grid .year-option:hover{background:#f9fafb;border-color:#d1d5db}.calendar .month-year-picker .years-grid .year-option.active{background:#f59100;color:#fff;border-color:#f59100}.calendar .month-year-picker .years-grid .year-option.disabled,.calendar .month-year-picker .years-grid .year-option:disabled{background:#f9fafb;color:#d1d5db;border-color:#e5e7eb;cursor:not-allowed;pointer-events:none}.calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 0}.calendar .calendar-grid .weekday-header{display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:500;color:#9ca3af;padding:.5rem 0;text-transform:uppercase;letter-spacing:.5px}.calendar .calendar-grid .calendar-day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:.8125rem;color:#1f2937;cursor:pointer;transition:all .15s ease;position:relative;font-weight:400;border-radius:0}.calendar .calendar-grid .calendar-day.other-month{color:#d1d5db}.calendar .calendar-grid .calendar-day.today{font-weight:600;color:#f59100;background:transparent}.calendar .calendar-grid .calendar-day.today:after{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background:#f59100;border-radius:50%}.calendar .calendar-grid .calendar-day:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end):not(.in-range){background:#fef4e6;border-radius:50%}.calendar .calendar-grid .calendar-day.in-range:hover:not(.disabled):not(.range-start):not(.range-end){position:relative;background:transparent}.calendar .calendar-grid .calendar-day.in-range:hover:not(.disabled):not(.range-start):not(.range-end):before{content:\"\";position:absolute;inset:0;background:#fef4e6;z-index:-1;border-radius:0}.calendar .calendar-grid .calendar-day.in-range:hover:not(.disabled):not(.range-start):not(.range-end):after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:#fef4e6;border-radius:50%;z-index:0}.calendar .calendar-grid .calendar-day.in-range:hover:not(.disabled):not(.range-start):not(.range-end) span{position:relative;z-index:1;color:#f59100}.calendar .calendar-grid .calendar-day.in-range:not(.disabled):not(.range-start):not(.range-end){background:#fef4e6;color:#f59100;border-radius:0}.calendar .calendar-grid .calendar-day.in-range:not(.disabled):not(.range-start):not(.range-end):nth-child(7n+8){border-radius:50% 0 0 50%}.calendar .calendar-grid .calendar-day.in-range:not(.disabled):not(.range-start):not(.range-end):nth-child(7n+14){border-radius:0 50% 50% 0}.calendar .calendar-grid .calendar-day.in-range:not(.disabled):not(.range-start):not(.range-end):nth-child(7n+8):nth-child(7n+14){border-radius:50%}.calendar .calendar-grid .calendar-day.range-start:not(.disabled){position:relative;background:transparent;color:#fff;font-weight:600;z-index:2}.calendar .calendar-grid .calendar-day.range-start:not(.disabled):before{content:\"\";position:absolute;inset:0;background:#fef4e6;z-index:-1;border-radius:50% 0 0 50%}.calendar .calendar-grid .calendar-day.range-start:not(.disabled):after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:#f59100;border-radius:50%;z-index:1}.calendar .calendar-grid .calendar-day.range-start:not(.disabled) span{position:relative;z-index:2}.calendar .calendar-grid .calendar-day.range-start:not(.disabled).range-end:before{border-radius:50%}.calendar .calendar-grid .calendar-day.range-end:not(.disabled){position:relative;background:transparent;color:#fff;font-weight:600;z-index:2}.calendar .calendar-grid .calendar-day.range-end:not(.disabled):before{content:\"\";position:absolute;inset:0;background:#fef4e6;z-index:-1;border-radius:0 50% 50% 0}.calendar .calendar-grid .calendar-day.range-end:not(.disabled):after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:#f59100;border-radius:50%;z-index:1}.calendar .calendar-grid .calendar-day.range-end:not(.disabled) span{position:relative;z-index:2}.calendar .calendar-grid .calendar-day.range-end:not(.disabled).range-start:before{border-radius:50%}.calendar .calendar-grid .calendar-day.range-start.in-range:not(.disabled){position:relative}.calendar .calendar-grid .calendar-day.range-start.in-range:not(.disabled):before{content:\"\";position:absolute;inset:0 -2px 0 50%;background:#fef4e6;z-index:-1}.calendar .calendar-grid .calendar-day.range-end.in-range:not(.disabled){position:relative}.calendar .calendar-grid .calendar-day.range-end.in-range:not(.disabled):before{content:\"\";position:absolute;inset:0 50% 0 -2px;background:#fef4e6;z-index:-1}.calendar .calendar-grid .calendar-day.selected:not(.range-start):not(.range-end){background:#f59100;color:#fff;font-weight:600;border-radius:50%}.calendar .calendar-grid .calendar-day.disabled{color:#e5e7eb;cursor:not-allowed;pointer-events:none}.footer{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-top:1px solid #E5E7EB}.footer .selected-dates{display:flex;align-items:center;gap:.75rem}.footer .selected-dates .date-display{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#fff;border:1px solid #E5E7EB;border-radius:6px;font-size:.8125rem;color:#6b7280}.footer .selected-dates .date-display svg{flex-shrink:0;color:#9ca3af}.footer .selected-dates .date-display .date-text{font-weight:400;white-space:nowrap;-webkit-user-select:none;user-select:none}.footer .selected-dates .date-separator{color:#9ca3af;font-weight:400;font-size:.875rem}.footer .action-buttons{display:flex;gap:.75rem}.footer .action-buttons button{padding:.625rem 1.75rem;border-radius:8px;font-size:.875rem;font-weight:500;font-family:Quicksand,sans-serif;cursor:pointer;transition:all .15s ease;border:none;outline:none}.footer .action-buttons button:focus-visible{outline:2px solid rgba(245,145,0,.3);outline-offset:2px}.footer .action-buttons .btn-cancel{background:#fff;color:#6b7280;border:1px solid #D1D5DB}.footer .action-buttons .btn-cancel:hover{background:#f9fafb;border-color:#9ca3af}.footer .action-buttons .btn-apply{background:#f59100;color:#fff;border:1px solid #F59100}.footer .action-buttons .btn-apply:hover{background:#e08500;border-color:#e08500}.footer .action-buttons .btn-apply:active{background:#cc7a00;border-color:#cc7a00}@media (max-width: 768px){.date-picker-content{flex-direction:column}.filter-sidebar{display:none}.calendars-container{padding:.75rem;gap:0;justify-content:center}.calendars-container .calendar:last-child:not(:first-child){display:none}.calendar .calendar-header .month-year-selector{flex:1}.calendar .calendar-header .month-year{min-width:auto;font-size:.875rem;padding:.25rem .375rem}.calendar .calendar-header .nav-button{width:28px;height:28px}.calendar .calendar-header .nav-button svg{width:10px;height:10px}.calendar .calendar-header .nav-button-placeholder{display:none}.calendar .month-year-picker{min-width:240px;padding:.75rem}.calendar .month-year-picker .picker-section .picker-title{font-size:.7rem}.calendar .month-year-picker .months-grid{grid-template-columns:repeat(3,1fr);gap:.25rem}.calendar .month-year-picker .months-grid .month-option{padding:.4rem;font-size:.7rem}.calendar .month-year-picker .years-grid{grid-template-columns:repeat(3,1fr);gap:.25rem;max-height:150px}.calendar .month-year-picker .years-grid .year-option{padding:.4rem;font-size:.7rem}.calendar .calendar-grid{gap:2px 0}.calendar .calendar-grid .calendar-day{width:30px;height:30px;font-size:.75rem}.calendar .calendar-grid .weekday-header{font-size:.65rem}.footer{flex-direction:column;gap:.75rem;padding:.75rem}.footer .selected-dates{width:100%;justify-content:center;flex-wrap:wrap;gap:.5rem}.footer .selected-dates .date-display{font-size:.7rem;padding:.35rem .5rem}.footer .selected-dates .date-display svg{width:12px;height:12px}.footer .selected-dates .date-separator{font-size:.7rem}.footer .action-buttons{width:100%;gap:.5rem}.footer .action-buttons button{flex:1;padding:.625rem .75rem;font-size:.75rem}.date-picker-dropdown{width:280px!important;max-width:calc(100vw - 2rem);max-height:calc(100vh - 4rem);overflow-y:auto}.date-picker-dropdown.range-mode{width:280px!important}}@media (max-width: 480px){.calendars-container{padding:.5rem}.calendar .calendar-header .month-year{font-size:.8125rem;padding:.2rem .3rem}.calendar .calendar-header .nav-button{width:26px;height:26px}.calendar .calendar-header .nav-button svg{width:9px;height:9px}.calendar .month-year-picker{min-width:220px;padding:.625rem}.calendar .month-year-picker .picker-section{margin-bottom:.75rem}.calendar .month-year-picker .picker-section .picker-title{font-size:.65rem;margin-bottom:.375rem}.calendar .month-year-picker .months-grid{gap:.2rem}.calendar .month-year-picker .months-grid .month-option{padding:.35rem;font-size:.65rem}.calendar .month-year-picker .years-grid{gap:.2rem;max-height:120px}.calendar .month-year-picker .years-grid .year-option{padding:.35rem;font-size:.65rem}.calendar .calendar-grid{gap:1px 0}.calendar .calendar-grid .weekday-header{font-size:.6rem;padding:.35rem 0}.calendar .calendar-grid .calendar-day{width:28px;height:28px;font-size:.7rem}.footer{padding:.5rem;gap:.5rem}.footer .selected-dates{gap:.4rem}.footer .selected-dates .date-display{font-size:.65rem;padding:.3rem .4rem}.footer .selected-dates .date-display svg{width:11px;height:11px}.footer .selected-dates .date-separator{font-size:.65rem}.footer .action-buttons{gap:.4rem}.footer .action-buttons button{padding:.5rem .625rem;font-size:.7rem}.date-picker-dropdown{width:260px!important;max-width:calc(100vw - 1rem)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], rangeMode: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger', { read: ElementRef }]
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown', { read: ElementRef }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class LoaderComponent {
+    show = false;
+    message;
+    logo;
+    image;
+    imageAlt = 'Loading';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LoaderComponent, isStandalone: true, selector: "app-loader", inputs: { show: "show", message: "message", logo: "logo", image: "image", imageAlt: "imageAlt" }, ngImport: i0, template: `
+    <div class="svu-loader-overlay" *ngIf="show">
+      <div class="svu-loader-content">
+        <!-- Logo -->
+        <div class="svu-loader-logo" *ngIf="logo">
+          <img [src]="logo" assetSource="mf" alt="Logo">
+        </div>
+
+        <!-- Image/Icon -->
+        <div class="svu-loader-image" *ngIf="image">
+          <img [src]="image" assetSource="mf" [alt]="imageAlt">
+        </div>
+
+        <!-- Loading Dots Animation -->
+        <div class="svu-loader-dots">
+          <span class="svu-loader-dot"></span>
+          <span class="svu-loader-dot"></span>
+          <span class="svu-loader-dot"></span>
+        </div>
+
+        <!-- Message -->
+        <div class="svu-loader-message" *ngIf="message">
+          <span [innerHTML]="message"></span>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".svu-loader-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#f8f9fc;display:flex;align-items:center;justify-content:center;z-index:99999;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.svu-loader-content{display:flex;flex-direction:column;align-items:center;gap:2rem;min-height:500px;justify-content:center}.svu-loader-logo{margin-bottom:2rem}.svu-loader-logo img{height:60px;width:auto}.svu-loader-image{display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out infinite}.svu-loader-image img{max-width:300px;height:auto}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.svu-loader-dots{display:flex;gap:12px;align-items:center;justify-content:center;padding:1rem 0;height:80px}.svu-loader-dot{width:20px;height:20px;border-radius:50%;background:#f59100;position:relative;transform-origin:center}.svu-loader-dot:nth-child(1){animation:bounce 1.4s ease-in-out infinite}.svu-loader-dot:nth-child(2){animation:bounce 1.4s ease-in-out infinite;animation-delay:.2s}.svu-loader-dot:nth-child(3){animation:bounce 1.4s ease-in-out infinite;animation-delay:.4s}@keyframes bounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}.svu-loader-message{font-family:DM Sans,sans-serif;color:#2e353a;text-align:center;font-weight:900;font-size:30px}.svu-loader-message ::ng-deep strong,.svu-loader-message ::ng-deep b{color:#f26d00;font-weight:900}@media (max-width: 768px){.svu-loader-logo img{height:48px}.svu-loader-image img{max-width:200px}.svu-loader-message{font-size:20px;padding:0 1rem}.svu-loader-dots{height:50px;gap:5px}.svu-loader-dot{width:12px;height:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AssetSourceDirective, selector: "[assetSource]", inputs: ["assetSource", "assetPath"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-loader', standalone: true, imports: [CommonModule, AssetSourceDirective], template: `
+    <div class="svu-loader-overlay" *ngIf="show">
+      <div class="svu-loader-content">
+        <!-- Logo -->
+        <div class="svu-loader-logo" *ngIf="logo">
+          <img [src]="logo" assetSource="mf" alt="Logo">
+        </div>
+
+        <!-- Image/Icon -->
+        <div class="svu-loader-image" *ngIf="image">
+          <img [src]="image" assetSource="mf" [alt]="imageAlt">
+        </div>
+
+        <!-- Loading Dots Animation -->
+        <div class="svu-loader-dots">
+          <span class="svu-loader-dot"></span>
+          <span class="svu-loader-dot"></span>
+          <span class="svu-loader-dot"></span>
+        </div>
+
+        <!-- Message -->
+        <div class="svu-loader-message" *ngIf="message">
+          <span [innerHTML]="message"></span>
+        </div>
+      </div>
+    </div>
+  `, styles: [".svu-loader-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#f8f9fc;display:flex;align-items:center;justify-content:center;z-index:99999;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.svu-loader-content{display:flex;flex-direction:column;align-items:center;gap:2rem;min-height:500px;justify-content:center}.svu-loader-logo{margin-bottom:2rem}.svu-loader-logo img{height:60px;width:auto}.svu-loader-image{display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out infinite}.svu-loader-image img{max-width:300px;height:auto}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.svu-loader-dots{display:flex;gap:12px;align-items:center;justify-content:center;padding:1rem 0;height:80px}.svu-loader-dot{width:20px;height:20px;border-radius:50%;background:#f59100;position:relative;transform-origin:center}.svu-loader-dot:nth-child(1){animation:bounce 1.4s ease-in-out infinite}.svu-loader-dot:nth-child(2){animation:bounce 1.4s ease-in-out infinite;animation-delay:.2s}.svu-loader-dot:nth-child(3){animation:bounce 1.4s ease-in-out infinite;animation-delay:.4s}@keyframes bounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}.svu-loader-message{font-family:DM Sans,sans-serif;color:#2e353a;text-align:center;font-weight:900;font-size:30px}.svu-loader-message ::ng-deep strong,.svu-loader-message ::ng-deep b{color:#f26d00;font-weight:900}@media (max-width: 768px){.svu-loader-logo img{height:48px}.svu-loader-image img{max-width:200px}.svu-loader-message{font-size:20px;padding:0 1rem}.svu-loader-dots{height:50px;gap:5px}.svu-loader-dot{width:12px;height:12px}}\n"] }]
+        }], propDecorators: { show: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], logo: [{
+                type: Input
+            }], image: [{
+                type: Input
+            }], imageAlt: [{
+                type: Input
+            }] } });
+
+class OptionComponent {
+    elementRef;
+    value;
+    disabled = false;
+    selected = false;
+    optionClass = true;
+    // Internal property to store text content
+    _viewValue = '';
+    get viewValue() {
+        return this._viewValue || this.getTextContent();
+    }
+    set viewValue(value) {
+        this._viewValue = value;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    /**
+     * Get the text content from the element
+     */
+    getTextContent() {
+        return this.elementRef.nativeElement.textContent?.trim() || '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OptionComponent, isStandalone: true, selector: "app-option", inputs: { value: "value", disabled: "disabled" }, host: { properties: { "class.disabled": "disabled", "class.selected": "this.selected", "class.app-option": "this.optionClass" }, classAttribute: "app-option" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-option',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'class': 'app-option',
+                        '[class.disabled]': 'disabled',
+                        '[class.selected]': 'selected'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selected: [{
+                type: HostBinding,
+                args: ['class.selected']
+            }], optionClass: [{
+                type: HostBinding,
+                args: ['class.app-option']
+            }] } });
+
+class SelectPrefixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SelectPrefixDirective, isStandalone: true, selector: "[prefix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[prefix]',
+                    standalone: true
+                }]
+        }] });
+class SelectSuffixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SelectSuffixDirective, isStandalone: true, selector: "[suffix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[suffix]',
+                    standalone: true
+                }]
+        }] });
+class SelectComponent {
+    renderer;
+    document;
+    label = '';
+    id = '';
+    placeholder = '';
+    options = [];
+    hasError = false;
+    errorMessage = '';
+    disabled = false;
+    unstyled = false;
+    displayKey = 'label'; // Property to display as label
+    valueKey = 'value'; // Property to use as value
+    customClass = ''; // Custom CSS class for styling
+    trigger;
+    contentOptions;
+    prefixDirective;
+    suffixDirective;
+    get hasPrefix() {
+        return !!this.prefixDirective;
+    }
+    get hasSuffix() {
+        return !!this.suffixDirective;
+    }
+    value = '';
+    isOpen = false;
+    onChange = () => { };
+    onTouched = () => { };
+    _usingContentOptions = false;
+    dropdownElement = null;
+    backdropElement = null;
+    scrollHandler = null;
+    resizeHandler = null;
+    constructor(renderer, document) {
+        this.renderer = renderer;
+        this.document = document;
+    }
+    ngAfterContentInit() {
+        // Determine if using content projection or input options
+        this._usingContentOptions = this.contentOptions && this.contentOptions.length > 0;
+        // Subscribe to changes in content options
+        if (this.contentOptions) {
+            this.contentOptions.changes.subscribe(() => {
+                this._usingContentOptions = this.contentOptions.length > 0;
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroyDropdown();
+    }
+    onEsc() {
+        this.closeDropdown();
+        this.onTouched();
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    /**
+     * Get all options (from content or input)
+     */
+    getAllOptions() {
+        if (this._usingContentOptions && this.contentOptions) {
+            return this.contentOptions.toArray();
+        }
+        return this.options || [];
+    }
+    /**
+     * Get display label from option
+     */
+    getOptionLabel(option) {
+        if (option instanceof OptionComponent) {
+            return option.viewValue;
+        }
+        return option?.[this.displayKey] || '';
+    }
+    /**
+     * Get value from option
+     */
+    getOptionValue(option) {
+        if (option instanceof OptionComponent) {
+            return option.value;
+        }
+        return option?.[this.valueKey];
+    }
+    /**
+     * Check if option is disabled
+     */
+    isOptionDisabled(option) {
+        if (option instanceof OptionComponent) {
+            return option.disabled;
+        }
+        return option?.disabled || false;
+    }
+    onDocumentClick(event) {
+        // Close dropdown if click is outside
+        if (this.isOpen && this.dropdownElement && !this.dropdownElement.contains(event.target)) {
+            const triggerElement = this.trigger?.nativeElement;
+            if (triggerElement && !triggerElement.contains(event.target)) {
+                this.closeDropdown();
+            }
+        }
+    }
+    toggleDropdown(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    openDropdown() {
+        if (!this.trigger)
+            return;
+        // Create backdrop
+        this.backdropElement = this.renderer.createElement('div');
+        this.renderer.addClass(this.backdropElement, 'select-custom-backdrop');
+        this.renderer.listen(this.backdropElement, 'click', () => this.closeDropdown());
+        this.renderer.appendChild(this.document.body, this.backdropElement);
+        // Create dropdown
+        this.dropdownElement = this.renderer.createElement('div');
+        this.renderer.addClass(this.dropdownElement, 'select-custom-dropdown');
+        this.renderer.addClass(this.dropdownElement, 'select-overlay-pane');
+        // Calculate position
+        const position = this.calculatePosition();
+        // Apply positioning styles
+        this.renderer.setStyle(this.dropdownElement, 'position', 'fixed');
+        this.renderer.setStyle(this.dropdownElement, 'left', position.left);
+        this.renderer.setStyle(this.dropdownElement, 'width', position.width);
+        this.renderer.setStyle(this.dropdownElement, 'max-height', position.maxHeight);
+        this.renderer.setStyle(this.dropdownElement, 'z-index', '100000', RendererStyleFlags2.Important);
+        if (position.top) {
+            this.renderer.setStyle(this.dropdownElement, 'top', position.top);
+        }
+        else if (position.bottom) {
+            this.renderer.setStyle(this.dropdownElement, 'bottom', position.bottom);
+        }
+        // Create dropdown content wrapper
+        const dropdownContent = this.renderer.createElement('div');
+        this.renderer.addClass(dropdownContent, 'select-dropdown');
+        // Add options
+        const allOptions = this.getAllOptions();
+        allOptions.forEach(option => {
+            const optionElement = this.createOptionElement(option);
+            this.renderer.appendChild(dropdownContent, optionElement);
+        });
+        this.renderer.appendChild(this.dropdownElement, dropdownContent);
+        this.renderer.appendChild(this.document.body, this.dropdownElement);
+        this.isOpen = true;
+        // Add scroll and resize listeners to reposition dropdown
+        this.addRepositionListeners();
+        // Trigger animation
+        setTimeout(() => {
+            if (this.dropdownElement) {
+                this.renderer.addClass(this.dropdownElement, 'select-dropdown-open');
+            }
+        }, 10);
+    }
+    calculatePosition() {
+        const triggerElement = this.trigger.nativeElement;
+        const rect = triggerElement.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const dropdownMaxHeight = 300;
+        const offsetY = 4;
+        const shouldOpenAbove = spaceBelow < 200 && spaceAbove > spaceBelow;
+        const position = {
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+            maxHeight: `${dropdownMaxHeight}px`
+        };
+        if (shouldOpenAbove) {
+            position.bottom = `${window.innerHeight - rect.top + offsetY}px`;
+        }
+        else {
+            position.top = `${rect.bottom + offsetY}px`;
+        }
+        return position;
+    }
+    addRepositionListeners() {
+        // Create handlers
+        const scrollHandler = () => this.updateDropdownPosition();
+        const resizeHandler = () => this.updateDropdownPosition();
+        // Add scroll listener to window with capture phase to catch all scroll events
+        window.addEventListener('scroll', scrollHandler, true);
+        this.scrollHandler = () => window.removeEventListener('scroll', scrollHandler, true);
+        // Add resize listener
+        window.addEventListener('resize', resizeHandler);
+        this.resizeHandler = () => window.removeEventListener('resize', resizeHandler);
+    }
+    updateDropdownPosition() {
+        if (!this.dropdownElement || !this.trigger)
+            return;
+        const position = this.calculatePosition();
+        // Update position styles
+        this.renderer.setStyle(this.dropdownElement, 'left', position.left);
+        this.renderer.setStyle(this.dropdownElement, 'width', position.width);
+        // Remove old top/bottom styles
+        this.renderer.removeStyle(this.dropdownElement, 'top');
+        this.renderer.removeStyle(this.dropdownElement, 'bottom');
+        // Apply new top/bottom position
+        if (position.top) {
+            this.renderer.setStyle(this.dropdownElement, 'top', position.top);
+        }
+        else if (position.bottom) {
+            this.renderer.setStyle(this.dropdownElement, 'bottom', position.bottom);
+        }
+    }
+    createOptionElement(option) {
+        const optionElement = this.renderer.createElement('div');
+        this.renderer.addClass(optionElement, 'select-option');
+        const optionValue = this.getOptionValue(option);
+        const optionLabel = this.getOptionLabel(option);
+        const optionDisabled = this.isOptionDisabled(option);
+        if (this.isEmptyValue(optionValue)) {
+            this.renderer.addClass(optionElement, 'select-option-placeholder');
+        }
+        if (this.isSelected(optionValue)) {
+            this.renderer.addClass(optionElement, 'selected');
+        }
+        if (optionDisabled) {
+            this.renderer.addClass(optionElement, 'disabled');
+        }
+        // Option text
+        const textSpan = this.renderer.createElement('span');
+        this.renderer.addClass(textSpan, 'option-text');
+        const text = this.renderer.createText(optionLabel);
+        this.renderer.appendChild(textSpan, text);
+        this.renderer.appendChild(optionElement, textSpan);
+        // Check icon for selected option
+        if (this.isSelected(optionValue)) {
+            const svg = this.createCheckIcon();
+            this.renderer.appendChild(optionElement, svg);
+        }
+        // Click handler
+        if (!optionDisabled) {
+            this.renderer.listen(optionElement, 'click', (event) => {
+                event.stopPropagation();
+                this.selectOption(option);
+            });
+        }
+        return optionElement;
+    }
+    createCheckIcon() {
+        const svg = this.renderer.createElement('svg', 'svg');
+        this.renderer.addClass(svg, 'check-icon');
+        this.renderer.setAttribute(svg, 'width', '14');
+        this.renderer.setAttribute(svg, 'height', '10');
+        this.renderer.setAttribute(svg, 'viewBox', '0 0 10 8');
+        this.renderer.setAttribute(svg, 'fill', 'none');
+        this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');
+        const path = this.renderer.createElement('path', 'svg');
+        this.renderer.setAttribute(path, 'd', 'M9 1L3.5 6.5L1 4');
+        this.renderer.setAttribute(path, 'stroke', '#F59100');
+        this.renderer.setAttribute(path, 'stroke-width', '1.6666');
+        this.renderer.setAttribute(path, 'stroke-linecap', 'round');
+        this.renderer.setAttribute(path, 'stroke-linejoin', 'round');
+        this.renderer.appendChild(svg, path);
+        return svg;
+    }
+    closeDropdown() {
+        this.destroyDropdown();
+        this.isOpen = false;
+    }
+    destroyDropdown() {
+        // Remove listeners
+        if (this.scrollHandler) {
+            this.scrollHandler();
+            this.scrollHandler = null;
+        }
+        if (this.resizeHandler) {
+            this.resizeHandler();
+            this.resizeHandler = null;
+        }
+        if (this.dropdownElement) {
+            this.renderer.removeChild(this.document.body, this.dropdownElement);
+            this.dropdownElement = null;
+        }
+        if (this.backdropElement) {
+            this.renderer.removeChild(this.document.body, this.backdropElement);
+            this.backdropElement = null;
+        }
+    }
+    selectOption(option) {
+        if (this.isOptionDisabled(option))
+            return;
+        this.value = this.getOptionValue(option);
+        this.onChange(this.value);
+        this.onTouched();
+        this.closeDropdown();
+    }
+    isSelected(value) {
+        return this.value === value;
+    }
+    isEmptyValue(value) {
+        return value === '' || value === null || value === undefined;
+    }
+    getSelectedLabel() {
+        const allOptions = this.getAllOptions();
+        const selectedOption = allOptions.find(opt => this.getOptionValue(opt) === this.value);
+        return selectedOption ? this.getOptionLabel(selectedOption) : '';
+    }
+    writeValue(value) {
+        this.value = value || '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectComponent, isStandalone: true, selector: "app-select", inputs: { label: "label", id: "id", placeholder: "placeholder", options: "options", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled", unstyled: "unstyled", displayKey: "displayKey", valueKey: "valueKey", customClass: "customClass" }, host: { listeners: { "keydown.escape": "onEsc()", "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true
+            }
+        ], queries: [{ propertyName: "prefixDirective", first: true, predicate: SelectPrefixDirective, descendants: true }, { propertyName: "suffixDirective", first: true, predicate: SelectSuffixDirective, descendants: true }, { propertyName: "contentOptions", predicate: OptionComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    <div class="select-wrapper" [class.select-wrapper--unstyled]="unstyled" [ngClass]="customClass">
+      <label *ngIf="label && !unstyled" [for]="id">{{ label }}</label>
+      <div class="select-container" [class.select-container--unstyled]="unstyled">
+        <div
+          #trigger
+          class="select-header"
+          [attr.tabindex]="disabled ? -1 : 0"
+          [class.error]="hasError && !unstyled"
+          [class.disabled]="disabled"
+          [class.open]="isOpen"
+          [class.select-header--unstyled]="unstyled"
+          [class.select-header--has-prefix]="hasPrefix"
+           (blur)="handleBlur()"
+          (click)="!disabled && toggleDropdown($event)">
+          <span class="select-prefix" *ngIf="hasPrefix">
+            <ng-content select="[prefix]"></ng-content>
+          </span>
+          <span class="select-placeholder" *ngIf="!getSelectedLabel()">
+            {{ placeholder }}
+          </span>
+          <span class="select-selected" *ngIf="getSelectedLabel()">
+            {{ getSelectedLabel() }}
+          </span>
+          <span class="select-suffix" *ngIf="hasSuffix">
+            <ng-content select="[suffix]"></ng-content>
+          </span>
+          <svg class="select-arrow" [class.open]="isOpen" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+      <div *ngIf="hasError && errorMessage && !unstyled" class="field-error">
+        {{ errorMessage }}
+      </div>
+
+      <!-- Hidden container for projected options -->
+      <div style="display: none;">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-select',
+                    standalone: true,
+                    imports: [CommonModule, ReactiveFormsModule, FormsModule, SelectPrefixDirective, SelectSuffixDirective],
+                    template: `
+    <div class="select-wrapper" [class.select-wrapper--unstyled]="unstyled" [ngClass]="customClass">
+      <label *ngIf="label && !unstyled" [for]="id">{{ label }}</label>
+      <div class="select-container" [class.select-container--unstyled]="unstyled">
+        <div
+          #trigger
+          class="select-header"
+          [attr.tabindex]="disabled ? -1 : 0"
+          [class.error]="hasError && !unstyled"
+          [class.disabled]="disabled"
+          [class.open]="isOpen"
+          [class.select-header--unstyled]="unstyled"
+          [class.select-header--has-prefix]="hasPrefix"
+           (blur)="handleBlur()"
+          (click)="!disabled && toggleDropdown($event)">
+          <span class="select-prefix" *ngIf="hasPrefix">
+            <ng-content select="[prefix]"></ng-content>
+          </span>
+          <span class="select-placeholder" *ngIf="!getSelectedLabel()">
+            {{ placeholder }}
+          </span>
+          <span class="select-selected" *ngIf="getSelectedLabel()">
+            {{ getSelectedLabel() }}
+          </span>
+          <span class="select-suffix" *ngIf="hasSuffix">
+            <ng-content select="[suffix]"></ng-content>
+          </span>
+          <svg class="select-arrow" [class.open]="isOpen" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+      <div *ngIf="hasError && errorMessage && !unstyled" class="field-error">
+        {{ errorMessage }}
+      </div>
+
+      <!-- Hidden container for projected options -->
+      <div style="display: none;">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], unstyled: [{
+                type: Input
+            }], displayKey: [{
+                type: Input
+            }], valueKey: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger', { read: ElementRef }]
+            }], contentOptions: [{
+                type: ContentChildren,
+                args: [OptionComponent]
+            }], prefixDirective: [{
+                type: ContentChild,
+                args: [SelectPrefixDirective]
+            }], suffixDirective: [{
+                type: ContentChild,
+                args: [SelectSuffixDirective]
+            }], onEsc: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class MultiselectComponent {
+    renderer;
+    document;
+    label = '';
+    id = '';
+    placeholder = '';
+    options = [];
+    hasError = false;
+    errorMessage = '';
+    disabled = false;
+    displayKey = 'label'; // Property to display as label
+    valueKey = 'value'; // Property to use as value
+    customClass = ''; // Custom CSS class for styling
+    trigger;
+    contentOptions;
+    value = [];
+    isOpen = false;
+    onChange = () => { };
+    onTouched = () => { };
+    _usingContentOptions = false;
+    dropdownElement = null;
+    backdropElement = null;
+    scrollHandler = null;
+    resizeHandler = null;
+    constructor(renderer, document) {
+        this.renderer = renderer;
+        this.document = document;
+    }
+    ngAfterContentInit() {
+        // Determine if using content projection or input options
+        this._usingContentOptions = this.contentOptions && this.contentOptions.length > 0;
+        // Subscribe to changes in content options
+        if (this.contentOptions) {
+            this.contentOptions.changes.subscribe(() => {
+                this._usingContentOptions = this.contentOptions.length > 0;
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroyDropdown();
+    }
+    /**
+     * Get all options (from content or input)
+     */
+    getAllOptions() {
+        if (this._usingContentOptions && this.contentOptions) {
+            return this.contentOptions.toArray();
+        }
+        return this.options || [];
+    }
+    /**
+     * Get display label from option
+     */
+    getOptionLabel(option) {
+        if (option instanceof OptionComponent) {
+            return option.viewValue;
+        }
+        return option?.[this.displayKey] || '';
+    }
+    /**
+     * Get value from option
+     */
+    getOptionValue(option) {
+        if (option instanceof OptionComponent) {
+            return option.value;
+        }
+        return option?.[this.valueKey];
+    }
+    /**
+     * Check if option is disabled
+     */
+    isOptionDisabled(option) {
+        if (option instanceof OptionComponent) {
+            return option.disabled;
+        }
+        return option?.disabled || false;
+    }
+    onDocumentClick(event) {
+        // Close dropdown if click is outside
+        if (this.isOpen && this.dropdownElement && !this.dropdownElement.contains(event.target)) {
+            const triggerElement = this.trigger?.nativeElement;
+            if (triggerElement && !triggerElement.contains(event.target)) {
+                this.closeDropdown();
+            }
+        }
+    }
+    toggleDropdown(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    openDropdown() {
+        if (!this.trigger)
+            return;
+        // Create backdrop
+        this.backdropElement = this.renderer.createElement('div');
+        this.renderer.addClass(this.backdropElement, 'multiselect-custom-backdrop');
+        this.renderer.listen(this.backdropElement, 'click', () => this.closeDropdown());
+        this.renderer.appendChild(this.document.body, this.backdropElement);
+        // Create dropdown
+        this.dropdownElement = this.renderer.createElement('div');
+        this.renderer.addClass(this.dropdownElement, 'multiselect-custom-dropdown');
+        this.renderer.addClass(this.dropdownElement, 'multiselect-overlay-pane');
+        // Calculate position
+        const position = this.calculatePosition();
+        // Apply positioning styles
+        this.renderer.setStyle(this.dropdownElement, 'position', 'fixed');
+        this.renderer.setStyle(this.dropdownElement, 'left', position.left);
+        this.renderer.setStyle(this.dropdownElement, 'width', position.width);
+        this.renderer.setStyle(this.dropdownElement, 'max-height', position.maxHeight);
+        this.renderer.setStyle(this.dropdownElement, 'z-index', '100000', RendererStyleFlags2.Important);
+        if (position.top) {
+            this.renderer.setStyle(this.dropdownElement, 'top', position.top);
+        }
+        else if (position.bottom) {
+            this.renderer.setStyle(this.dropdownElement, 'bottom', position.bottom);
+        }
+        // Create dropdown content wrapper
+        const dropdownContent = this.renderer.createElement('div');
+        this.renderer.addClass(dropdownContent, 'multiselect-dropdown');
+        // Add options
+        const allOptions = this.getAllOptions();
+        allOptions.forEach(option => {
+            const optionElement = this.createOptionElement(option);
+            this.renderer.appendChild(dropdownContent, optionElement);
+        });
+        this.renderer.appendChild(this.dropdownElement, dropdownContent);
+        this.renderer.appendChild(this.document.body, this.dropdownElement);
+        this.isOpen = true;
+        // Add scroll and resize listeners to reposition dropdown
+        this.addRepositionListeners();
+        // Trigger animation
+        setTimeout(() => {
+            if (this.dropdownElement) {
+                this.renderer.addClass(this.dropdownElement, 'multiselect-dropdown-open');
+            }
+        }, 10);
+    }
+    calculatePosition() {
+        const triggerElement = this.trigger.nativeElement;
+        const rect = triggerElement.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const dropdownMaxHeight = 300;
+        const offsetY = 4;
+        const shouldOpenAbove = spaceBelow < 200 && spaceAbove > spaceBelow;
+        const position = {
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+            maxHeight: `${dropdownMaxHeight}px`
+        };
+        if (shouldOpenAbove) {
+            position.bottom = `${window.innerHeight - rect.top + offsetY}px`;
+        }
+        else {
+            position.top = `${rect.bottom + offsetY}px`;
+        }
+        return position;
+    }
+    addRepositionListeners() {
+        // Create handlers
+        const scrollHandler = () => this.updateDropdownPosition();
+        const resizeHandler = () => this.updateDropdownPosition();
+        // Add scroll listener to window with capture phase to catch all scroll events
+        window.addEventListener('scroll', scrollHandler, true);
+        this.scrollHandler = () => window.removeEventListener('scroll', scrollHandler, true);
+        // Add resize listener
+        window.addEventListener('resize', resizeHandler);
+        this.resizeHandler = () => window.removeEventListener('resize', resizeHandler);
+    }
+    updateDropdownPosition() {
+        if (!this.dropdownElement || !this.trigger)
+            return;
+        const position = this.calculatePosition();
+        // Update position styles
+        this.renderer.setStyle(this.dropdownElement, 'left', position.left);
+        this.renderer.setStyle(this.dropdownElement, 'width', position.width);
+        // Remove old top/bottom styles
+        this.renderer.removeStyle(this.dropdownElement, 'top');
+        this.renderer.removeStyle(this.dropdownElement, 'bottom');
+        // Apply new top/bottom position
+        if (position.top) {
+            this.renderer.setStyle(this.dropdownElement, 'top', position.top);
+        }
+        else if (position.bottom) {
+            this.renderer.setStyle(this.dropdownElement, 'bottom', position.bottom);
+        }
+    }
+    createOptionElement(option) {
+        const labelElement = this.renderer.createElement('label');
+        this.renderer.addClass(labelElement, 'multiselect-option');
+        const optionValue = this.getOptionValue(option);
+        const optionLabel = this.getOptionLabel(option);
+        const optionDisabled = this.isOptionDisabled(option);
+        if (this.isSelected(optionValue)) {
+            this.renderer.addClass(labelElement, 'selected');
+        }
+        if (optionDisabled) {
+            this.renderer.addClass(labelElement, 'disabled');
+        }
+        // Stop propagation on label click
+        this.renderer.listen(labelElement, 'click', (event) => {
+            event.stopPropagation();
+        });
+        // Checkbox container
+        const checkboxDiv = this.renderer.createElement('div');
+        this.renderer.addClass(checkboxDiv, 'option-checkbox');
+        // Hidden native checkbox
+        const checkbox = this.renderer.createElement('input');
+        this.renderer.setAttribute(checkbox, 'type', 'checkbox');
+        this.renderer.setProperty(checkbox, 'checked', this.isSelected(optionValue));
+        if (optionDisabled) {
+            this.renderer.setProperty(checkbox, 'disabled', true);
+        }
+        // Custom checkbox span
+        const customCheckbox = this.renderer.createElement('span');
+        this.renderer.addClass(customCheckbox, 'checkbox-custom');
+        if (this.isSelected(optionValue)) {
+            this.renderer.addClass(customCheckbox, 'checked');
+        }
+        // Check icon
+        if (this.isSelected(optionValue)) {
+            const svg = this.createCheckIcon();
+            this.renderer.appendChild(customCheckbox, svg);
+        }
+        // Listen to change event
+        this.renderer.listen(checkbox, 'change', (event) => {
+            event.stopPropagation();
+            // Toggle the value
+            this.toggleOption(option);
+            // Update visual state
+            const isNowSelected = this.isSelected(optionValue);
+            this.renderer.setProperty(checkbox, 'checked', isNowSelected);
+            if (isNowSelected) {
+                this.renderer.addClass(labelElement, 'selected');
+                this.renderer.addClass(customCheckbox, 'checked');
+                // Add check icon if not present
+                if (!customCheckbox.querySelector('.check-icon')) {
+                    const svg = this.createCheckIcon();
+                    this.renderer.appendChild(customCheckbox, svg);
+                }
+            }
+            else {
+                this.renderer.removeClass(labelElement, 'selected');
+                this.renderer.removeClass(customCheckbox, 'checked');
+                // Remove check icon
+                const existingIcon = customCheckbox.querySelector('.check-icon');
+                if (existingIcon) {
+                    this.renderer.removeChild(customCheckbox, existingIcon);
+                }
+            }
+        });
+        this.renderer.appendChild(checkboxDiv, checkbox);
+        this.renderer.appendChild(checkboxDiv, customCheckbox);
+        this.renderer.appendChild(labelElement, checkboxDiv);
+        // Option text
+        const textSpan = this.renderer.createElement('span');
+        this.renderer.addClass(textSpan, 'option-text');
+        const text = this.renderer.createText(optionLabel);
+        this.renderer.appendChild(textSpan, text);
+        this.renderer.appendChild(labelElement, textSpan);
+        return labelElement;
+    }
+    createCheckIcon() {
+        const svg = this.renderer.createElement('svg', 'svg');
+        this.renderer.addClass(svg, 'check-icon');
+        this.renderer.setAttribute(svg, 'width', '14');
+        this.renderer.setAttribute(svg, 'height', '10');
+        this.renderer.setAttribute(svg, 'viewBox', '0 0 10 8');
+        this.renderer.setAttribute(svg, 'fill', 'none');
+        this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');
+        const path = this.renderer.createElement('path', 'svg');
+        this.renderer.setAttribute(path, 'd', 'M9 1L3.5 6.5L1 4');
+        this.renderer.setAttribute(path, 'stroke', '#F59100');
+        this.renderer.setAttribute(path, 'stroke-width', '1.6666');
+        this.renderer.setAttribute(path, 'stroke-linecap', 'round');
+        this.renderer.setAttribute(path, 'stroke-linejoin', 'round');
+        this.renderer.appendChild(svg, path);
+        return svg;
+    }
+    closeDropdown() {
+        this.destroyDropdown();
+        this.isOpen = false;
+        this.onTouched();
+    }
+    destroyDropdown() {
+        // Remove listeners
+        if (this.scrollHandler) {
+            this.scrollHandler();
+            this.scrollHandler = null;
+        }
+        if (this.resizeHandler) {
+            this.resizeHandler();
+            this.resizeHandler = null;
+        }
+        if (this.dropdownElement) {
+            this.renderer.removeChild(this.document.body, this.dropdownElement);
+            this.dropdownElement = null;
+        }
+        if (this.backdropElement) {
+            this.renderer.removeChild(this.document.body, this.backdropElement);
+            this.backdropElement = null;
+        }
+    }
+    toggleOption(option) {
+        if (this.isOptionDisabled(option))
+            return;
+        const optionValue = this.getOptionValue(option);
+        const index = this.value.indexOf(optionValue);
+        if (index > -1) {
+            this.value = this.value.filter(v => v !== optionValue);
+        }
+        else {
+            this.value = [...this.value, optionValue];
+        }
+        this.onChange(this.value);
+    }
+    isSelected(value) {
+        return this.value.includes(value);
+    }
+    getSelectedCount() {
+        return this.value.length;
+    }
+    getSelectedLabels() {
+        const allOptions = this.getAllOptions();
+        const selectedOptions = allOptions.filter(opt => this.isSelected(this.getOptionValue(opt)));
+        return selectedOptions.map(opt => this.getOptionLabel(opt)).join(', ');
+    }
+    writeValue(value) {
+        this.value = Array.isArray(value) ? value : [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiselectComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiselectComponent, isStandalone: true, selector: "app-multiselect", inputs: { label: "label", id: "id", placeholder: "placeholder", options: "options", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled", displayKey: "displayKey", valueKey: "valueKey", customClass: "customClass" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MultiselectComponent),
+                multi: true
+            }
+        ], queries: [{ propertyName: "contentOptions", predicate: OptionComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    <div class="multiselect-wrapper" [ngClass]="customClass">
+      <label *ngIf="label" [for]="id">{{ label }}</label>
+      <div class="multiselect-container">
+        <div
+          #trigger
+          class="multiselect-header"
+          (click)="toggleDropdown($event)"
+          [class.disabled]="disabled"
+          [class.open]="isOpen"
+          [class.error]="hasError">
+          <span class="multiselect-placeholder" *ngIf="getSelectedCount() === 0">
+            {{ placeholder || 'Selecciona uno o más...' }}
+          </span>
+          <span class="multiselect-selected" *ngIf="getSelectedCount() > 0">
+            {{ getSelectedLabels() }}
+          </span>
+          <svg class="multiselect-arrow" [class.open]="isOpen" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+      <div *ngIf="hasError && errorMessage" class="field-error">
+        {{ errorMessage }}
+      </div>
+
+      <!-- Hidden container for projected options -->
+      <div style="display: none;">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [".multiselect-wrapper{width:100%;margin-bottom:6px;padding:0 4px}.multiselect-wrapper label{display:block;margin-bottom:.5rem;font-family:Quicksand,sans-serif;font-weight:500;font-size:14px;color:#585d61}.multiselect-container{position:relative;width:100%}.multiselect-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border:1px solid #EAECF5;box-shadow:0 1px 2px #a1afec66;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s;min-height:44px;height:44px}.multiselect-header:hover:not(.disabled){border-color:#fbd399}.multiselect-header:focus-within{border-color:#fbd399;box-shadow:0 0 0 4px #ffe8c8,0 1px 2px #0a0d120d}.multiselect-header.disabled{background:#f5f5f5;cursor:not-allowed;opacity:.6}.multiselect-header.error{border-color:#dc3545!important}.multiselect-header.error.open{box-shadow:0 0 0 3px #dc35451a!important}.multiselect-header .multiselect-placeholder{font-family:Quicksand,sans-serif;font-size:14px;color:#969a9c}.multiselect-header .multiselect-selected{font-family:Quicksand,sans-serif;font-size:14px;color:#1a1d20;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multiselect-header .multiselect-arrow{color:#969a9c;transition:transform .3s ease;margin-left:.5rem;flex-shrink:0;display:flex;align-items:center}.multiselect-header .multiselect-arrow.open{transform:rotate(180deg)}.multiselect-dropdown{margin-top:8px;background:#fff;border:1px solid #EAECF5;border-radius:8px;box-shadow:0 10px 16px -4px #edeffb;max-height:290px!important;width:100%;overflow-x:hidden;overflow-y:auto;animation:dropdownSlide .25s cubic-bezier(.4,0,.2,1)}.multiselect-dropdown::-webkit-scrollbar{width:8px}.multiselect-dropdown::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0 12px 12px 0}.multiselect-dropdown::-webkit-scrollbar-thumb{background:#d5d7d8;border-radius:4px}.multiselect-dropdown::-webkit-scrollbar-thumb:hover{background:#969a9c}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.multiselect-option{display:flex!important;align-items:center;padding:.6rem 1.25rem;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);border-bottom:1px solid #F1F2F4;gap:1rem;margin:0!important;position:relative}.multiselect-option:first-child{border-radius:12px 12px 0 0}.multiselect-option:last-child{border-bottom:none;border-radius:0 0 12px 12px}.multiselect-option:hover:not(.disabled){background:linear-gradient(90deg,#fff9f0,#fffef9)}.multiselect-option:hover:not(.disabled):before{opacity:.5}.multiselect-option.disabled{opacity:.5;cursor:not-allowed;background:#f8f9fc}.multiselect-option.disabled:hover{transform:none;background:#f8f9fc}.multiselect-option .option-checkbox{position:relative;display:flex;align-items:center;flex-shrink:0}.multiselect-option .option-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:22px;height:22px;margin:0}.multiselect-option .option-checkbox .checkbox-custom{width:22px;height:22px;border:2.5px solid #D5D7D8;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.4,0,.2,1);background:#fff;position:relative}.multiselect-option .option-checkbox .checkbox-custom:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:4px;background:#f59100;opacity:0;transform:scale(.5);transition:all .25s cubic-bezier(.4,0,.2,1)}.multiselect-option .option-checkbox .checkbox-custom.checked{background:#fff;border-color:#f59100;border-width:2.5px;transform:scale(1.05)}.multiselect-option .option-checkbox .checkbox-custom.checked:after{opacity:0}.multiselect-option .option-checkbox .checkbox-custom .check-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;animation:checkPop .3s cubic-bezier(.68,-.55,.265,1.55)}.multiselect-option .option-checkbox input[type=checkbox]:hover~.checkbox-custom:not(.checked){border-color:#f26d00;transform:scale(1.05)}.multiselect-option .option-text{flex:1;font-family:Quicksand,sans-serif;font-weight:500;font-size:14px;color:#1a1d20;line-height:1.5;transition:color .2s ease,font-weight .2s ease}@keyframes checkPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.field-error{color:#f04438;font-size:.875rem;margin-top:.25rem;font-family:Quicksand,sans-serif}::ng-deep .multiselect-custom-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:99999;pointer-events:auto}::ng-deep .multiselect-custom-dropdown{position:fixed;background:#fff;border-radius:8px;overflow:hidden;z-index:1000;opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}::ng-deep .multiselect-custom-dropdown.multiselect-dropdown-open{opacity:1;transform:translateY(0) scale(1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-multiselect', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], template: `
+    <div class="multiselect-wrapper" [ngClass]="customClass">
+      <label *ngIf="label" [for]="id">{{ label }}</label>
+      <div class="multiselect-container">
+        <div
+          #trigger
+          class="multiselect-header"
+          (click)="toggleDropdown($event)"
+          [class.disabled]="disabled"
+          [class.open]="isOpen"
+          [class.error]="hasError">
+          <span class="multiselect-placeholder" *ngIf="getSelectedCount() === 0">
+            {{ placeholder || 'Selecciona uno o más...' }}
+          </span>
+          <span class="multiselect-selected" *ngIf="getSelectedCount() > 0">
+            {{ getSelectedLabels() }}
+          </span>
+          <svg class="multiselect-arrow" [class.open]="isOpen" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+      <div *ngIf="hasError && errorMessage" class="field-error">
+        {{ errorMessage }}
+      </div>
+
+      <!-- Hidden container for projected options -->
+      <div style="display: none;">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiselectComponent),
+                            multi: true
+                        }
+                    ], styles: [".multiselect-wrapper{width:100%;margin-bottom:6px;padding:0 4px}.multiselect-wrapper label{display:block;margin-bottom:.5rem;font-family:Quicksand,sans-serif;font-weight:500;font-size:14px;color:#585d61}.multiselect-container{position:relative;width:100%}.multiselect-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border:1px solid #EAECF5;box-shadow:0 1px 2px #a1afec66;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s;min-height:44px;height:44px}.multiselect-header:hover:not(.disabled){border-color:#fbd399}.multiselect-header:focus-within{border-color:#fbd399;box-shadow:0 0 0 4px #ffe8c8,0 1px 2px #0a0d120d}.multiselect-header.disabled{background:#f5f5f5;cursor:not-allowed;opacity:.6}.multiselect-header.error{border-color:#dc3545!important}.multiselect-header.error.open{box-shadow:0 0 0 3px #dc35451a!important}.multiselect-header .multiselect-placeholder{font-family:Quicksand,sans-serif;font-size:14px;color:#969a9c}.multiselect-header .multiselect-selected{font-family:Quicksand,sans-serif;font-size:14px;color:#1a1d20;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multiselect-header .multiselect-arrow{color:#969a9c;transition:transform .3s ease;margin-left:.5rem;flex-shrink:0;display:flex;align-items:center}.multiselect-header .multiselect-arrow.open{transform:rotate(180deg)}.multiselect-dropdown{margin-top:8px;background:#fff;border:1px solid #EAECF5;border-radius:8px;box-shadow:0 10px 16px -4px #edeffb;max-height:290px!important;width:100%;overflow-x:hidden;overflow-y:auto;animation:dropdownSlide .25s cubic-bezier(.4,0,.2,1)}.multiselect-dropdown::-webkit-scrollbar{width:8px}.multiselect-dropdown::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0 12px 12px 0}.multiselect-dropdown::-webkit-scrollbar-thumb{background:#d5d7d8;border-radius:4px}.multiselect-dropdown::-webkit-scrollbar-thumb:hover{background:#969a9c}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.multiselect-option{display:flex!important;align-items:center;padding:.6rem 1.25rem;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);border-bottom:1px solid #F1F2F4;gap:1rem;margin:0!important;position:relative}.multiselect-option:first-child{border-radius:12px 12px 0 0}.multiselect-option:last-child{border-bottom:none;border-radius:0 0 12px 12px}.multiselect-option:hover:not(.disabled){background:linear-gradient(90deg,#fff9f0,#fffef9)}.multiselect-option:hover:not(.disabled):before{opacity:.5}.multiselect-option.disabled{opacity:.5;cursor:not-allowed;background:#f8f9fc}.multiselect-option.disabled:hover{transform:none;background:#f8f9fc}.multiselect-option .option-checkbox{position:relative;display:flex;align-items:center;flex-shrink:0}.multiselect-option .option-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:22px;height:22px;margin:0}.multiselect-option .option-checkbox .checkbox-custom{width:22px;height:22px;border:2.5px solid #D5D7D8;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.4,0,.2,1);background:#fff;position:relative}.multiselect-option .option-checkbox .checkbox-custom:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:4px;background:#f59100;opacity:0;transform:scale(.5);transition:all .25s cubic-bezier(.4,0,.2,1)}.multiselect-option .option-checkbox .checkbox-custom.checked{background:#fff;border-color:#f59100;border-width:2.5px;transform:scale(1.05)}.multiselect-option .option-checkbox .checkbox-custom.checked:after{opacity:0}.multiselect-option .option-checkbox .checkbox-custom .check-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;animation:checkPop .3s cubic-bezier(.68,-.55,.265,1.55)}.multiselect-option .option-checkbox input[type=checkbox]:hover~.checkbox-custom:not(.checked){border-color:#f26d00;transform:scale(1.05)}.multiselect-option .option-text{flex:1;font-family:Quicksand,sans-serif;font-weight:500;font-size:14px;color:#1a1d20;line-height:1.5;transition:color .2s ease,font-weight .2s ease}@keyframes checkPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.field-error{color:#f04438;font-size:.875rem;margin-top:.25rem;font-family:Quicksand,sans-serif}::ng-deep .multiselect-custom-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:99999;pointer-events:auto}::ng-deep .multiselect-custom-dropdown{position:fixed;background:#fff;border-radius:8px;overflow:hidden;z-index:1000;opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}::ng-deep .multiselect-custom-dropdown.multiselect-dropdown-open{opacity:1;transform:translateY(0) scale(1)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], displayKey: [{
+                type: Input
+            }], valueKey: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger', { read: ElementRef }]
+            }], contentOptions: [{
+                type: ContentChildren,
+                args: [OptionComponent]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class PhoneInputComponent {
+    label = 'Teléfono';
+    hasError = false;
+    errorMessage = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PhoneInputComponent, isStandalone: true, selector: "app-phone-input", inputs: { label: "label", hasError: "hasError", errorMessage: "errorMessage" }, ngImport: i0, template: `
+    <div class="svu-phone-input" [class.svu-phone-input--error]="hasError">
+      <label *ngIf="label" class="svu-phone-input__label">
+        {{ label }}
+      </label>
+
+      <div class="svu-phone-input__field">
+        <div class="svu-phone-input__country">
+          <ng-content select="[countrySelect]"></ng-content>
+        </div>
+
+        <div class="svu-phone-input__number">
+          <ng-content select="[phoneInput]"></ng-content>
+        </div>
+      </div>
+
+      <span *ngIf="hasError && errorMessage" class="svu-phone-input__error">
+        {{ errorMessage }}
+      </span>
+    </div>
+  `, isInline: true, styles: [".svu-phone-input{display:flex;flex-direction:column;width:100%;margin-bottom:6px;padding:0 4px}.svu-phone-input__label{display:block;margin-bottom:.5rem;font-family:Quicksand,sans-serif;font-weight:500;font-size:14px;color:#585d61}.svu-phone-input__field{position:relative;display:flex;align-items:stretch;min-height:44px;height:44px;border:1px solid #EAECF5;box-shadow:0 1px 2px #a1afec66;border-radius:8px;transition:all .2s ease;background:#fff}.svu-phone-input__field:hover{border-color:#fbd399}.svu-phone-input__field:focus-within{border-color:#fbd399;box-shadow:0 0 0 4px #ffe8c8,0 1px 2px #0a0d120d}.svu-phone-input__country{flex:0;width:120px;display:flex;align-items:stretch;min-width:64px}.svu-phone-input__number{flex:1;min-width:0;display:flex;align-items:stretch}.svu-phone-input.svu-phone-input--error .svu-phone-input__field{border-color:#dc3545!important}.svu-phone-input.svu-phone-input--error .svu-phone-input__field:focus-within{box-shadow:0 0 0 3px #dc35451a!important}.svu-phone-input__error{color:#f04438;font-size:.875rem;margin-top:.25rem;font-family:Quicksand,sans-serif}@media (max-width: 640px){.svu-phone-input__country{width:100px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PhoneInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-phone-input', standalone: true, imports: [CommonModule, InputComponent, SelectComponent], template: `
+    <div class="svu-phone-input" [class.svu-phone-input--error]="hasError">
+      <label *ngIf="label" class="svu-phone-input__label">
+        {{ label }}
+      </label>
+
+      <div class="svu-phone-input__field">
+        <div class="svu-phone-input__country">
+          <ng-content select="[countrySelect]"></ng-content>
+        </div>
+
+        <div class="svu-phone-input__number">
+          <ng-content select="[phoneInput]"></ng-content>
+        </div>
+      </div>
+
+      <span *ngIf="hasError && errorMessage" class="svu-phone-input__error">
+        {{ errorMessage }}
+      </span>
+    </div>
+  `, styles: [".svu-phone-input{display:flex;flex-direction:column;width:100%;margin-bottom:6px;padding:0 4px}.svu-phone-input__label{display:block;margin-bottom:.5rem;font-family:Quicksand,sans-serif;font-weight:500;font-size:14px;color:#585d61}.svu-phone-input__field{position:relative;display:flex;align-items:stretch;min-height:44px;height:44px;border:1px solid #EAECF5;box-shadow:0 1px 2px #a1afec66;border-radius:8px;transition:all .2s ease;background:#fff}.svu-phone-input__field:hover{border-color:#fbd399}.svu-phone-input__field:focus-within{border-color:#fbd399;box-shadow:0 0 0 4px #ffe8c8,0 1px 2px #0a0d120d}.svu-phone-input__country{flex:0;width:120px;display:flex;align-items:stretch;min-width:64px}.svu-phone-input__number{flex:1;min-width:0;display:flex;align-items:stretch}.svu-phone-input.svu-phone-input--error .svu-phone-input__field{border-color:#dc3545!important}.svu-phone-input.svu-phone-input--error .svu-phone-input__field:focus-within{box-shadow:0 0 0 3px #dc35451a!important}.svu-phone-input__error{color:#f04438;font-size:.875rem;margin-top:.25rem;font-family:Quicksand,sans-serif}@media (max-width: 640px){.svu-phone-input__country{width:100px}}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }] } });
+
+class CopyInputComponent {
+    value = '';
+    icon = 'icon-copy-clipboard';
+    copiedIcon = 'icon-done';
+    ariaLabel = 'Copiar';
+    copied = new EventEmitter();
+    isCopied = false;
+    timeoutRef;
+    async copyToClipboard() {
+        try {
+            await navigator.clipboard.writeText(this.value);
+            this.isCopied = true;
+            this.copied.emit();
+            clearTimeout(this.timeoutRef);
+            this.timeoutRef = setTimeout(() => {
+                this.isCopied = false;
+            }, 1200);
+        }
+        catch (err) {
+            console.error('Error copiando:', err);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CopyInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CopyInputComponent, isStandalone: true, selector: "copy-input", inputs: { value: "value", icon: "icon", copiedIcon: "copiedIcon", ariaLabel: "ariaLabel" }, outputs: { copied: "copied" }, ngImport: i0, template: "<div class=\"copy-input-wrapper\">\n\n  <!-- Tooltip -->\n  <div\n    class=\"copy-tooltip\"\n    *ngIf=\"isCopied\"\n  >\n    Copiado\n  </div>\n\n  <!-- Componente -->\n  <div\n    class=\"copy-input\"\n    (click)=\"copyToClipboard()\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-label]=\"ariaLabel\"\n    (keydown.enter)=\"copyToClipboard()\"\n  >\n    <i\n      class=\"copy-input__icon\"\n      [ngClass]=\"isCopied ? copiedIcon : icon\">\n    </i>\n\n    <span class=\"copy-input__text\">\n      {{ value }}\n    </span>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.copy-input-wrapper{position:relative;display:inline-block;max-width:100%}.copy-tooltip{position:absolute;top:-2rem;left:50%;transform:translate(-50%);padding:.375rem .625rem;background:#2f2f2f;color:#fff;font-size:.75rem;border-radius:.375rem;white-space:nowrap;opacity:0;animation:fadeSlide .25s forwards}.copy-tooltip:after{content:\"\";position:absolute;bottom:-.375rem;left:50%;transform:translate(-50%);border-width:.375rem;border-style:solid;border-color:#2f2f2f transparent transparent transparent}@keyframes fadeSlide{0%{opacity:0;transform:translate(-50%,-5px)}to{opacity:1;transform:translate(-50%)}}.copy-input{display:flex;align-items:center;gap:.5rem;width:100%;box-sizing:border-box;padding:.625rem 1.125rem;border:2px solid #6D7275;border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s ease,border-color .2s ease}.copy-input:hover{background:#f9f9f9;border-color:#d8d8d8}.copy-input:active{background:#f0f0f0}.copy-input:focus{outline-offset:2px}.copy-input__icon{font-size:1.1rem;color:#444;transition:transform .2s ease,color .2s ease}.copy-input__icon.icon-done{transform:scale(1.2);color:#27ae60}.copy-input__text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Quicksand,sans-serif;font-weight:600;font-size:1rem;line-height:1.5rem;color:#2e353a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CopyInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'copy-input', standalone: true, imports: [
+                        CommonModule
+                    ], template: "<div class=\"copy-input-wrapper\">\n\n  <!-- Tooltip -->\n  <div\n    class=\"copy-tooltip\"\n    *ngIf=\"isCopied\"\n  >\n    Copiado\n  </div>\n\n  <!-- Componente -->\n  <div\n    class=\"copy-input\"\n    (click)=\"copyToClipboard()\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-label]=\"ariaLabel\"\n    (keydown.enter)=\"copyToClipboard()\"\n  >\n    <i\n      class=\"copy-input__icon\"\n      [ngClass]=\"isCopied ? copiedIcon : icon\">\n    </i>\n\n    <span class=\"copy-input__text\">\n      {{ value }}\n    </span>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.copy-input-wrapper{position:relative;display:inline-block;max-width:100%}.copy-tooltip{position:absolute;top:-2rem;left:50%;transform:translate(-50%);padding:.375rem .625rem;background:#2f2f2f;color:#fff;font-size:.75rem;border-radius:.375rem;white-space:nowrap;opacity:0;animation:fadeSlide .25s forwards}.copy-tooltip:after{content:\"\";position:absolute;bottom:-.375rem;left:50%;transform:translate(-50%);border-width:.375rem;border-style:solid;border-color:#2f2f2f transparent transparent transparent}@keyframes fadeSlide{0%{opacity:0;transform:translate(-50%,-5px)}to{opacity:1;transform:translate(-50%)}}.copy-input{display:flex;align-items:center;gap:.5rem;width:100%;box-sizing:border-box;padding:.625rem 1.125rem;border:2px solid #6D7275;border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s ease,border-color .2s ease}.copy-input:hover{background:#f9f9f9;border-color:#d8d8d8}.copy-input:active{background:#f0f0f0}.copy-input:focus{outline-offset:2px}.copy-input__icon{font-size:1.1rem;color:#444;transition:transform .2s ease,color .2s ease}.copy-input__icon.icon-done{transform:scale(1.2);color:#27ae60}.copy-input__text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Quicksand,sans-serif;font-weight:600;font-size:1rem;line-height:1.5rem;color:#2e353a}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], copiedIcon: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], copied: [{
+                type: Output
+            }] } });
+
+class SnackbarComponent {
+    snackbarService;
+    snackbars = [];
+    subscriptions = [];
+    constructor(snackbarService) {
+        this.snackbarService = snackbarService;
+    }
+    ngOnInit() {
+        // Subscribe to new snackbars
+        const snackbarSub = this.snackbarService.snackbar$.subscribe((snackbar) => {
+            this.snackbars.push(snackbar);
+        });
+        this.subscriptions.push(snackbarSub);
+        // Subscribe to dismiss events
+        const dismissSub = this.snackbarService.dismiss$.subscribe((id) => {
+            if (id === 'all') {
+                this.snackbars = [];
+            }
+            else {
+                this.snackbars = this.snackbars.filter(s => s.id !== id);
+            }
+        });
+        this.subscriptions.push(dismissSub);
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+    }
+    getSnackbarsByPosition(position) {
+        return this.snackbars.filter(s => s.position === position);
+    }
+    dismiss(id) {
+        this.snackbars = this.snackbars.filter(s => s.id !== id);
+        this.snackbarService.dismiss(id);
+    }
+    handleAction(snackbar) {
+        if (snackbar.actionCallback) {
+            snackbar.actionCallback();
+        }
+        this.dismiss(snackbar.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarComponent, deps: [{ token: SnackbarService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SnackbarComponent, isStandalone: true, selector: "app-snackbar", ngImport: i0, template: `
+    <!-- Top Right -->
+    <div class="snackbar-container snackbar-container--top-right" *ngIf="getSnackbarsByPosition('top-right').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('top-right')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.96 2.37695C13.2212 2.38797 14.4681 2.65061 15.627 3.14844C16.7858 3.64631 17.8337 4.37013 18.71 5.27734L18.7158 5.2832L18.7227 5.28906C19.63 6.1654 20.3537 7.21402 20.8516 8.37305C21.3494 9.53204 21.6111 10.7787 21.6221 12.04C21.633 13.3014 21.3927 14.5523 20.915 15.7197C20.4374 16.8872 19.7318 17.9479 18.8398 18.8398C17.9479 19.7318 16.8872 20.4374 15.7197 20.915C14.5523 21.3927 13.3014 21.633 12.04 21.6221C10.7787 21.6111 9.53204 21.3494 8.37305 20.8516C7.21402 20.3537 6.1654 19.63 5.28906 18.7227L5.2832 18.7158L5.27734 18.71L4.94531 18.374C4.19221 17.5705 3.58408 16.641 3.14844 15.627C2.65061 14.4681 2.38797 13.2212 2.37695 11.96C2.36599 10.6986 2.60632 9.44681 3.08398 8.2793C3.56165 7.11184 4.26724 6.05112 5.15918 5.15918C6.05112 4.26724 7.11184 3.56165 8.2793 3.08398C9.44681 2.60632 10.6986 2.36599 11.96 2.37695ZM13.6523 3.66797C11.7234 3.28574 9.7209 3.58451 7.9873 4.5127C6.25388 5.4409 4.89578 6.94166 4.14453 8.75879C3.39335 10.5759 3.29528 12.5973 3.86719 14.4785C4.43922 16.3599 5.64653 17.9847 7.28223 19.0762C8.91789 20.1676 10.8811 20.6587 12.8379 20.4648C14.7947 20.271 16.623 19.4038 18.0127 18.0127C18.8041 17.2243 19.4316 16.2872 19.8584 15.2549C20.2319 14.3515 20.4462 13.3914 20.4912 12.417L20.5 11.998C20.4981 10.0321 19.8148 8.12717 18.5664 6.6084C17.3178 5.08945 15.5811 4.05022 13.6523 3.66797ZM15 8.49414C15.0659 8.49416 15.1315 8.50686 15.1924 8.53223C15.2531 8.55755 15.3081 8.59493 15.3545 8.6416L15.3574 8.64453C15.4043 8.69099 15.4414 8.74672 15.4668 8.80762C15.4922 8.86855 15.5059 8.93399 15.5059 9C15.5058 9.06595 15.4922 9.1315 15.4668 9.19238C15.4414 9.25316 15.4042 9.3081 15.3574 9.35449V9.35547L13.0566 11.6455L12.7012 12L13.0566 12.3545L15.3574 14.6445C15.4043 14.691 15.4414 14.7467 15.4668 14.8076C15.4922 14.8685 15.5059 14.934 15.5059 15C15.5058 15.0659 15.4922 15.1315 15.4668 15.1924C15.4414 15.2532 15.4042 15.3081 15.3574 15.3545L15.3545 15.3574C15.3081 15.4042 15.2532 15.4414 15.1924 15.4668C15.1315 15.4922 15.0659 15.5058 15 15.5059C14.934 15.5059 14.8685 15.4922 14.8076 15.4668C14.7467 15.4414 14.691 15.4043 14.6445 15.3574L12.3545 13.0566L12 12.7012L11.6455 13.0566L9.35547 15.3574H9.35449C9.3081 15.4042 9.25316 15.4414 9.19238 15.4668C9.1315 15.4922 9.06595 15.5058 9 15.5059C8.93399 15.5059 8.86855 15.4922 8.80762 15.4668C8.74672 15.4414 8.69099 15.4043 8.64453 15.3574L8.6416 15.3545C8.59493 15.3081 8.55755 15.2531 8.53223 15.1924C8.50686 15.1315 8.49416 15.0659 8.49414 15C8.49414 14.9341 8.50688 14.8685 8.53223 14.8076C8.55761 14.7467 8.59475 14.691 8.6416 14.6445H8.64258L10.9424 12.3545L11.2988 12L10.9424 11.6455L8.64258 9.35547C8.54859 9.26105 8.49614 9.13325 8.49609 9C8.49609 8.86631 8.54902 8.73809 8.64355 8.64355C8.73809 8.54902 8.86631 8.49609 9 8.49609C9.10009 8.49613 9.1972 8.52542 9.2793 8.58008L9.35645 8.64355L11.6455 10.9424L12 11.2988L12.3545 10.9424L14.6445 8.64258V8.6416C14.691 8.59475 14.7467 8.55761 14.8076 8.53223C14.8685 8.50688 14.9341 8.49414 15 8.49414Z" stroke="#F04438"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Top Left -->
+    <div class="snackbar-container snackbar-container--top-left" *ngIf="getSnackbarsByPosition('top-left').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('top-left')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Top Center -->
+    <div class="snackbar-container snackbar-container--top-center" *ngIf="getSnackbarsByPosition('top-center').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('top-center')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bottom Right -->
+    <div class="snackbar-container snackbar-container--bottom-right" *ngIf="getSnackbarsByPosition('bottom-right').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('bottom-right')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bottom Left -->
+    <div class="snackbar-container snackbar-container--bottom-left" *ngIf="getSnackbarsByPosition('bottom-left').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('bottom-left')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bottom Center -->
+    <div class="snackbar-container snackbar-container--bottom-center" *ngIf="getSnackbarsByPosition('bottom-center').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('bottom-center')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [".snackbar-container{position:fixed;z-index:999999;display:flex;flex-direction:column;gap:12px;max-width:644px;pointer-events:none}.snackbar-container--top-right{top:24px;right:24px}.snackbar-container--top-left{top:24px;left:24px}.snackbar-container--top-center{top:24px;left:50%;transform:translate(-50%)}.snackbar-container--bottom-right{bottom:24px;right:24px}.snackbar-container--bottom-left{bottom:24px;left:24px}.snackbar-container--bottom-center{bottom:24px;left:50%;transform:translate(-50%)}@media (max-width: 640px){.snackbar-container{left:16px!important;right:16px!important;max-width:none;transform:none!important}.snackbar-container--top-right,.snackbar-container--top-left,.snackbar-container--top-center{top:16px}.snackbar-container--bottom-right,.snackbar-container--bottom-left,.snackbar-container--bottom-center{bottom:16px}}.snackbar{display:flex;align-items:center;gap:12px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;background:#fff;pointer-events:auto;min-width:300px;max-width:644px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 640px){.snackbar{min-width:auto;max-width:none}}.snackbar--success{background:#f0fdf4;border:1px solid #22c55e}.snackbar--success .snackbar__icon{color:#22c55e}.snackbar--error{background:#fef3f2;border:1px solid #F04438}.snackbar--error .snackbar__icon{color:#f04438}.snackbar--warning{background:#fffbeb;border:1px solid #f59e0b}.snackbar--warning .snackbar__icon{color:#f59e0b}.snackbar--info{background:#eff6ff;border:1px solid #3b82f6}.snackbar--info .snackbar__icon{color:#3b82f6}.snackbar__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px}.snackbar__content{flex:1;min-width:0}.snackbar__message{margin:0;line-height:20px;word-wrap:break-word;font-family:Quicksand,sans-serif;font-weight:600;font-size:14px;color:#2e353a}.snackbar__action{flex-shrink:0;padding:6px 12px;border:none;border-radius:4px;background:transparent;color:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.snackbar__action:hover{background:#0000000d}.snackbar__action:active{background:#0000001a}.snackbar__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:transparent;color:#2e353a;cursor:pointer;transition:all .2s}.snackbar__close:hover{background:#0000000d;color:#1f2937}.snackbar__close:active{background:#0000001a}.snackbar__close svg{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-snackbar', standalone: true, imports: [CommonModule], template: `
+    <!-- Top Right -->
+    <div class="snackbar-container snackbar-container--top-right" *ngIf="getSnackbarsByPosition('top-right').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('top-right')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.96 2.37695C13.2212 2.38797 14.4681 2.65061 15.627 3.14844C16.7858 3.64631 17.8337 4.37013 18.71 5.27734L18.7158 5.2832L18.7227 5.28906C19.63 6.1654 20.3537 7.21402 20.8516 8.37305C21.3494 9.53204 21.6111 10.7787 21.6221 12.04C21.633 13.3014 21.3927 14.5523 20.915 15.7197C20.4374 16.8872 19.7318 17.9479 18.8398 18.8398C17.9479 19.7318 16.8872 20.4374 15.7197 20.915C14.5523 21.3927 13.3014 21.633 12.04 21.6221C10.7787 21.6111 9.53204 21.3494 8.37305 20.8516C7.21402 20.3537 6.1654 19.63 5.28906 18.7227L5.2832 18.7158L5.27734 18.71L4.94531 18.374C4.19221 17.5705 3.58408 16.641 3.14844 15.627C2.65061 14.4681 2.38797 13.2212 2.37695 11.96C2.36599 10.6986 2.60632 9.44681 3.08398 8.2793C3.56165 7.11184 4.26724 6.05112 5.15918 5.15918C6.05112 4.26724 7.11184 3.56165 8.2793 3.08398C9.44681 2.60632 10.6986 2.36599 11.96 2.37695ZM13.6523 3.66797C11.7234 3.28574 9.7209 3.58451 7.9873 4.5127C6.25388 5.4409 4.89578 6.94166 4.14453 8.75879C3.39335 10.5759 3.29528 12.5973 3.86719 14.4785C4.43922 16.3599 5.64653 17.9847 7.28223 19.0762C8.91789 20.1676 10.8811 20.6587 12.8379 20.4648C14.7947 20.271 16.623 19.4038 18.0127 18.0127C18.8041 17.2243 19.4316 16.2872 19.8584 15.2549C20.2319 14.3515 20.4462 13.3914 20.4912 12.417L20.5 11.998C20.4981 10.0321 19.8148 8.12717 18.5664 6.6084C17.3178 5.08945 15.5811 4.05022 13.6523 3.66797ZM15 8.49414C15.0659 8.49416 15.1315 8.50686 15.1924 8.53223C15.2531 8.55755 15.3081 8.59493 15.3545 8.6416L15.3574 8.64453C15.4043 8.69099 15.4414 8.74672 15.4668 8.80762C15.4922 8.86855 15.5059 8.93399 15.5059 9C15.5058 9.06595 15.4922 9.1315 15.4668 9.19238C15.4414 9.25316 15.4042 9.3081 15.3574 9.35449V9.35547L13.0566 11.6455L12.7012 12L13.0566 12.3545L15.3574 14.6445C15.4043 14.691 15.4414 14.7467 15.4668 14.8076C15.4922 14.8685 15.5059 14.934 15.5059 15C15.5058 15.0659 15.4922 15.1315 15.4668 15.1924C15.4414 15.2532 15.4042 15.3081 15.3574 15.3545L15.3545 15.3574C15.3081 15.4042 15.2532 15.4414 15.1924 15.4668C15.1315 15.4922 15.0659 15.5058 15 15.5059C14.934 15.5059 14.8685 15.4922 14.8076 15.4668C14.7467 15.4414 14.691 15.4043 14.6445 15.3574L12.3545 13.0566L12 12.7012L11.6455 13.0566L9.35547 15.3574H9.35449C9.3081 15.4042 9.25316 15.4414 9.19238 15.4668C9.1315 15.4922 9.06595 15.5058 9 15.5059C8.93399 15.5059 8.86855 15.4922 8.80762 15.4668C8.74672 15.4414 8.69099 15.4043 8.64453 15.3574L8.6416 15.3545C8.59493 15.3081 8.55755 15.2531 8.53223 15.1924C8.50686 15.1315 8.49416 15.0659 8.49414 15C8.49414 14.9341 8.50688 14.8685 8.53223 14.8076C8.55761 14.7467 8.59475 14.691 8.6416 14.6445H8.64258L10.9424 12.3545L11.2988 12L10.9424 11.6455L8.64258 9.35547C8.54859 9.26105 8.49614 9.13325 8.49609 9C8.49609 8.86631 8.54902 8.73809 8.64355 8.64355C8.73809 8.54902 8.86631 8.49609 9 8.49609C9.10009 8.49613 9.1972 8.52542 9.2793 8.58008L9.35645 8.64355L11.6455 10.9424L12 11.2988L12.3545 10.9424L14.6445 8.64258V8.6416C14.691 8.59475 14.7467 8.55761 14.8076 8.53223C14.8685 8.50688 14.9341 8.49414 15 8.49414Z" stroke="#F04438"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Top Left -->
+    <div class="snackbar-container snackbar-container--top-left" *ngIf="getSnackbarsByPosition('top-left').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('top-left')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Top Center -->
+    <div class="snackbar-container snackbar-container--top-center" *ngIf="getSnackbarsByPosition('top-center').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('top-center')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bottom Right -->
+    <div class="snackbar-container snackbar-container--bottom-right" *ngIf="getSnackbarsByPosition('bottom-right').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('bottom-right')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bottom Left -->
+    <div class="snackbar-container snackbar-container--bottom-left" *ngIf="getSnackbarsByPosition('bottom-left').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('bottom-left')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bottom Center -->
+    <div class="snackbar-container snackbar-container--bottom-center" *ngIf="getSnackbarsByPosition('bottom-center').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('bottom-center')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  `, styles: [".snackbar-container{position:fixed;z-index:999999;display:flex;flex-direction:column;gap:12px;max-width:644px;pointer-events:none}.snackbar-container--top-right{top:24px;right:24px}.snackbar-container--top-left{top:24px;left:24px}.snackbar-container--top-center{top:24px;left:50%;transform:translate(-50%)}.snackbar-container--bottom-right{bottom:24px;right:24px}.snackbar-container--bottom-left{bottom:24px;left:24px}.snackbar-container--bottom-center{bottom:24px;left:50%;transform:translate(-50%)}@media (max-width: 640px){.snackbar-container{left:16px!important;right:16px!important;max-width:none;transform:none!important}.snackbar-container--top-right,.snackbar-container--top-left,.snackbar-container--top-center{top:16px}.snackbar-container--bottom-right,.snackbar-container--bottom-left,.snackbar-container--bottom-center{bottom:16px}}.snackbar{display:flex;align-items:center;gap:12px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;background:#fff;pointer-events:auto;min-width:300px;max-width:644px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 640px){.snackbar{min-width:auto;max-width:none}}.snackbar--success{background:#f0fdf4;border:1px solid #22c55e}.snackbar--success .snackbar__icon{color:#22c55e}.snackbar--error{background:#fef3f2;border:1px solid #F04438}.snackbar--error .snackbar__icon{color:#f04438}.snackbar--warning{background:#fffbeb;border:1px solid #f59e0b}.snackbar--warning .snackbar__icon{color:#f59e0b}.snackbar--info{background:#eff6ff;border:1px solid #3b82f6}.snackbar--info .snackbar__icon{color:#3b82f6}.snackbar__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px}.snackbar__content{flex:1;min-width:0}.snackbar__message{margin:0;line-height:20px;word-wrap:break-word;font-family:Quicksand,sans-serif;font-weight:600;font-size:14px;color:#2e353a}.snackbar__action{flex-shrink:0;padding:6px 12px;border:none;border-radius:4px;background:transparent;color:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.snackbar__action:hover{background:#0000000d}.snackbar__action:active{background:#0000001a}.snackbar__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:transparent;color:#2e353a;cursor:pointer;transition:all .2s}.snackbar__close:hover{background:#0000000d;color:#1f2937}.snackbar__close:active{background:#0000001a}.snackbar__close svg{width:14px;height:14px}\n"] }]
+        }], ctorParameters: () => [{ type: SnackbarService }] });
+
+/*
+ * Public API Surface of @up_si_vale/sivale-componentes-angular
+ */
+// Tokens
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ASSET_BASE_URL, AssetSourceDirective, ButtonComponent, CheckboxComponent, CopyInputComponent, DatePickerComponent, IconSourceDirective, InputComponent, LoaderComponent, MultiselectComponent, NoLeadingSpaceDirective, OnlyLettersDirective, OnlyNumberDirective, OptionComponent, PhoneInputComponent, RadioComponent, RfcDirective, SelectComponent, SelectPrefixDirective, SelectSuffixDirective, SnackbarComponent, SnackbarService, TextareaComponent, TooltipDirective };
+//# sourceMappingURL=up_si_vale-sivale-componentes-angular.mjs.map