catarina 1.0.0

package/fesm2022/catarina.mjs

@@ -0,0 +1,998 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, signal, Input, Component, EventEmitter, HostBinding, Output, ViewChild, ContentChildren, ElementRef, Optional, Self, Directive, forwardRef, HostListener, DOCUMENT, Inject, Injectable } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { isPlatformBrowser, NgClass, NgIf, NgFor } from '@angular/common';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+
+const ICON_PROVIDER = new InjectionToken('ICON_PROVIDER', {
+    providedIn: 'root',
+    factory: () => ({
+        // Fallback por defecto si no se configura
+        getPath: (name) => `icons/${name}.svg`
+    })
+});
+
+const ICON_NOT_FOUND_SVG = `
+<svg viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg" 
+  aria-labelledby="placeholderIconTitle" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
+  <title id="placeholderIconTitle">Icon not found</title>
+  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+  <g id="SVGRepo_iconCarrier"> 
+    <rect width="18" height="18" x="3" y="3"></rect>
+    <path stroke-linecap="round" d="M21 21L3 3 21 21zM21 3L3 21 21 3z"></path> 
+  </g>
+</svg>
+`;
+class Icon {
+    sanitizer = inject(DomSanitizer);
+    platformId = inject(PLATFORM_ID);
+    iconProvider = inject(ICON_PROVIDER);
+    abortController;
+    svgContent = signal('', ...(ngDevMode ? [{ debugName: "svgContent" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    size = '24px';
+    color = 'currentColor';
+    ngOnDestroy() {
+        this.abortController?.abort();
+    }
+    // Usar nombre (con provider)
+    set name(iconName) {
+        if (!iconName)
+            return;
+        const path = this.iconProvider.getPath(iconName);
+        // Cancelar petición anterior si existe
+        this.abortController?.abort();
+        // Si el path es el fallback por defecto (icons/), no intentes cargarlo
+        if (!path || path.startsWith('icons/')) {
+            this.showPlaceholder();
+            return;
+        }
+        this.loadSvg(path);
+    }
+    // Usar path directo
+    set src(path) {
+        if (!path)
+            return;
+        // Cancelar petición anterior si existe
+        this.abortController?.abort();
+        this.loadSvg(path);
+    }
+    loadSvg(path) {
+        // En SSR, mostrar placeholder inmediatamente
+        if (!isPlatformBrowser(this.platformId)) {
+            this.showPlaceholder();
+            return;
+        }
+        // Limpiar contenido y mostrar estado de carga
+        this.isLoading.set(true);
+        this.svgContent.set('');
+        // Crear nuevo AbortController para esta petición
+        this.abortController = new AbortController();
+        fetch(path, {
+            signal: this.abortController.signal,
+            mode: 'cors',
+            cache: 'default'
+        })
+            .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            return response.text();
+        })
+            .then(svg => {
+            // VALIDACIÓN CRÍTICA: Verificar que sea un SVG
+            if (!this.isValidSvg(svg)) {
+                console.error(`Invalid SVG received from ${path}. Response is not valid SVG.`);
+                this.showPlaceholder();
+                return;
+            }
+            const processed = this.processSvg(svg);
+            if (processed) {
+                this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(processed));
+            }
+            else {
+                this.showPlaceholder();
+            }
+        })
+            .catch((error) => {
+            // Ignorar errores de abort (son esperados)
+            if (error.name === 'AbortError') {
+                return;
+            }
+            console.error(`Error loading icon from ${path}:`, error.message);
+            this.showPlaceholder();
+        })
+            .finally(() => {
+            this.isLoading.set(false);
+        });
+    }
+    showPlaceholder() {
+        this.isLoading.set(false);
+        const processed = this.processSvg(ICON_NOT_FOUND_SVG);
+        if (processed) {
+            this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(processed));
+        }
+    }
+    isValidSvg(content) {
+        // Validaciones estrictas para asegurar que sea SVG
+        const trimmed = content.trim();
+        // 1. Debe comenzar con <svg (ignorando espacios y declaraciones XML)
+        const svgRegex = /^\s*(<\?xml[^>]*>\s*)?<\s*svg\b/i;
+        if (!svgRegex.test(trimmed)) {
+            return false;
+        }
+        // 2. Debe terminar con </svg>
+        if (!trimmed.includes('</svg>')) {
+            return false;
+        }
+        // 3. No debe contener <html>, <head>, <body> (indicaría HTML completo)
+        const htmlTags = ['<html', '<head', '<body', '<!DOCTYPE html'];
+        for (const tag of htmlTags) {
+            if (trimmed.toLowerCase().includes(tag.toLowerCase())) {
+                return false;
+            }
+        }
+        // 4. Tamaño razonable para un icono (máximo 100KB)
+        if (content.length > 100 * 1024) {
+            console.warn('SVG file is too large for an icon:', content.length, 'bytes');
+            return false;
+        }
+        return true;
+    }
+    processSvg(svg) {
+        // Validar antes de procesar
+        if (!this.isValidSvg(svg)) {
+            return null;
+        }
+        // En SSR, usar procesamiento simple con regex (no hay DOMParser)
+        if (!isPlatformBrowser(this.platformId)) {
+            return this.processSvgWithRegex(svg);
+        }
+        // En Browser, usar DOMParser para procesamiento robusto
+        try {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(svg, 'image/svg+xml');
+            // Verificar que no haya errores de parseo
+            const parserError = doc.querySelector('parsererror');
+            if (parserError) {
+                console.error('SVG parsing error:', parserError.textContent);
+                return null;
+            }
+            const svgElement = doc.querySelector('svg');
+            if (!svgElement) {
+                return null;
+            }
+            // Verificar que sea realmente un elemento SVG
+            if (svgElement.tagName.toLowerCase() !== 'svg') {
+                return null;
+            }
+            // Modificar solo el elemento <svg> raíz
+            svgElement.removeAttribute('width');
+            svgElement.removeAttribute('height');
+            // Cambiar fill y stroke solo si no son "none"
+            const currentFill = svgElement.getAttribute('fill');
+            if (currentFill && currentFill !== 'none') {
+                svgElement.setAttribute('fill', 'currentColor');
+            }
+            const currentStroke = svgElement.getAttribute('stroke');
+            if (currentStroke && currentStroke !== 'none') {
+                svgElement.setAttribute('stroke', 'currentColor');
+            }
+            // Asegurar viewBox (requerido para escalado)
+            if (!svgElement.hasAttribute('viewBox')) {
+                svgElement.setAttribute('viewBox', '0 0 24 24');
+            }
+            // Serializar de vuelta a string
+            return new XMLSerializer().serializeToString(svgElement);
+        }
+        catch (error) {
+            console.error('Error processing SVG:', error);
+            return null;
+        }
+    }
+    processSvgWithRegex(svg) {
+        // Procesamiento simple con regex para SSR (donde no hay DOMParser)
+        let processed = svg;
+        // Remover width y height solo del tag <svg> de apertura
+        processed = processed.replace(/(<svg[^>]*?)\s+width="[^"]*"/i, '$1');
+        processed = processed.replace(/(<svg[^>]*?)\s+height="[^"]*"/i, '$1');
+        // Cambiar fill a currentColor si existe y no es "none"
+        processed = processed.replace(/(<svg[^>]*?\s+fill=")(?!none)([^"]*)(")/i, '$1currentColor$3');
+        // Cambiar stroke a currentColor si existe y no es "none"
+        processed = processed.replace(/(<svg[^>]*?\s+stroke=")(?!none)([^"]*)(")/i, '$1currentColor$3');
+        // Asegurar viewBox si no existe
+        if (!/viewBox=/i.test(processed)) {
+            processed = processed.replace(/(<svg[^>]*?)>/i, '$1 viewBox="0 0 24 24">');
+        }
+        return processed;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: Icon, isStandalone: true, selector: "cat-icon", inputs: { size: "size", color: "color", name: "name", src: "src" }, ngImport: i0, template: "<span [innerHTML]=\"svgContent()\" [style.width]=\"size\" [style.height]=\"size\" [style.display]=\"'inline-flex'\"\n    [style.color]=\"color\" class=\"cat-icon\">\n</span>", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.cat-icon{width:100%;height:100%;line-height:0}.cat-icon :deep(svg){width:100%;height:100%;display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Icon, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-icon', imports: [], template: "<span [innerHTML]=\"svgContent()\" [style.width]=\"size\" [style.height]=\"size\" [style.display]=\"'inline-flex'\"\n    [style.color]=\"color\" class=\"cat-icon\">\n</span>", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.cat-icon{width:100%;height:100%;line-height:0}.cat-icon :deep(svg){width:100%;height:100%;display:block}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }] } });
+
+class Button {
+    variant = 'primary';
+    size = 'md';
+    disabled = false;
+    type = 'button';
+    iconLeft;
+    iconCenter;
+    iconRight;
+    customClass = '';
+    clicked = new EventEmitter();
+    get buttonClasses() {
+        return `${this.variant} ${this.size} ${this.customClass}`;
+    }
+    get iconSize() {
+        const sizes = { sm: '16px', md: '20px', lg: '24px' };
+        return sizes[this.size];
+    }
+    get dataCustomClass() {
+        return this.customClass;
+    }
+    handleClick(event) {
+        if (!this.disabled) {
+            this.clicked.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: Button, isStandalone: true, selector: "cat-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", iconLeft: "iconLeft", iconCenter: "iconCenter", iconRight: "iconRight", customClass: "customClass" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-button-class": "this.dataCustomClass" } }, ngImport: i0, template: "<button [class]=\"buttonClasses\" [disabled]=\"disabled\" [type]=\"type\" (click)=\"handleClick($event)\">\n\n    @if (iconLeft) {\n    <cat-icon [name]=\"iconLeft\" [size]=\"iconSize\" class=\"icon-left\">\n    </cat-icon>\n    }\n\n    <span class=\"button-content\">\n        @if (iconCenter) {\n        <cat-icon [name]=\"iconCenter\" [size]=\"iconSize\" class=\"icon-left\">\n        </cat-icon>\n        }\n        <ng-content></ng-content>\n    </span>\n\n    @if (iconRight) {\n    <cat-icon [name]=\"iconRight\" [size]=\"iconSize\" class=\"icon-right\">\n    </cat-icon>\n    }\n</button>", styles: ["button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:none;border-radius:18px;font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}button:disabled{opacity:.5;cursor:not-allowed}.primary{background-color:var(--primary-color-0);color:#fff}.primary:hover:not(:disabled){background-color:#8a0000;background-color:var(--primary-color-1)}.secondary{background-color:var(--neutral-color-3);color:#fff}.secondary:hover:not(:disabled){background-color:var(--neutral-color-4)}.contrast{background-color:var(--neutral-color-9);color:var(--neutral-color-0)}.contrast:hover:not(:disabled){background-color:var(--neutral-color-8)}.outline{background-color:transparent;color:#a40000;border:2px solid #A40000}.outline:hover:not(:disabled){background-color:#a40000;color:#fff}.ghost{background-color:transparent;color:#a40000}.ghost:hover:not(:disabled){background-color:#a400001a}.sm{padding:.25rem .75rem;font-size:.875rem}.md{padding:.5rem 1rem;font-size:1rem}.lg{padding:.75rem 1.5rem;font-size:1.125rem}.icon-left,.icon-right,.icon-center{display:inline-flex}.button-content{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: Icon, selector: "cat-icon", inputs: ["size", "color", "name", "src"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-button', imports: [Icon], template: "<button [class]=\"buttonClasses\" [disabled]=\"disabled\" [type]=\"type\" (click)=\"handleClick($event)\">\n\n    @if (iconLeft) {\n    <cat-icon [name]=\"iconLeft\" [size]=\"iconSize\" class=\"icon-left\">\n    </cat-icon>\n    }\n\n    <span class=\"button-content\">\n        @if (iconCenter) {\n        <cat-icon [name]=\"iconCenter\" [size]=\"iconSize\" class=\"icon-left\">\n        </cat-icon>\n        }\n        <ng-content></ng-content>\n    </span>\n\n    @if (iconRight) {\n    <cat-icon [name]=\"iconRight\" [size]=\"iconSize\" class=\"icon-right\">\n    </cat-icon>\n    }\n</button>", styles: ["button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:none;border-radius:18px;font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}button:disabled{opacity:.5;cursor:not-allowed}.primary{background-color:var(--primary-color-0);color:#fff}.primary:hover:not(:disabled){background-color:#8a0000;background-color:var(--primary-color-1)}.secondary{background-color:var(--neutral-color-3);color:#fff}.secondary:hover:not(:disabled){background-color:var(--neutral-color-4)}.contrast{background-color:var(--neutral-color-9);color:var(--neutral-color-0)}.contrast:hover:not(:disabled){background-color:var(--neutral-color-8)}.outline{background-color:transparent;color:#a40000;border:2px solid #A40000}.outline:hover:not(:disabled){background-color:#a40000;color:#fff}.ghost{background-color:transparent;color:#a40000}.ghost:hover:not(:disabled){background-color:#a400001a}.sm{padding:.25rem .75rem;font-size:.875rem}.md{padding:.5rem 1rem;font-size:1rem}.lg{padding:.75rem 1.5rem;font-size:1.125rem}.icon-left,.icon-right,.icon-center{display:inline-flex}.button-content{display:inline-flex;align-items:center}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], iconLeft: [{
+                type: Input
+            }], iconCenter: [{
+                type: Input
+            }], iconRight: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], dataCustomClass: [{
+                type: HostBinding,
+                args: ['attr.data-button-class']
+            }] } });
+
+class Card {
+    variant = 'surface';
+    size = 'md';
+    width = 'auto';
+    customClass = '';
+    // Exponer las clases como atributos de datos
+    get dataVariant() {
+        return this.variant;
+    }
+    get dataSize() {
+        return this.size;
+    }
+    get dataCustomClass() {
+        return this.customClass;
+    }
+    /*// También exponer como CSS Custom Properties
+    @HostBinding('style.--card-variant') get cssVariant() {
+      return this.variant;
+    }
+    
+    @HostBinding('style.--card-custom-class') get cssCustomClass() {
+      return this.customClass;
+    }
+  */
+    get cardClasses() {
+        return `${this.variant} ${this.size} ${this.customClass}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: Card, isStandalone: true, selector: "cat-card", inputs: { variant: "variant", size: "size", width: "width", customClass: "customClass" }, host: { properties: { "attr.data-card-variant": "this.dataVariant", "attr.data-card-size": "this.dataSize", "attr.data-card-class": "this.dataCustomClass" } }, ngImport: i0, template: "<section [class]=\"cardClasses\" [attr.data-class]=\"customClass\" [style]=\"`width: ${width};`\">\n  <ng-content></ng-content>\n</section>", styles: ["section{min-width:7em;min-height:3em;height:auto;padding:8px;box-sizing:border-box;gap:.5rem;display:flex;flex-direction:column;border:none;border-radius:18px;font-family:inherit;font-size:1rem;font-weight:500;transition:all .2s}.surface{background-color:var(--element-color-4)}.elevated{background-color:var(--neutral-color-0)}.outlined{background-color:var(--element-color-3);border:1px solid var(--neutral-color-6)}.sm{padding:.25rem .75rem;font-size:.875rem}.md{padding:.5rem 1rem;font-size:1rem}.lg{padding:.75rem 1.5rem;font-size:1.125rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Card, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-card', template: "<section [class]=\"cardClasses\" [attr.data-class]=\"customClass\" [style]=\"`width: ${width};`\">\n  <ng-content></ng-content>\n</section>", styles: ["section{min-width:7em;min-height:3em;height:auto;padding:8px;box-sizing:border-box;gap:.5rem;display:flex;flex-direction:column;border:none;border-radius:18px;font-family:inherit;font-size:1rem;font-weight:500;transition:all .2s}.surface{background-color:var(--element-color-4)}.elevated{background-color:var(--neutral-color-0)}.outlined{background-color:var(--element-color-3);border:1px solid var(--neutral-color-6)}.sm{padding:.25rem .75rem;font-size:.875rem}.md{padding:.5rem 1rem;font-size:1rem}.lg{padding:.75rem 1.5rem;font-size:1.125rem}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], dataVariant: [{
+                type: HostBinding,
+                args: ['attr.data-card-variant']
+            }], dataSize: [{
+                type: HostBinding,
+                args: ['attr.data-card-size']
+            }], dataCustomClass: [{
+                type: HostBinding,
+                args: ['attr.data-card-class']
+            }] } });
+
+class Accordion {
+    accordionId;
+    status = false; //false = unactive
+    label = 'Accordion Name';
+    disabled = false;
+    customClass = '';
+    width = 'auto';
+    //Button Properties
+    buttonVariant = 'secondary';
+    buttonSize = 'md';
+    iconLeft = false;
+    iconCenter = false;
+    iconRight = true;
+    //Panel Properties
+    scrolleable = false;
+    variant = 'surface';
+    updateAccordionGroupStatusOutput = new EventEmitter();
+    buttonRef;
+    buttonWidth = 0;
+    ngAfterViewInit() {
+        // Obtener el ancho del botón después de renderizar
+        setTimeout(() => {
+            if (this.buttonRef) {
+                const button = this.buttonRef.nativeElement.querySelector('button');
+                if (button) {
+                    this.buttonWidth = button.offsetWidth;
+                }
+            }
+        });
+    }
+    // Actualizar cuando cambie el label o otros inputs que afecten tamaño
+    ngOnChanges() {
+        if (this.buttonRef) {
+            const button = this.buttonRef.nativeElement.querySelector('button');
+            if (button) {
+                this.buttonWidth = button.offsetWidth;
+            }
+        }
+    }
+    updateAccordionGroupStatus() {
+        this.status = !this.status;
+        this.updateAccordionGroupStatusOutput.emit(this.accordionId);
+    }
+    forceStatus(newStatus) {
+        this.status = newStatus;
+    }
+    ;
+    get dataCustomClass() {
+        return this.customClass;
+    }
+    get panelClasses() {
+        return `${this.variant} ${this.customClass} ${this.scrolleable ? 'scrolleable' : undefined}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Accordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: Accordion, isStandalone: true, selector: "cat-accordion", inputs: { accordionId: "accordionId", status: "status", label: "label", disabled: "disabled", customClass: "customClass", width: "width", buttonVariant: "buttonVariant", buttonSize: "buttonSize", iconLeft: "iconLeft", iconCenter: "iconCenter", iconRight: "iconRight", scrolleable: "scrolleable", variant: "variant" }, outputs: { updateAccordionGroupStatusOutput: "updateAccordionGroupStatusOutput" }, host: { properties: { "attr.data-accordion-class": "this.dataCustomClass" } }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["buttonRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"accordion\" [style]=\"`width: ${width};`\">\n    <div>\n        <cat-button [iconLeft]=\"iconLeft ? (status ? 'minus' : 'plus') : undefined\"\n            [iconCenter]=\"iconCenter ? (status ? 'minus' : 'plus') : undefined\"\n            [iconRight]=\"iconRight && status ? 'minus' : 'plus'\" (clicked)=\"updateAccordionGroupStatus()\"\n            [variant]=\"buttonVariant\" [size]=\"buttonSize\" customClass=\"accordion-button\" [disabled]=\"disabled\">\n            {{label}}\n        </cat-button>\n    </div>\n    <div [class]=\"panelClasses\" [ngClass]=\"status ? 'accordion-panel-active': 'accordion-panel-unactive'\">\n        <ng-content *ngIf=\"status\"></ng-content>\n    </div>\n</section>", styles: [".accordion{margin:0;padding:0;min-width:5em;box-sizing:border-box;border-radius:8px}.accordion-panel-active{box-sizing:border-box;padding:.5em;min-height:5em;background-color:var(--neutral-color-0);width:100%;transition:.25s;border-radius:18px}.accordion-panel-unactive{display:none;transition:.15s}cat-button[data-button-class=accordion-button]{width:100%;display:block}cat-button[data-button-class=accordion-button] ::ng-deep button{width:100%;justify-content:space-between}.scrolleable{height:7em;overflow-y:auto}.scrolleable::-webkit-scrollbar{width:8px;height:8px}.scrolleable::-webkit-scrollbar-track{background:transparent}.scrolleable::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.scrolleable::-webkit-scrollbar-thumb:hover{background:#555}.surface{background-color:var(--element-color-4)}.elevated{background-color:var(--neutral-color-0)}.outlined{background-color:var(--element-color-3);border:1px solid var(--neutral-color-6)}\n"], dependencies: [{ kind: "component", type: Button, selector: "cat-button", inputs: ["variant", "size", "disabled", "type", "iconLeft", "iconCenter", "iconRight", "customClass"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Accordion, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-accordion', imports: [Button, NgClass, NgIf], template: "<section class=\"accordion\" [style]=\"`width: ${width};`\">\n    <div>\n        <cat-button [iconLeft]=\"iconLeft ? (status ? 'minus' : 'plus') : undefined\"\n            [iconCenter]=\"iconCenter ? (status ? 'minus' : 'plus') : undefined\"\n            [iconRight]=\"iconRight && status ? 'minus' : 'plus'\" (clicked)=\"updateAccordionGroupStatus()\"\n            [variant]=\"buttonVariant\" [size]=\"buttonSize\" customClass=\"accordion-button\" [disabled]=\"disabled\">\n            {{label}}\n        </cat-button>\n    </div>\n    <div [class]=\"panelClasses\" [ngClass]=\"status ? 'accordion-panel-active': 'accordion-panel-unactive'\">\n        <ng-content *ngIf=\"status\"></ng-content>\n    </div>\n</section>", styles: [".accordion{margin:0;padding:0;min-width:5em;box-sizing:border-box;border-radius:8px}.accordion-panel-active{box-sizing:border-box;padding:.5em;min-height:5em;background-color:var(--neutral-color-0);width:100%;transition:.25s;border-radius:18px}.accordion-panel-unactive{display:none;transition:.15s}cat-button[data-button-class=accordion-button]{width:100%;display:block}cat-button[data-button-class=accordion-button] ::ng-deep button{width:100%;justify-content:space-between}.scrolleable{height:7em;overflow-y:auto}.scrolleable::-webkit-scrollbar{width:8px;height:8px}.scrolleable::-webkit-scrollbar-track{background:transparent}.scrolleable::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.scrolleable::-webkit-scrollbar-thumb:hover{background:#555}.surface{background-color:var(--element-color-4)}.elevated{background-color:var(--neutral-color-0)}.outlined{background-color:var(--element-color-3);border:1px solid var(--neutral-color-6)}\n"] }]
+        }], propDecorators: { accordionId: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], buttonVariant: [{
+                type: Input
+            }], buttonSize: [{
+                type: Input
+            }], iconLeft: [{
+                type: Input
+            }], iconCenter: [{
+                type: Input
+            }], iconRight: [{
+                type: Input
+            }], scrolleable: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], updateAccordionGroupStatusOutput: [{
+                type: Output
+            }], buttonRef: [{
+                type: ViewChild,
+                args: ['buttonRef', { static: false }]
+            }], dataCustomClass: [{
+                type: HostBinding,
+                args: ['attr.data-accordion-class']
+            }] } });
+
+class AccordionGroup {
+    singleExpand = true;
+    customClass = '';
+    accordions;
+    accordionActiveId;
+    sub;
+    ngAfterContentInit() {
+        if (this.singleExpand) {
+            this.accordions.forEach(acc => {
+                this.sub = acc.updateAccordionGroupStatusOutput.subscribe(id => {
+                    this.handleOpen(id);
+                });
+            });
+        }
+    }
+    handleOpen(id) {
+        this.accordions.forEach(acc => acc.forceStatus(false));
+        const target = this.accordions.find(acc => acc.accordionId === id);
+        if (this.accordionActiveId === id) {
+            target?.forceStatus(false);
+            this.accordionActiveId = undefined;
+        }
+        else {
+            target?.forceStatus(true);
+            this.accordionActiveId = id;
+        }
+    }
+    get dataCustomClass() {
+        return this.customClass;
+    }
+    get accordionGroupClasses() {
+        return `${this.customClass}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AccordionGroup, isStandalone: true, selector: "cat-accordion-group", inputs: { singleExpand: "singleExpand", customClass: "customClass" }, host: { properties: { "attr.data-accordion-group-class": "this.dataCustomClass" } }, queries: [{ propertyName: "accordions", predicate: Accordion }], ngImport: i0, template: "<style>\n    section {\n        width: 100%;\n    }\n</style>\n<section [class]=\"accordionGroupClasses\">\n    <ng-content></ng-content>\n</section>", styles: ["", "section{width:100%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-accordion-group', imports: [], template: "<style>\n    section {\n        width: 100%;\n    }\n</style>\n<section [class]=\"accordionGroupClasses\">\n    <ng-content></ng-content>\n</section>", styles: ["section{width:100%}\n"] }]
+        }], propDecorators: { singleExpand: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], accordions: [{
+                type: ContentChildren,
+                args: [Accordion]
+            }], dataCustomClass: [{
+                type: HostBinding,
+                args: ['attr.data-accordion-group-class']
+            }] } });
+
+class CatInput {
+    el = inject(ElementRef);
+    platformId = inject(PLATFORM_ID);
+    control = inject(NgControl, { optional: true, self: true });
+    static stylesInjected = false;
+    ngOnInit() {
+        if (this.el.nativeElement.tagName.toLowerCase() !== 'input') {
+            console.warn('catInput directive can only be used on <input> elements');
+            return;
+        }
+        // Inyectar estilos solo una vez
+        if (!CatInput.stylesInjected && isPlatformBrowser(this.platformId)) {
+            this.injectStyles();
+            CatInput.stylesInjected = true;
+        }
+    }
+    injectStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+      .cat-input {
+        border: 1px solid var(--neutral-color-3);
+        background-color: var(--neutral-color-0);
+        color: var(--neutral-color-9);
+        border-radius: 18px;
+        outline: none;
+        transition: all 0.2s;
+      }
+
+      .cat-input:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .cat-input::placeholder {
+        color: var(--neutral-color-6);
+        transition: font-size 0.2s;
+      }
+
+      .cat-input:focus::placeholder {
+        font-size: 0.7em;
+      }
+
+      .cat-input:focus {
+        border: 1px solid var(--neutral-color-9);
+      }
+
+      .cat-input.invalid,
+      .cat-input.ng-invalid.ng-touched {
+        border: 1px solid red;
+      }
+
+      .cat-input.ng-valid.ng-touched {
+        border: 1px solid green;
+      }
+
+      .cat-input.md {
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+      }
+
+      .cat-input.sm {
+        padding: 0.25rem 0.75rem;
+        font-size: 0.875rem;
+      }
+
+      .cat-input.lg {
+        padding: 0.75rem 1.5rem;
+        font-size: 1.125rem;
+      }
+    `;
+        document.head.appendChild(style);
+    }
+    get isInvalid() {
+        return !!(this.control && this.control.invalid && this.control.touched);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CatInput, isStandalone: true, selector: "[catInput]", host: { properties: { "class.cat-input": "true", "class.md": "true", "class.invalid": "isInvalid" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[catInput]',
+                    standalone: true,
+                    host: {
+                        '[class.cat-input]': 'true',
+                        '[class.md]': 'true',
+                        '[class.invalid]': 'isInvalid'
+                    }
+                }]
+        }], propDecorators: { control: [{
+                type: Optional
+            }, {
+                type: Self
+            }] } });
+
+class ColorInput {
+    value = '#000000';
+    icon = false;
+    size = '2em';
+    onChange = (value) => { };
+    onTouched = () => { };
+    onInput(event) {
+        const newValue = event.target.value;
+        this.value = newValue;
+        this.onChange(newValue); // informa al padre    
+    }
+    // Métodos requeridos por ControlValueAccessor
+    writeValue(value) {
+        this.value = value || '#000000';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColorInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ColorInput, isStandalone: true, selector: "cat-color-input", inputs: { icon: "icon", size: "size" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorInput),
+                multi: true
+            }], ngImport: i0, template: "<style>\n    div {\n        position: relative;\n        aspect-ratio: 1/1;\n    }\n\n    div:hover {\n        cursor: grab;\n    }\n    input {\n        width: 100%;\n        aspect-ratio: 1/1;\n        top: 0;\n        left: 0;\n    }\n    cat-icon {\n        position: absolute;\n        top: 0;\n        left: 0;\n        pointer-events: none;\n    }\n</style>\n<!-- input-color.html -->\n<div [style]=\"`width: ${size};`\">\n    <input type=\"color\" [style]=\"icon ? 'opacity: 0;' : 'opacity: 100%;'\" [value]=\"value\" (input)=\"onInput($event)\" (blur)=\"onTouched()\">\n    @if (icon) {\n        <cat-icon [style]=\"`height: ${size};`\" size=\"100%\" name=\"palette\"></cat-icon>    \n    }\n</div>", styles: ["", "div{position:relative;aspect-ratio:1/1}div:hover{cursor:grab}input{width:100%;aspect-ratio:1/1;top:0;left:0}cat-icon{position:absolute;top:0;left:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: Icon, selector: "cat-icon", inputs: ["size", "color", "name", "src"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColorInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-color-input', imports: [Icon], providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorInput),
+                            multi: true
+                        }], template: "<style>\n    div {\n        position: relative;\n        aspect-ratio: 1/1;\n    }\n\n    div:hover {\n        cursor: grab;\n    }\n    input {\n        width: 100%;\n        aspect-ratio: 1/1;\n        top: 0;\n        left: 0;\n    }\n    cat-icon {\n        position: absolute;\n        top: 0;\n        left: 0;\n        pointer-events: none;\n    }\n</style>\n<!-- input-color.html -->\n<div [style]=\"`width: ${size};`\">\n    <input type=\"color\" [style]=\"icon ? 'opacity: 0;' : 'opacity: 100%;'\" [value]=\"value\" (input)=\"onInput($event)\" (blur)=\"onTouched()\">\n    @if (icon) {\n        <cat-icon [style]=\"`height: ${size};`\" size=\"100%\" name=\"palette\"></cat-icon>    \n    }\n</div>", styles: ["div{position:relative;aspect-ratio:1/1}div:hover{cursor:grab}input{width:100%;aspect-ratio:1/1;top:0;left:0}cat-icon{position:absolute;top:0;left:0;pointer-events:none}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class SelectInput {
+    el;
+    inputEl;
+    transform; //This option basicly allow to the consumer put the options at the side where he wants
+    options;
+    placeholder = '';
+    type = 'string';
+    value = '';
+    active = false;
+    variant = 'surface';
+    scrolleable = false;
+    customClass = '';
+    //@Output() selected = new EventEmitter<string>();
+    //Accesibility
+    outerClick(event) {
+        if (!this.el.nativeElement.contains(event.target)) {
+            this.active = false;
+        }
+    }
+    ;
+    constructor(el) {
+        this.el = el;
+    }
+    onChange = (value) => { };
+    onTouched = () => { };
+    //Here starts the events from ControlValueAccesor
+    writeValue(value) {
+        this.value = value;
+    }
+    ;
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    //Here ends The events from ControlValueAccesor
+    choseValue(option) {
+        this.value = option;
+        this.onChange(option);
+        this.onTouched();
+        this.active = false;
+        //this.selected.emit(option);
+    }
+    ;
+    get dataCustomClass() {
+        return this.customClass;
+    }
+    get selectInputClass() {
+        return `${this.variant} ${this.scrolleable ? 'scrolleable' : ''}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectInput, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectInput, isStandalone: true, selector: "cat-select-input", inputs: { transform: "transform", options: "options", placeholder: "placeholder", type: "type", variant: "variant", scrolleable: "scrolleable", customClass: "customClass" }, host: { listeners: { "document:click": "outerClick($event)" }, properties: { "attr.data-select-input-class": "this.dataCustomClass" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectInput),
+                multi: true
+            }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div>\n    <input catInput [value]=\"value\" [type]=\"type\" readonly id=\"select\" (mousedown)=\"active =! active\" [placeholder]=\"placeholder\">\n    <section role=\"listbox\" [class]=\"selectInputClass\" class=\"options\" [ngClass]=\"active ? 'options-active' : 'options.unactive'\" [style.transform]=\"transform\">\n        @if (active) {\n            <div role=\"option\"*ngFor=\"let option of options\" (mousedown)=\"choseValue(option)\">\n                {{ option }}\n            </div>\n        }\n    </section>\n</div>", styles: ["div{position:relative;display:inline-block}.options-active{background-color:var(--neutral-color-0);z-index:1;border-radius:18px;padding:8px;box-sizing:border-box;width:100%;position:absolute;display:flex;flex-direction:column;transition:.25s}.options-unactive{display:none;transition:.15s}.options>div{background-color:transparent;min-height:1em;padding-top:.5em;padding-left:.5em;padding-right:.8em;color:var(--neutral-color-9);box-sizing:border-box}.options>div:hover{background-color:var(--neutral-color-1)}.scrolleable{height:7em;overflow-y:auto}.scrolleable::-webkit-scrollbar{width:8px;height:8px}.scrolleable::-webkit-scrollbar-track{background:transparent}.scrolleable::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.scrolleable::-webkit-scrollbar-thumb:hover{background:#555}.surface{background-color:var(--element-color-4)}.elevated{background-color:var(--neutral-color-0)}.outlined{background-color:var(--element-color-3);border:1px solid var(--neutral-color-6)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CatInput, selector: "[catInput]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-select-input', imports: [
+                        NgFor,
+                        CatInput,
+                        NgClass
+                    ], providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectInput),
+                            multi: true
+                        }], template: "<div>\n    <input catInput [value]=\"value\" [type]=\"type\" readonly id=\"select\" (mousedown)=\"active =! active\" [placeholder]=\"placeholder\">\n    <section role=\"listbox\" [class]=\"selectInputClass\" class=\"options\" [ngClass]=\"active ? 'options-active' : 'options.unactive'\" [style.transform]=\"transform\">\n        @if (active) {\n            <div role=\"option\"*ngFor=\"let option of options\" (mousedown)=\"choseValue(option)\">\n                {{ option }}\n            </div>\n        }\n    </section>\n</div>", styles: ["div{position:relative;display:inline-block}.options-active{background-color:var(--neutral-color-0);z-index:1;border-radius:18px;padding:8px;box-sizing:border-box;width:100%;position:absolute;display:flex;flex-direction:column;transition:.25s}.options-unactive{display:none;transition:.15s}.options>div{background-color:transparent;min-height:1em;padding-top:.5em;padding-left:.5em;padding-right:.8em;color:var(--neutral-color-9);box-sizing:border-box}.options>div:hover{background-color:var(--neutral-color-1)}.scrolleable{height:7em;overflow-y:auto}.scrolleable::-webkit-scrollbar{width:8px;height:8px}.scrolleable::-webkit-scrollbar-track{background:transparent}.scrolleable::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.scrolleable::-webkit-scrollbar-thumb:hover{background:#555}.surface{background-color:var(--element-color-4)}.elevated{background-color:var(--neutral-color-0)}.outlined{background-color:var(--element-color-3);border:1px solid var(--neutral-color-6)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inputEl: [{
+                type: ViewChild,
+                args: ['input']
+            }], transform: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], scrolleable: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], outerClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], dataCustomClass: [{
+                type: HostBinding,
+                args: ['attr.data-select-input-class']
+            }] } });
+
+class DateInput {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DateInput, isStandalone: true, selector: "lib-date-input", ngImport: i0, template: "<p>date-input works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-date-input', imports: [], template: "<p>date-input works!</p>\n" }]
+        }] });
+
+class FileInput {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FileInput, isStandalone: true, selector: "lib-file-input", ngImport: i0, template: "<p>file-input works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-file-input', imports: [], template: "<p>file-input works!</p>\n" }]
+        }] });
+
+class PasswordInput {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PasswordInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: PasswordInput, isStandalone: true, selector: "lib-password-input", ngImport: i0, template: "<p>password-input works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PasswordInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-password-input', imports: [], template: "<p>password-input works!</p>\n" }]
+        }] });
+
+class RangeInput {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: RangeInput, isStandalone: true, selector: "lib-range-input", ngImport: i0, template: "<p>range-input works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RangeInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-range-input', imports: [], template: "<p>range-input works!</p>\n" }]
+        }] });
+
+class TextAreaInput {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TextAreaInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TextAreaInput, isStandalone: true, selector: "lib-text-area-input", ngImport: i0, template: "<p>text-area-input works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TextAreaInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-text-area-input', imports: [], template: "<p>text-area-input works!</p>\n" }]
+        }] });
+
+class TimeInput {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TimeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TimeInput, isStandalone: true, selector: "lib-time-input", ngImport: i0, template: "<p>time-input works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TimeInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-time-input', imports: [], template: "<p>time-input works!</p>\n" }]
+        }] });
+
+class Drag {
+    el;
+    renderer;
+    document;
+    offsetX = 0;
+    offsetY = 0;
+    dragging = false;
+    constructor(el, renderer, document) {
+        this.el = el;
+        this.renderer = renderer;
+        this.document = document;
+    }
+    ngAfterViewInit() {
+        const el = this.el.nativeElement;
+        // Si el elemento no tiene position seteado, le ponemos absolute
+        if (typeof window !== 'undefined') {
+            const computedStyle = window.getComputedStyle(el);
+            if (computedStyle.position === 'static') {
+                this.renderer.setStyle(el, 'position', 'absolute');
+            }
+        }
+        el.addEventListener('mousedown', (e) => {
+            this.dragging = true;
+            this.offsetX = e.clientX - el.offsetLeft;
+            this.offsetY = e.clientY - el.offsetTop;
+            el.style.cursor = 'grabbing';
+        });
+        this.document.addEventListener('mousemove', (e) => {
+            if (this.dragging) {
+                el.style.left = e.clientX - this.offsetX + 'px';
+                el.style.top = e.clientY - this.offsetY + 'px';
+            }
+        });
+        this.document.addEventListener('mouseup', () => {
+            this.dragging = false;
+            el.style.cursor = 'grab';
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Drag, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: Drag, isStandalone: true, selector: "[CDrag]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Drag, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[CDrag]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+class Dialog {
+    closs = new EventEmitter();
+    handleKeyDown(event) {
+        this.clossOverlay();
+    }
+    variant = 'surface';
+    size = 'md';
+    customClass = '';
+    // Exponer las clases como atributos de datos
+    get dataVariant() {
+        return this.variant;
+    }
+    get dataSize() {
+        return this.size;
+    }
+    get dataCustomClass() {
+        return this.customClass;
+    }
+    get dialogClasses() {
+        return `${this.variant} ${this.size} ${this.customClass}`;
+    }
+    clossOverlay() {
+        this.closs.emit(false);
+    }
+    ;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: Dialog, isStandalone: true, selector: "cat-dialog", inputs: { variant: "variant", size: "size", customClass: "customClass" }, outputs: { closs: "closs" }, host: { listeners: { "window:keydown.escape": "handleKeyDown($event)" }, properties: { "attr.data-card-variant": "this.dataVariant", "attr.data-card-size": "this.dataSize", "attr.data-card-class": "this.dataCustomClass" } }, ngImport: i0, template: "<div class=\"dialog-shadow\" (click)=\"clossOverlay()\">\n</div>\n<section CDrag [class]=\"dialogClasses\">\n    <ng-content></ng-content>\n</section>", styles: [".dialog-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:999}section{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;height:80vh;border-radius:18px;overflow:auto;padding:8px;box-sizing:border-box;z-index:1000;min-width:7em;min-height:7em;cursor:grab;-webkit-user-select:none;user-select:none}.surface{background-color:var(--element-color-4)}.elevated{background-color:var(--neutral-color-0)}.outlined{background-color:var(--element-color-3);border:2px solid var(--neutral-color-9)}.sm{padding:.25rem .75rem;font-size:.875rem}.md{padding:.5rem 1rem;font-size:1rem}.lg{padding:.75rem 1.5rem;font-size:1.125rem}\n"], dependencies: [{ kind: "directive", type: Drag, selector: "[CDrag]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Dialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-dialog', imports: [Drag], template: "<div class=\"dialog-shadow\" (click)=\"clossOverlay()\">\n</div>\n<section CDrag [class]=\"dialogClasses\">\n    <ng-content></ng-content>\n</section>", styles: [".dialog-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:999}section{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;height:80vh;border-radius:18px;overflow:auto;padding:8px;box-sizing:border-box;z-index:1000;min-width:7em;min-height:7em;cursor:grab;-webkit-user-select:none;user-select:none}.surface{background-color:var(--element-color-4)}.elevated{background-color:var(--neutral-color-0)}.outlined{background-color:var(--element-color-3);border:2px solid var(--neutral-color-9)}.sm{padding:.25rem .75rem;font-size:.875rem}.md{padding:.5rem 1rem;font-size:1rem}.lg{padding:.75rem 1.5rem;font-size:1.125rem}\n"] }]
+        }], propDecorators: { closs: [{
+                type: Output
+            }], handleKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown.escape', ['$event']]
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], dataVariant: [{
+                type: HostBinding,
+                args: ['attr.data-card-variant']
+            }], dataSize: [{
+                type: HostBinding,
+                args: ['attr.data-card-size']
+            }], dataCustomClass: [{
+                type: HostBinding,
+                args: ['attr.data-card-class']
+            }] } });
+
+class Theming {
+    //Light Theme = False
+    activeThemeSubject = new BehaviorSubject(false);
+    activeTheme$ = this.activeThemeSubject.asObservable();
+    //Palettes
+    allPalettesSubject = new BehaviorSubject([]);
+    allPalettes$ = this.allPalettesSubject.asObservable();
+    generatePalettes(color, dark) {
+        this.activeThemeSubject.next(dark);
+        //Step 1: Calculate the Color
+        const colors = this.hexToRgb(color);
+        //Step 2: Get the Primary Palette (static, doesn't change with theme)
+        const primaryColors = this.palette(colors, false, 4); // Always use light theme
+        //Step 3: Calculate dynamic palettes (neutral and elements)
+        const dynamicPalettes = this.calculateDynamicPalettes(dark);
+        //Step 4: Assign All Palettes to Local Variables
+        let allPalettes = [primaryColors];
+        allPalettes = allPalettes.concat([dynamicPalettes.neutral]);
+        allPalettes = allPalettes.concat([dynamicPalettes.elements]);
+        this.allPalettesSubject.next(allPalettes);
+        //Apply theme
+        this.applyTheme(allPalettes);
+        return this.allPalettesSubject.value;
+    }
+    calculateDynamicPalettes(dark) {
+        const theme = dark;
+        const contrastTheme = !dark;
+        this.activeThemeSubject.next(dark);
+        // Calculate neutral colors (changes with theme)
+        const neutralColors = contrastTheme
+            ? this.palette({ red: 255, green: 255, blue: 255 }, false, 9)
+            : this.palette({ red: 0, green: 0, blue: 0 }, true, 9);
+        // Calculate element colors (changes with theme)
+        const elementsColors = this.elementsColors(theme, 3, 40);
+        // Update palettes array with dynamic values
+        const allPalettes = [
+            this.allPalettesSubject.value[0], // Keep primary (static)
+            neutralColors,
+            elementsColors
+        ];
+        this.allPalettesSubject.next(allPalettes);
+        // Apply theme to CSS variables
+        this.applyTheme(allPalettes);
+        return {
+            neutral: neutralColors,
+            elements: elementsColors
+        };
+    }
+    palette(colors, dark, steps) {
+        //Palette
+        const colorsReturn = [];
+        const contrastTheme = !dark;
+        const target = contrastTheme ? 0 : 255;
+        const umbralR = (target - colors.red) / steps;
+        const umbralG = (target - colors.green) / steps;
+        const umbralB = (target - colors.blue) / steps;
+        for (let i = 0; i <= steps; i++) {
+            const r = Math.round(colors.red + umbralR * i);
+            const g = Math.round(colors.green + umbralG * i);
+            const b = Math.round(colors.blue + umbralB * i);
+            colorsReturn.push(`rgb(${r}, ${g}, ${b})`);
+        }
+        return colorsReturn;
+    }
+    ;
+    elementsColors(theme, iteration, amplitude) {
+        amplitude = amplitude / iteration;
+        const colorsReturn = [];
+        for (let i = 0; i < 5; i++) {
+            let r = theme ? 0 + ((85 - 0) / (5 - 1) * i) : 0 + ((255 - 0) / (5 - 1) * i);
+            let g = theme ? 0 + ((85 - 0) / (5 - 1) * i) : 0 + ((255 - 0) / (5 - 1) * i);
+            let b = theme ? 0 + ((85 - 0) / (5 - 1) * i) : 0 + ((255 - 0) / (5 - 1) * i);
+            if (i <= iteration && theme === false) {
+                r = r + amplitude;
+                g = g + amplitude;
+                b = b + amplitude;
+            }
+            else if (theme === false) {
+                r = r - amplitude;
+                g = g - amplitude;
+                b = b - amplitude;
+            }
+            colorsReturn.push(`rgb(${r}, ${g},${b})`);
+        }
+        ;
+        return colorsReturn;
+    }
+    ;
+    applyTheme(palettes) {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        const cssVars = [
+            { prefix: '--primary-color-', index: 0 },
+            { prefix: '--neutral-color-', index: 1 },
+            { prefix: '--element-color-', index: 2 }
+        ];
+        cssVars.forEach(({ prefix, index }) => {
+            palettes[index]?.forEach((color, i) => {
+                root.style.setProperty(`${prefix}${i}`, color);
+            });
+        });
+    }
+    hexToRgb(hex) {
+        const value = parseInt(hex.replace('#', ''), 16);
+        return {
+            red: (value >> 16) & 255,
+            green: (value >> 8) & 255,
+            blue: value & 255,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Theming, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Theming, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Theming, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/*
+ * Public API Surface of catarina
+ */
+// design-system
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Accordion, AccordionGroup, Button, Card, CatInput, ColorInput, DateInput, Dialog, Drag, FileInput, ICON_PROVIDER, Icon, PasswordInput, RangeInput, SelectInput, TextAreaInput, Theming, TimeInput };
+//# sourceMappingURL=catarina.mjs.map