@up_si_vale/sivale-componentes-angular 1.0.0 → 1.0.2

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

@@ -0,0 +1,4116 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, Input, Optional, Inject, Directive, HostListener, Self, HostBinding, EventEmitter, Output, Component, forwardRef, ChangeDetectionStrategy, ElementRef, ViewChild, TemplateRef, ContentChild, RendererStyleFlags2, 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';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+/**
+ * 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 SidebarIconComponent {
+    name;
+    size = 24;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarIconComponent, isStandalone: true, selector: "svu-sidebar-icon", inputs: { name: "name", size: "size" }, ngImport: i0, template: `
+    <ng-container [ngSwitch]="name">
+      <svg *ngSwitchCase="'dashboard'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 17h8M11.018 2.764L4.235 8.039c-.453.353-.68.53-.843.75a2 2 0 00-.318.65C3 9.704 3 9.991 3 10.565V17.8c0 1.12 0 1.68.218 2.108a2 2 0 00.874.874C4.52 21 5.08 21 6.2 21h11.6c1.12 0 1.68 0 2.108-.218a2 2 0 00.874-.874C21 19.48 21 18.92 21 17.8v-7.235c0-.574 0-.861-.074-1.126a2 2 0 00-.318-.65c-.163-.22-.39-.397-.843-.75l-6.783-5.275c-.351-.273-.527-.41-.72-.462a1 1 0 00-.508 0c-.193.052-.369.189-.72.462z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'file-users'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2.27V6.4c0 .56 0 .84.109 1.054a1 1 0 00.437.437C14.76 8 15.04 8 15.6 8h4.13M8 15h8M8 11h4M14 2H8.8c-1.68 0-2.52 0-3.162.327a3 3 0 00-1.311 1.311C4 4.28 4 5.12 4 6.8v10.4c0 1.68 0 2.52.327 3.162a3 3 0 001.311 1.311C6.28 22 7.12 22 8.8 22h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 001.311-1.311C20 19.72 20 18.88 20 17.2V8l-6-6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'card'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M22 10H2M22 11V8.2C22 7.08 22 6.52 21.782 6.092a2 2 0 00-.874-.874C20.48 5 19.92 5 18.8 5H5.2C4.08 5 3.52 5 3.092 5.218a2 2 0 00-.874.874C2 6.52 2 7.08 2 8.2V15.8c0 1.12 0 1.68.218 2.108a2 2 0 00.874.874C3.52 19 4.08 19 5.2 19H18.8c1.12 0 1.68 0 2.108-.218a2 2 0 00.874-.874C22 17.48 22 16.92 22 15.8V11z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'logout'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16 17l5-5m0 0l-5-5m5 5H9m0-9H7.8c-1.68 0-2.52 0-3.162.327a3 3 0 00-1.311 1.311C3 5.28 3 6.12 3 7.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 001.311 1.311C5.28 21 6.12 21 7.8 21H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'chevron-down'" [attr.width]="size" [attr.height]="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 7.5l5 5 5-5" stroke="currentColor" stroke-width="1.667" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'settings'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M19.622 10.395l-1.097-2.65L20 6l-2-2-1.735 1.483-2.707-1.113L12.935 2h-1.954l-.632 2.401-2.645 1.115L6 4 4 6l1.453 1.789-1.08 2.657L2 11v2l2.401.655L5.516 16.3 4 18l2 2 1.791-1.46 2.606 1.072L11 22h2l.604-2.387 2.651-1.098C16.697 18.831 18 20 18 20l2-2-1.484-1.75 1.098-2.652 2.386-.62V11l-2.378-.605z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'user'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'home'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M9 22V12h6v10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </ng-container>
+  `, isInline: true, styles: [":host{display:inline-flex;line-height:0;color:currentColor}svg{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'svu-sidebar-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <ng-container [ngSwitch]="name">
+      <svg *ngSwitchCase="'dashboard'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 17h8M11.018 2.764L4.235 8.039c-.453.353-.68.53-.843.75a2 2 0 00-.318.65C3 9.704 3 9.991 3 10.565V17.8c0 1.12 0 1.68.218 2.108a2 2 0 00.874.874C4.52 21 5.08 21 6.2 21h11.6c1.12 0 1.68 0 2.108-.218a2 2 0 00.874-.874C21 19.48 21 18.92 21 17.8v-7.235c0-.574 0-.861-.074-1.126a2 2 0 00-.318-.65c-.163-.22-.39-.397-.843-.75l-6.783-5.275c-.351-.273-.527-.41-.72-.462a1 1 0 00-.508 0c-.193.052-.369.189-.72.462z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'file-users'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2.27V6.4c0 .56 0 .84.109 1.054a1 1 0 00.437.437C14.76 8 15.04 8 15.6 8h4.13M8 15h8M8 11h4M14 2H8.8c-1.68 0-2.52 0-3.162.327a3 3 0 00-1.311 1.311C4 4.28 4 5.12 4 6.8v10.4c0 1.68 0 2.52.327 3.162a3 3 0 001.311 1.311C6.28 22 7.12 22 8.8 22h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 001.311-1.311C20 19.72 20 18.88 20 17.2V8l-6-6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'card'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M22 10H2M22 11V8.2C22 7.08 22 6.52 21.782 6.092a2 2 0 00-.874-.874C20.48 5 19.92 5 18.8 5H5.2C4.08 5 3.52 5 3.092 5.218a2 2 0 00-.874.874C2 6.52 2 7.08 2 8.2V15.8c0 1.12 0 1.68.218 2.108a2 2 0 00.874.874C3.52 19 4.08 19 5.2 19H18.8c1.12 0 1.68 0 2.108-.218a2 2 0 00.874-.874C22 17.48 22 16.92 22 15.8V11z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'logout'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16 17l5-5m0 0l-5-5m5 5H9m0-9H7.8c-1.68 0-2.52 0-3.162.327a3 3 0 00-1.311 1.311C3 5.28 3 6.12 3 7.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 001.311 1.311C5.28 21 6.12 21 7.8 21H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'chevron-down'" [attr.width]="size" [attr.height]="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 7.5l5 5 5-5" stroke="currentColor" stroke-width="1.667" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'settings'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M19.622 10.395l-1.097-2.65L20 6l-2-2-1.735 1.483-2.707-1.113L12.935 2h-1.954l-.632 2.401-2.645 1.115L6 4 4 6l1.453 1.789-1.08 2.657L2 11v2l2.401.655L5.516 16.3 4 18l2 2 1.791-1.46 2.606 1.072L11 22h2l.604-2.387 2.651-1.098C16.697 18.831 18 20 18 20l2-2-1.484-1.75 1.098-2.652 2.386-.62V11l-2.378-.605z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'user'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg *ngSwitchCase="'home'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M9 22V12h6v10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </ng-container>
+  `, styles: [":host{display:inline-flex;line-height:0;color:currentColor}svg{display:block}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class SidebarComponent {
+    hostRef;
+    /** Items del menú (datos-driven). Soporta children para sub-navegación. */
+    items = [];
+    /** Logo: si se pasa la URL se renderiza; alternativamente proyecta contenido con `[sidebarLogo]`. */
+    logoSrc;
+    logoAlt = 'Logo';
+    /** Footer hibrido: si se pasan los inputs se usa el footer por defecto.
+     *  Para footer custom, proyectar con `[sidebarFooter]` (gana sobre los inputs). */
+    userName;
+    userEmail;
+    /** Si no se pasa, se usa la primera letra de userName. */
+    userInitial;
+    /** Mostrar/ocultar el botón de logout en el menú de cuenta. */
+    showLogout = true;
+    logoutLabel = 'Cerrar sesión';
+    /** Click en un item (incluye expandibles y hojas). */
+    itemClick = new EventEmitter();
+    logout = new EventEmitter();
+    logoTpl;
+    footerTpl;
+    expandedKeys = new Set();
+    accountMenuOpen = false;
+    subsetMatch = {
+        paths: 'subset',
+        queryParams: 'ignored',
+        fragment: 'ignored',
+        matrixParams: 'ignored'
+    };
+    exactMatch = {
+        paths: 'exact',
+        queryParams: 'ignored',
+        fragment: 'ignored',
+        matrixParams: 'ignored'
+    };
+    constructor(hostRef) {
+        this.hostRef = hostRef;
+    }
+    get computedInitial() {
+        if (this.userInitial)
+            return this.userInitial;
+        return (this.userName?.trim().charAt(0) || '').toUpperCase();
+    }
+    isExpanded(item) {
+        return this.expandedKeys.has(item.label);
+    }
+    onItemClick(item) {
+        if (item.children?.length) {
+            if (this.expandedKeys.has(item.label)) {
+                this.expandedKeys.delete(item.label);
+            }
+            else {
+                this.expandedKeys.add(item.label);
+            }
+        }
+        this.itemClick.emit(item);
+    }
+    toggleAccountMenu() {
+        this.accountMenuOpen = !this.accountMenuOpen;
+    }
+    onLogoutClick() {
+        this.accountMenuOpen = false;
+        this.logout.emit();
+    }
+    onDocumentClick(event) {
+        if (!this.accountMenuOpen)
+            return;
+        const footer = this.hostRef.nativeElement.querySelector('.svu-sidebar__footer');
+        if (footer && !footer.contains(event.target)) {
+            this.accountMenuOpen = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarComponent, isStandalone: true, selector: "svu-sidebar", inputs: { items: "items", logoSrc: "logoSrc", logoAlt: "logoAlt", userName: "userName", userEmail: "userEmail", userInitial: "userInitial", showLogout: "showLogout", logoutLabel: "logoutLabel" }, outputs: { itemClick: "itemClick", logout: "logout" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "logoTpl", first: true, predicate: ["sidebarLogo"], descendants: true, read: TemplateRef }, { propertyName: "footerTpl", first: true, predicate: ["sidebarFooter"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<aside class=\"svu-sidebar\">\n  <div class=\"svu-sidebar__content\">\n    <div class=\"svu-sidebar__top\">\n      <!-- Logo: slot proyectable o input -->\n      <div class=\"svu-sidebar__logo\">\n        <ng-container *ngIf=\"logoTpl; else defaultLogo\" [ngTemplateOutlet]=\"logoTpl\"></ng-container>\n        <ng-template #defaultLogo>\n          <img *ngIf=\"logoSrc\" [src]=\"logoSrc\" [alt]=\"logoAlt\" class=\"svu-sidebar__logo-img\" />\n        </ng-template>\n      </div>\n\n      <!-- Navigation -->\n      <nav class=\"svu-sidebar__nav\">\n        <ng-container *ngFor=\"let item of items\">\n          <!-- Item con children (expandible) -->\n          <ng-container *ngIf=\"item.children?.length; else leafItem\">\n            <div\n              class=\"svu-sidebar__nav-item\"\n              [class.svu-sidebar__nav-item--active]=\"parentActive.isActive\"\n              (click)=\"onItemClick(item)\"\n              [routerLink]=\"item.route || null\"\n              routerLinkActive\n              #parentActive=\"routerLinkActive\"\n              [routerLinkActiveOptions]=\"subsetMatch\">\n              <div class=\"svu-sidebar__nav-item-content\">\n                <svu-sidebar-icon *ngIf=\"item.icon\" [name]=\"item.icon\" class=\"svu-sidebar__nav-icon\"></svu-sidebar-icon>\n                <span class=\"svu-sidebar__nav-text\">{{ item.label }}</span>\n              </div>\n              <svu-sidebar-icon\n                name=\"chevron-down\"\n                [size]=\"20\"\n                class=\"svu-sidebar__nav-chevron\"\n                [class.svu-sidebar__nav-chevron--open]=\"isExpanded(item)\">\n              </svu-sidebar-icon>\n            </div>\n\n            <div class=\"svu-sidebar__subnav\" *ngIf=\"isExpanded(item)\">\n              <a\n                *ngFor=\"let child of item.children\"\n                class=\"svu-sidebar__subnav-item\"\n                [routerLink]=\"child.route\"\n                routerLinkActive=\"svu-sidebar__subnav-item--active\"\n                [routerLinkActiveOptions]=\"child.exact ? exactMatch : subsetMatch\"\n                (click)=\"onItemClick(child)\">\n                {{ child.label }}\n              </a>\n            </div>\n          </ng-container>\n\n          <!-- Item simple (hoja) -->\n          <ng-template #leafItem>\n            <a\n              class=\"svu-sidebar__nav-item\"\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"svu-sidebar__nav-item--active\"\n              [routerLinkActiveOptions]=\"item.exact ? exactMatch : subsetMatch\"\n              (click)=\"onItemClick(item)\">\n              <div class=\"svu-sidebar__nav-item-content\">\n                <svu-sidebar-icon *ngIf=\"item.icon\" [name]=\"item.icon\" class=\"svu-sidebar__nav-icon\"></svu-sidebar-icon>\n                <span class=\"svu-sidebar__nav-text\">{{ item.label }}</span>\n              </div>\n            </a>\n          </ng-template>\n        </ng-container>\n      </nav>\n    </div>\n\n    <!-- Footer: slot custom o default (user + logout) -->\n    <div class=\"svu-sidebar__footer\">\n      <div class=\"svu-sidebar__divider\"></div>\n\n      <ng-container *ngIf=\"footerTpl; else defaultFooter\" [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n\n      <ng-template #defaultFooter>\n        <div class=\"svu-sidebar__account-wrapper\" *ngIf=\"userName\">\n          <div class=\"svu-sidebar__account\" (click)=\"toggleAccountMenu()\">\n            <div class=\"svu-sidebar__avatar\">\n              <span class=\"svu-sidebar__avatar-text\">{{ computedInitial }}</span>\n            </div>\n            <div class=\"svu-sidebar__user-info\">\n              <span class=\"svu-sidebar__user-name\">{{ userName }}</span>\n              <span class=\"svu-sidebar__user-email\" *ngIf=\"userEmail\">{{ userEmail }}</span>\n            </div>\n          </div>\n\n          <div *ngIf=\"accountMenuOpen && showLogout\" class=\"svu-sidebar__account-menu\">\n            <button type=\"button\" class=\"svu-sidebar__account-menu-item\" (click)=\"onLogoutClick()\">\n              <svu-sidebar-icon name=\"logout\" [size]=\"20\"></svu-sidebar-icon>\n              <span>{{ logoutLabel }}</span>\n            </button>\n          </div>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n\n  <div class=\"svu-sidebar__border\"></div>\n</aside>\n", styles: [".svu-sidebar{display:flex;width:312px;height:100%;background:#fff;flex-shrink:0}.svu-sidebar__content{display:flex;flex-direction:column;justify-content:space-between;flex:1;height:100%;min-width:0}.svu-sidebar__border{width:1px;height:100%;background-color:#e9eaeb;flex-shrink:0}.svu-sidebar__top{display:flex;flex-direction:column;gap:24px;padding-top:32px}.svu-sidebar__logo{padding:0 20px 0 24px}.svu-sidebar__logo-img{height:48px;width:auto}.svu-sidebar__nav{display:flex;flex-direction:column;gap:4px;padding:0 16px}.svu-sidebar__nav-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background-color .2s ease;text-decoration:none;color:inherit}.svu-sidebar__nav-item:hover,.svu-sidebar__nav-item--active{background-color:#fafafa}.svu-sidebar__nav-item--active .svu-sidebar__nav-text,.svu-sidebar__nav-item--active .svu-sidebar__nav-icon{color:#2e353a}.svu-sidebar__nav-item-content{display:flex;align-items:center;gap:12px}.svu-sidebar__nav-icon{flex-shrink:0;color:#585d61}.svu-sidebar__nav-text{font-family:Roboto,sans-serif;font-weight:600;font-size:16px;line-height:24px;color:#585d61}.svu-sidebar__nav-chevron{flex-shrink:0;color:#585d61;transition:transform .2s ease}.svu-sidebar__nav-chevron--open{transform:rotate(180deg)}.svu-sidebar__subnav{display:flex;flex-direction:column;gap:2px;padding-left:48px}.svu-sidebar__subnav-item{display:block;padding:6px 12px;border-radius:6px;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#6d7275;text-decoration:none;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__subnav-item:hover{background-color:#fafafa}.svu-sidebar__subnav-item--active{background-color:#fafafa;color:#2e353a;font-weight:600}.svu-sidebar__footer{display:flex;flex-direction:column;gap:24px;padding:0 16px 32px}.svu-sidebar__divider{height:1px;width:100%;background-color:#e9eaeb}.svu-sidebar__account-wrapper{position:relative}.svu-sidebar__account{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__account:hover{background-color:#fafafa}.svu-sidebar__account-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid #E9EAEB;border-radius:8px;box-shadow:0 4px 16px #0000001a;padding:4px;z-index:10}.svu-sidebar__account-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:none;border-radius:6px;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#d92d20;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__account-menu-item:hover{background-color:#fef3f2}.svu-sidebar__avatar{width:40px;height:40px;border-radius:50%;background-color:#364b9f;display:flex;align-items:center;justify-content:center;flex-shrink:0}.svu-sidebar__avatar-text{font-family:Roboto,sans-serif;font-weight:600;font-size:16px;color:#fff}.svu-sidebar__user-info{display:flex;flex-direction:column;min-width:0}.svu-sidebar__user-name{font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:#2e353a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.svu-sidebar__user-email{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#6d7275;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SidebarIconComponent, selector: "svu-sidebar-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'svu-sidebar', standalone: true, imports: [CommonModule, RouterLink, RouterLinkActive, SidebarIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"svu-sidebar\">\n  <div class=\"svu-sidebar__content\">\n    <div class=\"svu-sidebar__top\">\n      <!-- Logo: slot proyectable o input -->\n      <div class=\"svu-sidebar__logo\">\n        <ng-container *ngIf=\"logoTpl; else defaultLogo\" [ngTemplateOutlet]=\"logoTpl\"></ng-container>\n        <ng-template #defaultLogo>\n          <img *ngIf=\"logoSrc\" [src]=\"logoSrc\" [alt]=\"logoAlt\" class=\"svu-sidebar__logo-img\" />\n        </ng-template>\n      </div>\n\n      <!-- Navigation -->\n      <nav class=\"svu-sidebar__nav\">\n        <ng-container *ngFor=\"let item of items\">\n          <!-- Item con children (expandible) -->\n          <ng-container *ngIf=\"item.children?.length; else leafItem\">\n            <div\n              class=\"svu-sidebar__nav-item\"\n              [class.svu-sidebar__nav-item--active]=\"parentActive.isActive\"\n              (click)=\"onItemClick(item)\"\n              [routerLink]=\"item.route || null\"\n              routerLinkActive\n              #parentActive=\"routerLinkActive\"\n              [routerLinkActiveOptions]=\"subsetMatch\">\n              <div class=\"svu-sidebar__nav-item-content\">\n                <svu-sidebar-icon *ngIf=\"item.icon\" [name]=\"item.icon\" class=\"svu-sidebar__nav-icon\"></svu-sidebar-icon>\n                <span class=\"svu-sidebar__nav-text\">{{ item.label }}</span>\n              </div>\n              <svu-sidebar-icon\n                name=\"chevron-down\"\n                [size]=\"20\"\n                class=\"svu-sidebar__nav-chevron\"\n                [class.svu-sidebar__nav-chevron--open]=\"isExpanded(item)\">\n              </svu-sidebar-icon>\n            </div>\n\n            <div class=\"svu-sidebar__subnav\" *ngIf=\"isExpanded(item)\">\n              <a\n                *ngFor=\"let child of item.children\"\n                class=\"svu-sidebar__subnav-item\"\n                [routerLink]=\"child.route\"\n                routerLinkActive=\"svu-sidebar__subnav-item--active\"\n                [routerLinkActiveOptions]=\"child.exact ? exactMatch : subsetMatch\"\n                (click)=\"onItemClick(child)\">\n                {{ child.label }}\n              </a>\n            </div>\n          </ng-container>\n\n          <!-- Item simple (hoja) -->\n          <ng-template #leafItem>\n            <a\n              class=\"svu-sidebar__nav-item\"\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"svu-sidebar__nav-item--active\"\n              [routerLinkActiveOptions]=\"item.exact ? exactMatch : subsetMatch\"\n              (click)=\"onItemClick(item)\">\n              <div class=\"svu-sidebar__nav-item-content\">\n                <svu-sidebar-icon *ngIf=\"item.icon\" [name]=\"item.icon\" class=\"svu-sidebar__nav-icon\"></svu-sidebar-icon>\n                <span class=\"svu-sidebar__nav-text\">{{ item.label }}</span>\n              </div>\n            </a>\n          </ng-template>\n        </ng-container>\n      </nav>\n    </div>\n\n    <!-- Footer: slot custom o default (user + logout) -->\n    <div class=\"svu-sidebar__footer\">\n      <div class=\"svu-sidebar__divider\"></div>\n\n      <ng-container *ngIf=\"footerTpl; else defaultFooter\" [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n\n      <ng-template #defaultFooter>\n        <div class=\"svu-sidebar__account-wrapper\" *ngIf=\"userName\">\n          <div class=\"svu-sidebar__account\" (click)=\"toggleAccountMenu()\">\n            <div class=\"svu-sidebar__avatar\">\n              <span class=\"svu-sidebar__avatar-text\">{{ computedInitial }}</span>\n            </div>\n            <div class=\"svu-sidebar__user-info\">\n              <span class=\"svu-sidebar__user-name\">{{ userName }}</span>\n              <span class=\"svu-sidebar__user-email\" *ngIf=\"userEmail\">{{ userEmail }}</span>\n            </div>\n          </div>\n\n          <div *ngIf=\"accountMenuOpen && showLogout\" class=\"svu-sidebar__account-menu\">\n            <button type=\"button\" class=\"svu-sidebar__account-menu-item\" (click)=\"onLogoutClick()\">\n              <svu-sidebar-icon name=\"logout\" [size]=\"20\"></svu-sidebar-icon>\n              <span>{{ logoutLabel }}</span>\n            </button>\n          </div>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n\n  <div class=\"svu-sidebar__border\"></div>\n</aside>\n", styles: [".svu-sidebar{display:flex;width:312px;height:100%;background:#fff;flex-shrink:0}.svu-sidebar__content{display:flex;flex-direction:column;justify-content:space-between;flex:1;height:100%;min-width:0}.svu-sidebar__border{width:1px;height:100%;background-color:#e9eaeb;flex-shrink:0}.svu-sidebar__top{display:flex;flex-direction:column;gap:24px;padding-top:32px}.svu-sidebar__logo{padding:0 20px 0 24px}.svu-sidebar__logo-img{height:48px;width:auto}.svu-sidebar__nav{display:flex;flex-direction:column;gap:4px;padding:0 16px}.svu-sidebar__nav-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background-color .2s ease;text-decoration:none;color:inherit}.svu-sidebar__nav-item:hover,.svu-sidebar__nav-item--active{background-color:#fafafa}.svu-sidebar__nav-item--active .svu-sidebar__nav-text,.svu-sidebar__nav-item--active .svu-sidebar__nav-icon{color:#2e353a}.svu-sidebar__nav-item-content{display:flex;align-items:center;gap:12px}.svu-sidebar__nav-icon{flex-shrink:0;color:#585d61}.svu-sidebar__nav-text{font-family:Roboto,sans-serif;font-weight:600;font-size:16px;line-height:24px;color:#585d61}.svu-sidebar__nav-chevron{flex-shrink:0;color:#585d61;transition:transform .2s ease}.svu-sidebar__nav-chevron--open{transform:rotate(180deg)}.svu-sidebar__subnav{display:flex;flex-direction:column;gap:2px;padding-left:48px}.svu-sidebar__subnav-item{display:block;padding:6px 12px;border-radius:6px;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#6d7275;text-decoration:none;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__subnav-item:hover{background-color:#fafafa}.svu-sidebar__subnav-item--active{background-color:#fafafa;color:#2e353a;font-weight:600}.svu-sidebar__footer{display:flex;flex-direction:column;gap:24px;padding:0 16px 32px}.svu-sidebar__divider{height:1px;width:100%;background-color:#e9eaeb}.svu-sidebar__account-wrapper{position:relative}.svu-sidebar__account{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__account:hover{background-color:#fafafa}.svu-sidebar__account-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid #E9EAEB;border-radius:8px;box-shadow:0 4px 16px #0000001a;padding:4px;z-index:10}.svu-sidebar__account-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:none;border-radius:6px;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#d92d20;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__account-menu-item:hover{background-color:#fef3f2}.svu-sidebar__avatar{width:40px;height:40px;border-radius:50%;background-color:#364b9f;display:flex;align-items:center;justify-content:center;flex-shrink:0}.svu-sidebar__avatar-text{font-family:Roboto,sans-serif;font-weight:600;font-size:16px;color:#fff}.svu-sidebar__user-info{display:flex;flex-direction:column;min-width:0}.svu-sidebar__user-name{font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:#2e353a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.svu-sidebar__user-email{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#6d7275;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
+                type: Input
+            }], logoSrc: [{
+                type: Input
+            }], logoAlt: [{
+                type: Input
+            }], userName: [{
+                type: Input
+            }], userEmail: [{
+                type: Input
+            }], userInitial: [{
+                type: Input
+            }], showLogout: [{
+                type: Input
+            }], logoutLabel: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], logout: [{
+                type: Output
+            }], logoTpl: [{
+                type: ContentChild,
+                args: ['sidebarLogo', { read: TemplateRef }]
+            }], footerTpl: [{
+                type: ContentChild,
+                args: ['sidebarFooter', { read: TemplateRef }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+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 }] });
+
+class AlertComponent {
+    color = 'default';
+    size = 'floating';
+    alertTitle = '';
+    supportingText;
+    showIcon = true;
+    showActions = true;
+    actionVariant = 'link';
+    dismissLabel = 'Descartar';
+    primaryActionLabel = 'Ver cambios';
+    showClose = true;
+    closeAriaLabel = 'Cerrar';
+    dismiss = new EventEmitter();
+    primaryAction = new EventEmitter();
+    closed = new EventEmitter();
+    get alertClasses() {
+        return [
+            'sv-alert',
+            `sv-alert--${this.color}`,
+            this.size === 'full-width' ? 'sv-alert--full-width' : ''
+        ].filter(Boolean).join(' ');
+    }
+    get actionClass() {
+        return this.actionVariant === 'button' ? 'sv-alert__btn' : 'sv-alert__action';
+    }
+    get primaryActionClass() {
+        return this.actionVariant === 'button'
+            ? 'sv-alert__btn sv-alert__btn--primary'
+            : 'sv-alert__action sv-alert__action--primary';
+    }
+    handleDismiss() {
+        this.dismiss.emit();
+    }
+    handlePrimaryAction() {
+        this.primaryAction.emit();
+    }
+    handleClose() {
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { color: "color", size: "size", alertTitle: "alertTitle", supportingText: "supportingText", showIcon: "showIcon", showActions: "showActions", actionVariant: "actionVariant", dismissLabel: "dismissLabel", primaryActionLabel: "primaryActionLabel", showClose: "showClose", closeAriaLabel: "closeAriaLabel" }, outputs: { dismiss: "dismiss", primaryAction: "primaryAction", closed: "closed" }, ngImport: i0, template: "<div [class]=\"alertClasses\" role=\"alert\">\n  <div class=\"sv-alert__container\">\n    <div class=\"sv-alert__icon\" *ngIf=\"showIcon\" aria-hidden=\"true\">\n      <svg *ngIf=\"color === 'error'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M12 8v4M12 16h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <svg *ngIf=\"color === 'warning'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M12 9v4M12 17h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <svg *ngIf=\"color === 'success'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M22 4 12 14.01l-3-3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <svg *ngIf=\"color !== 'error' && color !== 'warning' && color !== 'success'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M12 16v-4M12 8h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n\n    <div class=\"sv-alert__content\">\n      <div class=\"sv-alert__body\">\n        <p class=\"sv-alert__title\">{{ alertTitle }}</p>\n        <p class=\"sv-alert__text\" *ngIf=\"supportingText\">{{ supportingText }}</p>\n      </div>\n\n      <div class=\"sv-alert__actions\" *ngIf=\"showActions\">\n        <button type=\"button\" [class]=\"actionClass\" (click)=\"handleDismiss()\">{{ dismissLabel }}</button>\n        <button type=\"button\" [class]=\"primaryActionClass\" (click)=\"handlePrimaryAction()\">{{ primaryActionLabel }}</button>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"sv-alert__close\"\n      *ngIf=\"showClose\"\n      [attr.aria-label]=\"closeAriaLabel\"\n      (click)=\"handleClose()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M18 6 6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".sv-alert{--sv-alert-bg: #ffffff;--sv-alert-border: #d4d4d4;--sv-alert-icon-fg: #737373;--sv-alert-icon-bg: #ffffff;--sv-alert-title: #404040;--sv-alert-text: #525252;--sv-alert-link: #2b3c7f;--sv-alert-solid: #364b9f;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:32px;background-color:var(--sv-alert-bg);border:1px solid var(--sv-alert-border);border-radius:12px;box-shadow:0 1px 2px #0000000d;font-family:Roboto,sans-serif;box-sizing:border-box}.sv-alert *{box-sizing:border-box}.sv-alert__container{display:flex;align-items:flex-start;gap:32px;width:100%}.sv-alert__icon{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--sv-alert-border);border-radius:8px;background-color:var(--sv-alert-icon-bg);color:var(--sv-alert-icon-fg);box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #0000002e,inset 0 -2px #0000000d}.sv-alert__icon svg{width:20px;height:20px;display:block}.sv-alert__content{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}.sv-alert__body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}.sv-alert__title{margin:0;padding-right:56px;width:100%;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-title);word-break:break-word}.sv-alert__text{margin:0;width:100%;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:var(--sv-alert-text);word-break:break-word}.sv-alert__actions{display:flex;align-items:center;gap:24px;flex-shrink:0}.sv-alert__action{padding:0;border:none;background:none;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-text);white-space:nowrap;cursor:pointer;transition:opacity .2s ease-in-out}.sv-alert__action:hover{opacity:.7}.sv-alert__action:focus-visible{outline:2px solid var(--sv-alert-link);outline-offset:2px;border-radius:4px}.sv-alert__action--primary{color:var(--sv-alert-link)}.sv-alert__close{position:absolute;top:7px;right:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;padding:0;border:none;border-radius:8px;background:none;color:var(--sv-alert-icon-fg);cursor:pointer;transition:background-color .2s ease-in-out}.sv-alert__close:hover{background-color:#0000000d}.sv-alert__close:focus-visible{outline:2px solid var(--sv-alert-link);outline-offset:-2px}.sv-alert__close svg{width:20px;height:20px;display:block}.sv-alert--brand{--sv-alert-bg: #f3f4f9;--sv-alert-border: #2b3c7f;--sv-alert-icon-fg: #364b9f;--sv-alert-icon-bg: #e5e8f3}.sv-alert--gray{--sv-alert-icon-fg: #737373;--sv-alert-icon-bg: #f5f5f5}.sv-alert--error{--sv-alert-bg: #fef2f2;--sv-alert-border: #dc2626;--sv-alert-icon-fg: #dc2626;--sv-alert-icon-bg: #fee2e2}.sv-alert--warning{--sv-alert-bg: #fefce8;--sv-alert-border: #ca8a04;--sv-alert-icon-fg: #ca8a04;--sv-alert-icon-bg: #fef9c3}.sv-alert--success{--sv-alert-bg: #f0fdf4;--sv-alert-border: #16a34a;--sv-alert-icon-fg: #16a34a;--sv-alert-icon-bg: #dcfce7}.sv-alert--brand .sv-alert__icon,.sv-alert--gray .sv-alert__icon,.sv-alert--error .sv-alert__icon,.sv-alert--warning .sv-alert__icon,.sv-alert--success .sv-alert__icon{border:none;border-radius:9999px;box-shadow:none}.sv-alert--full-width{padding:0;border:none;border-bottom:1px solid var(--sv-alert-border);border-radius:0;box-shadow:none}.sv-alert--full-width .sv-alert__container{align-items:center;gap:24px;max-width:1280px;padding:24px 32px}.sv-alert--full-width .sv-alert__content{flex-direction:row;align-items:center;gap:24px}.sv-alert--full-width .sv-alert__body{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 12px;width:auto;flex:1 0 0;min-width:0}.sv-alert--full-width .sv-alert__title,.sv-alert--full-width .sv-alert__text{width:auto;padding-right:0}.sv-alert--full-width .sv-alert__close{position:static;align-self:center}.sv-alert__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border:1px solid var(--sv-alert-solid);border-radius:8px;background-color:#fff;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-title);white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #0000002e,inset 0 -2px #0000000d;transition:filter .2s ease-in-out}.sv-alert__btn:hover{filter:brightness(.97)}.sv-alert__btn:focus-visible{outline:2px solid var(--sv-alert-solid);outline-offset:2px}.sv-alert__btn--primary{border-color:#ffffff1f;border-width:2px;background-color:var(--sv-alert-solid);color:#fff}@media (max-width: 768px){.sv-alert{padding:16px}.sv-alert__container{flex-direction:column;align-items:flex-start;gap:16px}.sv-alert__content{width:100%}.sv-alert__title{padding-right:40px}.sv-alert--full-width{padding:0}.sv-alert--full-width .sv-alert__container{flex-direction:column;align-items:flex-start;gap:32px;padding:32px 16px}.sv-alert--full-width .sv-alert__content{flex-direction:column;align-items:flex-start;gap:16px;width:100%}.sv-alert--full-width .sv-alert__body{flex-direction:column;gap:4px;width:100%}.sv-alert--full-width .sv-alert__actions:has(.sv-alert__btn){flex-direction:column-reverse;align-items:stretch;gap:12px;width:100%}.sv-alert--full-width .sv-alert__close{position:absolute;top:16px;right:8px}.sv-alert__btn{width:100%}}\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: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-alert', standalone: true, imports: [CommonModule], template: "<div [class]=\"alertClasses\" role=\"alert\">\n  <div class=\"sv-alert__container\">\n    <div class=\"sv-alert__icon\" *ngIf=\"showIcon\" aria-hidden=\"true\">\n      <svg *ngIf=\"color === 'error'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M12 8v4M12 16h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <svg *ngIf=\"color === 'warning'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M12 9v4M12 17h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <svg *ngIf=\"color === 'success'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M22 4 12 14.01l-3-3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <svg *ngIf=\"color !== 'error' && color !== 'warning' && color !== 'success'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M12 16v-4M12 8h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n\n    <div class=\"sv-alert__content\">\n      <div class=\"sv-alert__body\">\n        <p class=\"sv-alert__title\">{{ alertTitle }}</p>\n        <p class=\"sv-alert__text\" *ngIf=\"supportingText\">{{ supportingText }}</p>\n      </div>\n\n      <div class=\"sv-alert__actions\" *ngIf=\"showActions\">\n        <button type=\"button\" [class]=\"actionClass\" (click)=\"handleDismiss()\">{{ dismissLabel }}</button>\n        <button type=\"button\" [class]=\"primaryActionClass\" (click)=\"handlePrimaryAction()\">{{ primaryActionLabel }}</button>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"sv-alert__close\"\n      *ngIf=\"showClose\"\n      [attr.aria-label]=\"closeAriaLabel\"\n      (click)=\"handleClose()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M18 6 6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".sv-alert{--sv-alert-bg: #ffffff;--sv-alert-border: #d4d4d4;--sv-alert-icon-fg: #737373;--sv-alert-icon-bg: #ffffff;--sv-alert-title: #404040;--sv-alert-text: #525252;--sv-alert-link: #2b3c7f;--sv-alert-solid: #364b9f;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:32px;background-color:var(--sv-alert-bg);border:1px solid var(--sv-alert-border);border-radius:12px;box-shadow:0 1px 2px #0000000d;font-family:Roboto,sans-serif;box-sizing:border-box}.sv-alert *{box-sizing:border-box}.sv-alert__container{display:flex;align-items:flex-start;gap:32px;width:100%}.sv-alert__icon{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--sv-alert-border);border-radius:8px;background-color:var(--sv-alert-icon-bg);color:var(--sv-alert-icon-fg);box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #0000002e,inset 0 -2px #0000000d}.sv-alert__icon svg{width:20px;height:20px;display:block}.sv-alert__content{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}.sv-alert__body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}.sv-alert__title{margin:0;padding-right:56px;width:100%;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-title);word-break:break-word}.sv-alert__text{margin:0;width:100%;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:var(--sv-alert-text);word-break:break-word}.sv-alert__actions{display:flex;align-items:center;gap:24px;flex-shrink:0}.sv-alert__action{padding:0;border:none;background:none;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-text);white-space:nowrap;cursor:pointer;transition:opacity .2s ease-in-out}.sv-alert__action:hover{opacity:.7}.sv-alert__action:focus-visible{outline:2px solid var(--sv-alert-link);outline-offset:2px;border-radius:4px}.sv-alert__action--primary{color:var(--sv-alert-link)}.sv-alert__close{position:absolute;top:7px;right:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;padding:0;border:none;border-radius:8px;background:none;color:var(--sv-alert-icon-fg);cursor:pointer;transition:background-color .2s ease-in-out}.sv-alert__close:hover{background-color:#0000000d}.sv-alert__close:focus-visible{outline:2px solid var(--sv-alert-link);outline-offset:-2px}.sv-alert__close svg{width:20px;height:20px;display:block}.sv-alert--brand{--sv-alert-bg: #f3f4f9;--sv-alert-border: #2b3c7f;--sv-alert-icon-fg: #364b9f;--sv-alert-icon-bg: #e5e8f3}.sv-alert--gray{--sv-alert-icon-fg: #737373;--sv-alert-icon-bg: #f5f5f5}.sv-alert--error{--sv-alert-bg: #fef2f2;--sv-alert-border: #dc2626;--sv-alert-icon-fg: #dc2626;--sv-alert-icon-bg: #fee2e2}.sv-alert--warning{--sv-alert-bg: #fefce8;--sv-alert-border: #ca8a04;--sv-alert-icon-fg: #ca8a04;--sv-alert-icon-bg: #fef9c3}.sv-alert--success{--sv-alert-bg: #f0fdf4;--sv-alert-border: #16a34a;--sv-alert-icon-fg: #16a34a;--sv-alert-icon-bg: #dcfce7}.sv-alert--brand .sv-alert__icon,.sv-alert--gray .sv-alert__icon,.sv-alert--error .sv-alert__icon,.sv-alert--warning .sv-alert__icon,.sv-alert--success .sv-alert__icon{border:none;border-radius:9999px;box-shadow:none}.sv-alert--full-width{padding:0;border:none;border-bottom:1px solid var(--sv-alert-border);border-radius:0;box-shadow:none}.sv-alert--full-width .sv-alert__container{align-items:center;gap:24px;max-width:1280px;padding:24px 32px}.sv-alert--full-width .sv-alert__content{flex-direction:row;align-items:center;gap:24px}.sv-alert--full-width .sv-alert__body{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 12px;width:auto;flex:1 0 0;min-width:0}.sv-alert--full-width .sv-alert__title,.sv-alert--full-width .sv-alert__text{width:auto;padding-right:0}.sv-alert--full-width .sv-alert__close{position:static;align-self:center}.sv-alert__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border:1px solid var(--sv-alert-solid);border-radius:8px;background-color:#fff;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-title);white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #0000002e,inset 0 -2px #0000000d;transition:filter .2s ease-in-out}.sv-alert__btn:hover{filter:brightness(.97)}.sv-alert__btn:focus-visible{outline:2px solid var(--sv-alert-solid);outline-offset:2px}.sv-alert__btn--primary{border-color:#ffffff1f;border-width:2px;background-color:var(--sv-alert-solid);color:#fff}@media (max-width: 768px){.sv-alert{padding:16px}.sv-alert__container{flex-direction:column;align-items:flex-start;gap:16px}.sv-alert__content{width:100%}.sv-alert__title{padding-right:40px}.sv-alert--full-width{padding:0}.sv-alert--full-width .sv-alert__container{flex-direction:column;align-items:flex-start;gap:32px;padding:32px 16px}.sv-alert--full-width .sv-alert__content{flex-direction:column;align-items:flex-start;gap:16px;width:100%}.sv-alert--full-width .sv-alert__body{flex-direction:column;gap:4px;width:100%}.sv-alert--full-width .sv-alert__actions:has(.sv-alert__btn){flex-direction:column-reverse;align-items:stretch;gap:12px;width:100%}.sv-alert--full-width .sv-alert__close{position:absolute;top:16px;right:8px}.sv-alert__btn{width:100%}}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], alertTitle: [{
+                type: Input
+            }], supportingText: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], showActions: [{
+                type: Input
+            }], actionVariant: [{
+                type: Input
+            }], dismissLabel: [{
+                type: Input
+            }], primaryActionLabel: [{
+                type: Input
+            }], showClose: [{
+                type: Input
+            }], closeAriaLabel: [{
+                type: Input
+            }], dismiss: [{
+                type: Output
+            }], primaryAction: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of @up_si_vale/sivale-componentes-angular
+ */
+// Tokens
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ASSET_BASE_URL, AlertComponent, AssetSourceDirective, ButtonComponent, CheckboxComponent, CopyInputComponent, DatePickerComponent, IconSourceDirective, InputComponent, LoaderComponent, MultiselectComponent, NoLeadingSpaceDirective, OnlyLettersDirective, OnlyNumberDirective, OptionComponent, PhoneInputComponent, RadioComponent, RfcDirective, SelectComponent, SelectPrefixDirective, SelectSuffixDirective, SidebarComponent, SidebarIconComponent, SnackbarComponent, SnackbarService, TextareaComponent, TooltipDirective };
+//# sourceMappingURL=up_si_vale-sivale-componentes-angular.mjs.map