angular-matecu 4.2.3 → 4.2.6

package/fesm2022/angular-matecu.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, HostBinding, Component, NgModule, EventEmitter, ViewChild, Output, Inject, signal, computed, effect, forwardRef, ChangeDetectionStrategy } from '@angular/core';
+import { Injectable, signal, input, effect, HostBinding, Component, NgModule, output, ViewChild, Inject, computed, Input, forwardRef, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { BehaviorSubject, Subject, fromEvent, startWith, combineLatest, map as map$1, tap as tap$1, debounceTime as debounceTime$1 } from 'rxjs';
+import { BehaviorSubject, Subject, fromEvent, startWith, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, filter, tap as tap$1, takeUntil as takeUntil$1 } from 'rxjs';
 import { tap, takeUntil, map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -23,7 +23,6 @@ import * as i5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i1$4 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i1$3 from '@angular/cdk/a11y';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -85,57 +84,51 @@ class MatecuSpinnerComponent {
     cdr;
     destroy$ = new Subject();
     hiddenClass = 'matecu-spinner--hidden';
-    activeCache = false;
+    activeCache = signal(false, ...(ngDevMode ? [{ debugName: "activeCache" }] : []));
     className = 'matecu-spinner';
-    color = '#2196F3';
-    global = false;
-    get active() {
-        return this.activeCache;
+    color = input('#2196F3', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    global = input(false, ...(ngDevMode ? [{ debugName: "global" }] : []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    size = input('70px', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    get isActive() {
+        return this.activeCache();
     }
-    set active(value) {
-        if (this.global) {
-            return;
-        }
-        this.activeCache = value;
-        this.className = value
-            ? this.className.replace(` ${this.hiddenClass}`, '')
-            : (this.className += ` ${this.hiddenClass}`);
-    }
-    size = '70px';
     constructor(spinnerService, cdr) {
         this.spinnerService = spinnerService;
         this.cdr = cdr;
+        effect(() => {
+            if (this.global()) {
+                return;
+            }
+            const value = this.active();
+            this.activeCache.set(value);
+            this.className = value
+                ? this.className.replace(` ${this.hiddenClass}`, '')
+                : (this.className += ` ${this.hiddenClass}`);
+        });
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
     ngOnInit() {
-        if (this.global) {
+        if (this.global()) {
             this.spinnerService
                 .watch()
-                .pipe(tap((value) => (this.activeCache = value)), tap(() => this.cdr.detectChanges()), takeUntil(this.destroy$))
+                .pipe(tap((value) => this.activeCache.set(value)), tap(() => this.cdr.detectChanges()), takeUntil(this.destroy$))
                 .subscribe();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSpinnerComponent, deps: [{ token: MatecuSpinnerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuSpinnerComponent, isStandalone: true, selector: "matecu-spinner", inputs: { color: "color", global: "global", active: "active", size: "size" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "@if(active){\n\n<svg xmlns:svg=\"http://www.w3.org/2000/svg\" [attr.width]=\"size\" [attr.height]=\"size\" xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.0\" viewBox=\"0 0 128 128\" xml:space=\"preserve\">\n    <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"transparent\" />\n    <g>\n        <path class=\"matecu-spinner__100\" d=\"M122.5 69.25H96.47a33.1 33.1 0 0 0 0-10.5h26.05a5.25 5.25 0 0 1 0 10.5z\"\n            [attr.fill]=\"color\" fill-opacity=\"1\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M112.04 97.83L89.47 84.8a33.1 33.1 0 0 0 5.25-9.1l22.57 13.03a5.25 5.25 0 0 1-5.28 9.1z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M88.68 117.35L75.65 94.78a33.1 33.1 0 0 0 9.1-5.25l13.02 22.57a5.25 5.25 0 1 1-9.1 5.25z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\" d=\"M58.7 122.57V96.5a33.1 33.1 0 0 0 10.5 0v26.07a5.25 5.25 0 0 1-10.5 0z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M30.1 112.1l13.04-22.57a33.1 33.1 0 0 0 9.1 5.25L39.2 117.35a5.25 5.25 0 1 1-9.1-5.25z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M10.6 88.74L33.16 75.7a33.1 33.1 0 0 0 5.25 9.1L15.88 97.83a5.25 5.25 0 1 1-5.25-9.1z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__40\" d=\"M5.37 58.75h26.06a33.1 33.1 0 0 0 0 10.5H5.37a5.25 5.25 0 0 1 0-10.5z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.4\" />\n        <path class=\"matecu-spinner__50\"\n            d=\"M15.85 30.17L38.4 43.2a33.1 33.1 0 0 0-5.24 9.1L10.6 39.25a5.25 5.25 0 1 1 5.25-9.1z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.5\" />\n        <path class=\"matecu-spinner__60\"\n            d=\"M39.2 10.65l13.03 22.57a33.1 33.1 0 0 0-9.1 5.25l-13-22.57a5.25 5.25 0 1 1 9.1-5.25z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.6\" />\n        <path class=\"matecu-spinner__70\" d=\"M69.2 5.43V31.5a33.1 33.1 0 0 0-10.5 0V5.42a5.25 5.25 0 1 1 10.5 0z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.7\" />\n        <path class=\"matecu-spinner__80\"\n            d=\"M97.77 15.9L84.75 38.47a33.1 33.1 0 0 0-9.1-5.25l13.03-22.57a5.25 5.25 0 1 1 9.1 5.25z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.8\" />\n        <path class=\"matecu-spinner__90\"\n            d=\"M117.3 39.26L94.7 52.3a33.1 33.1 0 0 0-5.25-9.1l22.57-13.03a5.25 5.25 0 0 1 5.25 9.1z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.9\" />\n        <animateTransform attributeName=\"transform\" type=\"rotate\"\n            values=\"0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64\"\n            calcMode=\"discrete\" dur=\"600ms\" repeatCount=\"indefinite\"></animateTransform>\n    </g>\n</svg>\n}", styles: [".matecu-spinner{display:flex;align-items:center;justify-content:center}.matecu-spinner>svg{width:80px;height:80px}.matecu-spinner__hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuSpinnerComponent, isStandalone: true, selector: "matecu-spinner", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, global: { classPropertyName: "global", publicName: "global", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "@if(isActive){\n\n<svg xmlns:svg=\"http://www.w3.org/2000/svg\" [attr.width]=\"size()\" [attr.height]=\"size()\"\n    xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.0\" viewBox=\"0 0 128 128\"\n    xml:space=\"preserve\">\n    <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"transparent\" />\n    <g>\n        <path class=\"matecu-spinner__100\" d=\"M122.5 69.25H96.47a33.1 33.1 0 0 0 0-10.5h26.05a5.25 5.25 0 0 1 0 10.5z\"\n            [attr.fill]=\"color()\" fill-opacity=\"1\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M112.04 97.83L89.47 84.8a33.1 33.1 0 0 0 5.25-9.1l22.57 13.03a5.25 5.25 0 0 1-5.28 9.1z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M88.68 117.35L75.65 94.78a33.1 33.1 0 0 0 9.1-5.25l13.02 22.57a5.25 5.25 0 1 1-9.1 5.25z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\" d=\"M58.7 122.57V96.5a33.1 33.1 0 0 0 10.5 0v26.07a5.25 5.25 0 0 1-10.5 0z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M30.1 112.1l13.04-22.57a33.1 33.1 0 0 0 9.1 5.25L39.2 117.35a5.25 5.25 0 1 1-9.1-5.25z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M10.6 88.74L33.16 75.7a33.1 33.1 0 0 0 5.25 9.1L15.88 97.83a5.25 5.25 0 1 1-5.25-9.1z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__40\" d=\"M5.37 58.75h26.06a33.1 33.1 0 0 0 0 10.5H5.37a5.25 5.25 0 0 1 0-10.5z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.4\" />\n        <path class=\"matecu-spinner__50\"\n            d=\"M15.85 30.17L38.4 43.2a33.1 33.1 0 0 0-5.24 9.1L10.6 39.25a5.25 5.25 0 1 1 5.25-9.1z\" [attr.fill]=\"color()\"\n            fill-opacity=\"0.5\" />\n        <path class=\"matecu-spinner__60\"\n            d=\"M39.2 10.65l13.03 22.57a33.1 33.1 0 0 0-9.1 5.25l-13-22.57a5.25 5.25 0 1 1 9.1-5.25z\" [attr.fill]=\"color()\"\n            fill-opacity=\"0.6\" />\n        <path class=\"matecu-spinner__70\" d=\"M69.2 5.43V31.5a33.1 33.1 0 0 0-10.5 0V5.42a5.25 5.25 0 1 1 10.5 0z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.7\" />\n        <path class=\"matecu-spinner__80\"\n            d=\"M97.77 15.9L84.75 38.47a33.1 33.1 0 0 0-9.1-5.25l13.03-22.57a5.25 5.25 0 1 1 9.1 5.25z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.8\" />\n        <path class=\"matecu-spinner__90\"\n            d=\"M117.3 39.26L94.7 52.3a33.1 33.1 0 0 0-5.25-9.1l22.57-13.03a5.25 5.25 0 0 1 5.25 9.1z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.9\" />\n        <animateTransform attributeName=\"transform\" type=\"rotate\"\n            values=\"0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64\"\n            calcMode=\"discrete\" dur=\"600ms\" repeatCount=\"indefinite\"></animateTransform>\n    </g>\n</svg>\n}", styles: [".matecu-spinner{display:flex;align-items:center;justify-content:center}.matecu-spinner>svg{width:80px;height:80px}.matecu-spinner__hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matecu-spinner', standalone: true, imports: [CommonModule], template: "@if(active){\n\n<svg xmlns:svg=\"http://www.w3.org/2000/svg\" [attr.width]=\"size\" [attr.height]=\"size\" xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.0\" viewBox=\"0 0 128 128\" xml:space=\"preserve\">\n    <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"transparent\" />\n    <g>\n        <path class=\"matecu-spinner__100\" d=\"M122.5 69.25H96.47a33.1 33.1 0 0 0 0-10.5h26.05a5.25 5.25 0 0 1 0 10.5z\"\n            [attr.fill]=\"color\" fill-opacity=\"1\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M112.04 97.83L89.47 84.8a33.1 33.1 0 0 0 5.25-9.1l22.57 13.03a5.25 5.25 0 0 1-5.28 9.1z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M88.68 117.35L75.65 94.78a33.1 33.1 0 0 0 9.1-5.25l13.02 22.57a5.25 5.25 0 1 1-9.1 5.25z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\" d=\"M58.7 122.57V96.5a33.1 33.1 0 0 0 10.5 0v26.07a5.25 5.25 0 0 1-10.5 0z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M30.1 112.1l13.04-22.57a33.1 33.1 0 0 0 9.1 5.25L39.2 117.35a5.25 5.25 0 1 1-9.1-5.25z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M10.6 88.74L33.16 75.7a33.1 33.1 0 0 0 5.25 9.1L15.88 97.83a5.25 5.25 0 1 1-5.25-9.1z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__40\" d=\"M5.37 58.75h26.06a33.1 33.1 0 0 0 0 10.5H5.37a5.25 5.25 0 0 1 0-10.5z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.4\" />\n        <path class=\"matecu-spinner__50\"\n            d=\"M15.85 30.17L38.4 43.2a33.1 33.1 0 0 0-5.24 9.1L10.6 39.25a5.25 5.25 0 1 1 5.25-9.1z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.5\" />\n        <path class=\"matecu-spinner__60\"\n            d=\"M39.2 10.65l13.03 22.57a33.1 33.1 0 0 0-9.1 5.25l-13-22.57a5.25 5.25 0 1 1 9.1-5.25z\" [attr.fill]=\"color\"\n            fill-opacity=\"0.6\" />\n        <path class=\"matecu-spinner__70\" d=\"M69.2 5.43V31.5a33.1 33.1 0 0 0-10.5 0V5.42a5.25 5.25 0 1 1 10.5 0z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.7\" />\n        <path class=\"matecu-spinner__80\"\n            d=\"M97.77 15.9L84.75 38.47a33.1 33.1 0 0 0-9.1-5.25l13.03-22.57a5.25 5.25 0 1 1 9.1 5.25z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.8\" />\n        <path class=\"matecu-spinner__90\"\n            d=\"M117.3 39.26L94.7 52.3a33.1 33.1 0 0 0-5.25-9.1l22.57-13.03a5.25 5.25 0 0 1 5.25 9.1z\"\n            [attr.fill]=\"color\" fill-opacity=\"0.9\" />\n        <animateTransform attributeName=\"transform\" type=\"rotate\"\n            values=\"0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64\"\n            calcMode=\"discrete\" dur=\"600ms\" repeatCount=\"indefinite\"></animateTransform>\n    </g>\n</svg>\n}", styles: [".matecu-spinner{display:flex;align-items:center;justify-content:center}.matecu-spinner>svg{width:80px;height:80px}.matecu-spinner__hidden{display:none}\n"] }]
+            args: [{ selector: 'matecu-spinner', standalone: true, imports: [CommonModule], template: "@if(isActive){\n\n<svg xmlns:svg=\"http://www.w3.org/2000/svg\" [attr.width]=\"size()\" [attr.height]=\"size()\"\n    xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.0\" viewBox=\"0 0 128 128\"\n    xml:space=\"preserve\">\n    <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"transparent\" />\n    <g>\n        <path class=\"matecu-spinner__100\" d=\"M122.5 69.25H96.47a33.1 33.1 0 0 0 0-10.5h26.05a5.25 5.25 0 0 1 0 10.5z\"\n            [attr.fill]=\"color()\" fill-opacity=\"1\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M112.04 97.83L89.47 84.8a33.1 33.1 0 0 0 5.25-9.1l22.57 13.03a5.25 5.25 0 0 1-5.28 9.1z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M88.68 117.35L75.65 94.78a33.1 33.1 0 0 0 9.1-5.25l13.02 22.57a5.25 5.25 0 1 1-9.1 5.25z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\" d=\"M58.7 122.57V96.5a33.1 33.1 0 0 0 10.5 0v26.07a5.25 5.25 0 0 1-10.5 0z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M30.1 112.1l13.04-22.57a33.1 33.1 0 0 0 9.1 5.25L39.2 117.35a5.25 5.25 0 1 1-9.1-5.25z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__30\"\n            d=\"M10.6 88.74L33.16 75.7a33.1 33.1 0 0 0 5.25 9.1L15.88 97.83a5.25 5.25 0 1 1-5.25-9.1z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.3\" />\n        <path class=\"matecu-spinner__40\" d=\"M5.37 58.75h26.06a33.1 33.1 0 0 0 0 10.5H5.37a5.25 5.25 0 0 1 0-10.5z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.4\" />\n        <path class=\"matecu-spinner__50\"\n            d=\"M15.85 30.17L38.4 43.2a33.1 33.1 0 0 0-5.24 9.1L10.6 39.25a5.25 5.25 0 1 1 5.25-9.1z\" [attr.fill]=\"color()\"\n            fill-opacity=\"0.5\" />\n        <path class=\"matecu-spinner__60\"\n            d=\"M39.2 10.65l13.03 22.57a33.1 33.1 0 0 0-9.1 5.25l-13-22.57a5.25 5.25 0 1 1 9.1-5.25z\" [attr.fill]=\"color()\"\n            fill-opacity=\"0.6\" />\n        <path class=\"matecu-spinner__70\" d=\"M69.2 5.43V31.5a33.1 33.1 0 0 0-10.5 0V5.42a5.25 5.25 0 1 1 10.5 0z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.7\" />\n        <path class=\"matecu-spinner__80\"\n            d=\"M97.77 15.9L84.75 38.47a33.1 33.1 0 0 0-9.1-5.25l13.03-22.57a5.25 5.25 0 1 1 9.1 5.25z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.8\" />\n        <path class=\"matecu-spinner__90\"\n            d=\"M117.3 39.26L94.7 52.3a33.1 33.1 0 0 0-5.25-9.1l22.57-13.03a5.25 5.25 0 0 1 5.25 9.1z\"\n            [attr.fill]=\"color()\" fill-opacity=\"0.9\" />\n        <animateTransform attributeName=\"transform\" type=\"rotate\"\n            values=\"0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64\"\n            calcMode=\"discrete\" dur=\"600ms\" repeatCount=\"indefinite\"></animateTransform>\n    </g>\n</svg>\n}", styles: [".matecu-spinner{display:flex;align-items:center;justify-content:center}.matecu-spinner>svg{width:80px;height:80px}.matecu-spinner__hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: MatecuSpinnerService }, { type: i0.ChangeDetectorRef }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
-            }], color: [{
-                type: Input
-            }], global: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
+            }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], global: [{ type: i0.Input, args: [{ isSignal: true, alias: "global", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class MatecuSpinnerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -159,39 +152,36 @@ class MatecuTopbarLayoutComponent {
     elementRef;
     changeDetector;
     zone;
-    _scrolled = false;
-    _prominent = false;
+    _scrolled = signal(false, ...(ngDevMode ? [{ debugName: "_scrolled" }] : []));
     get scrolled() {
-        return this._scrolled;
+        return this._scrolled();
     }
     set scrolled(value) {
-        this._scrolled = value;
+        this._scrolled.set(value);
         this.className = this.className.replace(/scrolled/g, '').trim();
         if (this.scrolled) {
             this.className = `${this.className} scrolled`;
         }
     }
     destroy$ = new Subject();
-    mobileStyle = false;
-    mobileStyleChange = new EventEmitter();
-    mobileWidth = 768;
-    whenResize = new EventEmitter();
-    get prominent() {
-        return this._prominent;
-    }
-    set prominent(value) {
-        this._prominent = value;
-        this.className = this.className.replace(/prominent/g, '').trim();
-        if (this.prominent) {
-            this.className = `${this.className} prominent`;
-        }
-    }
+    mobileStyle = input(false, ...(ngDevMode ? [{ debugName: "mobileStyle" }] : []));
+    mobileStyleChange = output();
+    mobileWidth = input(768, ...(ngDevMode ? [{ debugName: "mobileWidth" }] : []));
+    whenResize = output();
+    prominent = input(false, ...(ngDevMode ? [{ debugName: "prominent" }] : []));
     className = 'matecu-topbar-layout';
     bodyElement;
     constructor(elementRef, changeDetector, zone) {
         this.elementRef = elementRef;
         this.changeDetector = changeDetector;
         this.zone = zone;
+        effect(() => {
+            const prominentValue = this.prominent();
+            this.className = this.className.replace(/prominent/g, '').trim();
+            if (prominentValue) {
+                this.className = `${this.className} prominent`;
+            }
+        });
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -216,9 +206,9 @@ class MatecuTopbarLayoutComponent {
             if (!width) {
                 return;
             }
-            this.mobileStyle = width <= this.mobileWidth;
+            const isMobileStyle = width <= this.mobileWidth();
             this.zone.run(() => {
-                this.mobileStyleChange.emit(this.mobileStyle);
+                this.mobileStyleChange.emit(isMobileStyle);
                 this.whenResize.emit(width);
             });
         });
@@ -240,22 +230,12 @@ class MatecuTopbarLayoutComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarLayoutComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MatecuTopbarLayoutComponent, isStandalone: true, selector: "matecu-topbar-layout", inputs: { mobileStyle: "mobileStyle", mobileWidth: "mobileWidth", prominent: "prominent" }, outputs: { mobileStyleChange: "mobileStyleChange", whenResize: "whenResize" }, host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["mtbBody"], descendants: true }], ngImport: i0, template: "<div class=\"matecu-topbar-layout__bar\">\n  <ng-content select=\"matecu-topbar-header-row[first-row]\"></ng-content>\n  <ng-content select=\"matecu-topbar-header-row[second-row]\"></ng-content>\n</div>\n<div class=\"matecu-topbar-layout__body\" #mtbBody>\n  <ng-content select=\"matecu-topbar-body\"></ng-content>\n</div>\n", styles: [":host,.matecu-topbar-layout{position:relative;box-sizing:border-box}:host *,.matecu-topbar-layout *{box-sizing:border-box}:host,.matecu-topbar-layout{display:grid;grid-template-rows:auto 1fr;box-sizing:border-box;border:var(--mtb-border, none);margin:var(--mtb-margin, 0px);padding:0;width:var(--mtb-width, 100%);height:var(--mtb-height, 100vh);overflow:hidden}:host__bar,.matecu-topbar-layout__bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:var(--mtb-primary-color, #3f51b5);color:var(--mtb-bar-color, #fff);width:100%;padding:0;margin:0;min-height:var(--mtb-bar-height, 64px);transition:all .3s}:host__body,.matecu-topbar-layout__body{padding:0;margin:0;overflow-y:auto}:host.prominent .matecu-topbar-layout__bar,.matecu-topbar-layout.prominent .matecu-topbar-layout__bar{min-height:var(--mtb-bar-prominent-height, 128px)}:host.scrolled .matecu-topbar-layout__bar,.matecu-topbar-layout.scrolled .matecu-topbar-layout__bar{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;min-height:var(--mtb-bar-height, 64px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatToolbarModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: MatecuTopbarLayoutComponent, isStandalone: true, selector: "matecu-topbar-layout", inputs: { mobileStyle: { classPropertyName: "mobileStyle", publicName: "mobileStyle", isSignal: true, isRequired: false, transformFunction: null }, mobileWidth: { classPropertyName: "mobileWidth", publicName: "mobileWidth", isSignal: true, isRequired: false, transformFunction: null }, prominent: { classPropertyName: "prominent", publicName: "prominent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mobileStyleChange: "mobileStyleChange", whenResize: "whenResize" }, host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["mtbBody"], descendants: true }], ngImport: i0, template: "<div class=\"matecu-topbar-layout__bar\">\n  <ng-content select=\"matecu-topbar-header-row[first-row]\"></ng-content>\n  <ng-content select=\"matecu-topbar-header-row[second-row]\"></ng-content>\n</div>\n<div class=\"matecu-topbar-layout__body\" #mtbBody>\n  <ng-content select=\"matecu-topbar-body\"></ng-content>\n</div>\n", styles: [":host,.matecu-topbar-layout{position:relative;box-sizing:border-box}:host *,.matecu-topbar-layout *{box-sizing:border-box}:host,.matecu-topbar-layout{display:grid;grid-template-rows:auto 1fr;box-sizing:border-box;border:var(--mtb-border, none);margin:var(--mtb-margin, 0px);padding:0;width:var(--mtb-width, 100%);height:var(--mtb-height, 100vh);overflow:hidden}:host__bar,.matecu-topbar-layout__bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:var(--mtb-primary-color, #3f51b5);color:var(--mtb-bar-color, #fff);width:100%;padding:0;margin:0;min-height:var(--mtb-bar-height, 64px);transition:all .3s}:host__body,.matecu-topbar-layout__body{padding:0;margin:0;overflow-y:auto}:host.prominent .matecu-topbar-layout__bar,.matecu-topbar-layout.prominent .matecu-topbar-layout__bar{min-height:var(--mtb-bar-prominent-height, 128px)}:host.scrolled .matecu-topbar-layout__bar,.matecu-topbar-layout.scrolled .matecu-topbar-layout__bar{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;min-height:var(--mtb-bar-height, 64px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatToolbarModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matecu-topbar-layout', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatToolbarModule], template: "<div class=\"matecu-topbar-layout__bar\">\n  <ng-content select=\"matecu-topbar-header-row[first-row]\"></ng-content>\n  <ng-content select=\"matecu-topbar-header-row[second-row]\"></ng-content>\n</div>\n<div class=\"matecu-topbar-layout__body\" #mtbBody>\n  <ng-content select=\"matecu-topbar-body\"></ng-content>\n</div>\n", styles: [":host,.matecu-topbar-layout{position:relative;box-sizing:border-box}:host *,.matecu-topbar-layout *{box-sizing:border-box}:host,.matecu-topbar-layout{display:grid;grid-template-rows:auto 1fr;box-sizing:border-box;border:var(--mtb-border, none);margin:var(--mtb-margin, 0px);padding:0;width:var(--mtb-width, 100%);height:var(--mtb-height, 100vh);overflow:hidden}:host__bar,.matecu-topbar-layout__bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:var(--mtb-primary-color, #3f51b5);color:var(--mtb-bar-color, #fff);width:100%;padding:0;margin:0;min-height:var(--mtb-bar-height, 64px);transition:all .3s}:host__body,.matecu-topbar-layout__body{padding:0;margin:0;overflow-y:auto}:host.prominent .matecu-topbar-layout__bar,.matecu-topbar-layout.prominent .matecu-topbar-layout__bar{min-height:var(--mtb-bar-prominent-height, 128px)}:host.scrolled .matecu-topbar-layout__bar,.matecu-topbar-layout.scrolled .matecu-topbar-layout__bar{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;min-height:var(--mtb-bar-height, 64px)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { mobileStyle: [{
-                type: Input
-            }], mobileStyleChange: [{
-                type: Output
-            }], mobileWidth: [{
-                type: Input
-            }], whenResize: [{
-                type: Output
-            }], prominent: [{
-                type: Input
-            }], className: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { mobileStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileStyle", required: false }] }], mobileStyleChange: [{ type: i0.Output, args: ["mobileStyleChange"] }], mobileWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileWidth", required: false }] }], whenResize: [{ type: i0.Output, args: ["whenResize"] }], prominent: [{ type: i0.Input, args: [{ isSignal: true, alias: "prominent", required: false }] }], className: [{
                 type: HostBinding,
                 args: ['class']
             }], bodyElement: [{
@@ -292,34 +272,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 class MatecuTopbarFabComponent {
-    _mobileStyle = false;
     mainClassName = 'matecu-topbar-fab';
-    display = true;
-    get mobileStyle() {
-        return this._mobileStyle;
-    }
-    set mobileStyle(value) {
-        this._mobileStyle = value;
-        this.className = this.className.replace(/mobile-style/g, '').trim();
-        if (this._mobileStyle) {
-            this.className = `${this.className} mobile-style`;
-        }
-    }
+    display = input(true, ...(ngDevMode ? [{ debugName: "display" }] : []));
+    mobileStyle = input(false, ...(ngDevMode ? [{ debugName: "mobileStyle" }] : []));
     className = this.mainClassName;
+    constructor() {
+        effect(() => {
+            this.className = this.className.replace(/mobile-style/g, '').trim();
+            if (this.mobileStyle()) {
+                this.className = `${this.className} mobile-style`;
+            }
+        });
+    }
     get color() {
-        return this.display ? 'flex' : 'none';
+        return this.display() ? 'flex' : 'none';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuTopbarFabComponent, isStandalone: true, selector: "matecu-topbar-fab", inputs: { display: "display", mobileStyle: "mobileStyle" }, host: { properties: { "class": "this.className", "style.display": "this.color" } }, ngImport: i0, template: "@if(display){\n<ng-content></ng-content>\n}", styles: [":host,:host *,.matecu-topbar-fab,.matecu-topbar-fab *{box-sizing:border-box;outline:none}:host,.matecu-topbar-fab{display:flex;align-self:flex-end;align-items:flex-start;transform:translateY(50%);transition:all .3s ease-in-out}:host.mobile-style,.matecu-topbar-fab.mobile-style{position:absolute;transform:translate(0);bottom:var(--mtb-fab-mobile-bottom-position, 20px);right:var(--mtb-fab-mobile-right-position, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuTopbarFabComponent, isStandalone: true, selector: "matecu-topbar-fab", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, mobileStyle: { classPropertyName: "mobileStyle", publicName: "mobileStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className", "style.display": "this.color" } }, ngImport: i0, template: "@if(display()){\n<ng-content></ng-content>\n}", styles: [":host,:host *,.matecu-topbar-fab,.matecu-topbar-fab *{box-sizing:border-box;outline:none}:host,.matecu-topbar-fab{display:flex;align-self:flex-end;align-items:flex-start;transform:translateY(50%);transition:all .3s ease-in-out}:host.mobile-style,.matecu-topbar-fab.mobile-style{position:absolute;transform:translate(0);bottom:var(--mtb-fab-mobile-bottom-position, 20px);right:var(--mtb-fab-mobile-right-position, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarFabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matecu-topbar-fab', standalone: true, imports: [CommonModule, MatButtonModule], template: "@if(display){\n<ng-content></ng-content>\n}", styles: [":host,:host *,.matecu-topbar-fab,.matecu-topbar-fab *{box-sizing:border-box;outline:none}:host,.matecu-topbar-fab{display:flex;align-self:flex-end;align-items:flex-start;transform:translateY(50%);transition:all .3s ease-in-out}:host.mobile-style,.matecu-topbar-fab.mobile-style{position:absolute;transform:translate(0);bottom:var(--mtb-fab-mobile-bottom-position, 20px);right:var(--mtb-fab-mobile-right-position, 20px)}\n"] }]
-        }], propDecorators: { display: [{
-                type: Input
-            }], mobileStyle: [{
-                type: Input
-            }], className: [{
+            args: [{ selector: 'matecu-topbar-fab', standalone: true, imports: [CommonModule, MatButtonModule], template: "@if(display()){\n<ng-content></ng-content>\n}", styles: [":host,:host *,.matecu-topbar-fab,.matecu-topbar-fab *{box-sizing:border-box;outline:none}:host,.matecu-topbar-fab{display:flex;align-self:flex-end;align-items:flex-start;transform:translateY(50%);transition:all .3s ease-in-out}:host.mobile-style,.matecu-topbar-fab.mobile-style{position:absolute;transform:translate(0);bottom:var(--mtb-fab-mobile-bottom-position, 20px);right:var(--mtb-fab-mobile-right-position, 20px)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], mobileStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileStyle", required: false }] }], className: [{
                 type: HostBinding,
                 args: ['class']
             }], color: [{
@@ -331,37 +305,33 @@ class MatecuTopbarSearchComponent {
     hasValue = false;
     activeMobileSearch = false;
     inputCtrl = new FormControl('');
-    _value = '';
-    _mobileStyle = false;
     destroy$ = new Subject();
-    display = true;
-    placeholder = '';
-    delyValueChanges = 300; // valor en milisegundos
-    get value() {
-        return this._value;
-    }
-    set value(v) {
-        this._value = v;
-        this.inputCtrl.setValue(v);
-    }
-    get mobileStyle() {
-        return this._mobileStyle;
-    }
-    set mobileStyle(value) {
-        this._mobileStyle = value;
-        this.className = this.className.replace(/mobile-style/g, '').trim();
-        if (this._mobileStyle) {
-            this.className = `${this.className} mobile-style`;
-        }
-    }
-    valueChange = new EventEmitter();
+    display = input(true, ...(ngDevMode ? [{ debugName: "display" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    delyValueChanges = input(300, ...(ngDevMode ? [{ debugName: "delyValueChanges" }] : [])); // valor en milisegundos
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    mobileStyle = input(false, ...(ngDevMode ? [{ debugName: "mobileStyle" }] : []));
+    valueChange = output();
     className = 'matecu-topbar-search';
+    constructor() {
+        effect(() => {
+            const valueInput = this.value();
+            this.inputCtrl.setValue(valueInput);
+        });
+        effect(() => {
+            const mobileStyleValue = this.mobileStyle();
+            this.className = this.className.replace(/mobile-style/g, '').trim();
+            if (mobileStyleValue) {
+                this.className = `${this.className} mobile-style`;
+            }
+        });
+    }
     get color() {
-        return this.display ? 'flex' : 'none';
+        return this.display() ? 'flex' : 'none';
     }
     ngOnInit() {
         this.inputCtrl.valueChanges
-            .pipe(map((value) => value ?? ''), tap(this.updateHasValueFn()), debounceTime(this.delyValueChanges), distinctUntilChanged(), tap((value) => this.valueChange.emit(value)), takeUntil(this.destroy$))
+            .pipe(map((value) => value ?? ''), tap(this.updateHasValueFn()), debounceTime(this.delyValueChanges()), distinctUntilChanged(), tap((value) => this.valueChange.emit(value)), takeUntil(this.destroy$))
             .subscribe();
     }
     toggleActiveMobildeSearch() {
@@ -377,30 +347,12 @@ class MatecuTopbarSearchComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuTopbarSearchComponent, isStandalone: true, selector: "matecu-topbar-search", inputs: { display: "display", placeholder: "placeholder", delyValueChanges: "delyValueChanges", value: "value", mobileStyle: "mobileStyle" }, outputs: { valueChange: "valueChange" }, host: { properties: { "className": "this.className", "style.display": "this.color" } }, ngImport: i0, template: "@if(display){\n<button class=\"matecu-topbar-search-mobile-only\" [ngClass]=\"{ 'mobile-style': mobileStyle }\"\n  (click)=\"toggleActiveMobildeSearch()\">\n  <mat-icon>search</mat-icon>\n</button>\n<div class=\"matecu-topbar-search\" [ngClass]=\"{\n      'mobile-style': mobileStyle,\n      'active-mobile': activeMobileSearch\n    }\">\n  <span class=\"matecu-topbar-search__icon matecu-topbar-search__icon--search\">\n    <mat-icon>search</mat-icon>\n  </span>\n  @if(hasValue || mobileStyle){\n  <button class=\"matecu-topbar-search__icon matecu-topbar-search__icon--clear\" (click)=\"clearSearch()\">\n    <mat-icon>close</mat-icon>\n  </button>\n  }\n  <input type=\"text\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n</div>\n}", styles: [".matecu-topbar-search-mobile-only{display:none;border:none;background:none;cursor:pointer;color:var(--mtb-search-color, var(--mtb-bar-color, #fff));margin:var(--mtb-search-margin, 10px)}.matecu-topbar-search-mobile-only.mobile-style{display:block}.matecu-topbar-search,.matecu-topbar-search *{box-sizing:border-box;outline:none}.matecu-topbar-search{margin:var(--mtb-search-margin, 10px);position:relative;display:flex;align-items:center;color:var(--mtb-search-color, var(--mtb-bar-color, #fff));max-height:var(--bar-height, 64px)}.matecu-topbar-search input{width:var(--mtb-search-width, 200px);min-width:var(--mtb-search-width, 200px);height:var(--mtb-search-height, 40px);padding:var(--mtb-search-pading, 3px 35px);border-radius:4px;border:1px solid;border:var(--mtb-search-border, none);background-color:var(--search-background-color, rgba(255, 255, 255, .3019607843));color:currentColor;transition:all .3s ease-in-out}.matecu-topbar-search input::placeholder{color:var(--mtb-search-color, var(--mtb-bar-color, #fff));opacity:1}.matecu-topbar-search input:focus{min-width:var(--mtb-search-width-large, 290px)}.matecu-topbar-search__icon{position:absolute;top:50%;transform:translateY(-50%);padding:0}.matecu-topbar-search__icon--search{left:6px}.matecu-topbar-search__icon--clear{border:0px;background:0px;cursor:pointer;color:currentColor;right:6px}.mobile-style.matecu-topbar-search{position:absolute;top:0;left:0;right:0;border-bottom:1px solid;border-bottom-color:var(--mtb-search-border-bottom-color, #ededed);z-index:3;padding:0;margin:0;height:64px;color:var(--mtb-search-mobile-color, #000);transform:translateY(-120%);transition:all .3s ease-in-out}.mobile-style.matecu-topbar-search.active-mobile{transform:translateY(0)}.mobile-style.matecu-topbar-search input{background-color:#fff;height:100%;width:100%;border-radius:0}.mobile-style.matecu-topbar-search input::placeholder{color:var(--mtb-search-mobile-color, #000)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuTopbarSearchComponent, isStandalone: true, selector: "matecu-topbar-search", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, delyValueChanges: { classPropertyName: "delyValueChanges", publicName: "delyValueChanges", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mobileStyle: { classPropertyName: "mobileStyle", publicName: "mobileStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "className": "this.className", "style.display": "this.color" } }, ngImport: i0, template: "@if(display()){\n<button class=\"matecu-topbar-search-mobile-only\" [ngClass]=\"{ 'mobile-style': mobileStyle() }\"\n  (click)=\"toggleActiveMobildeSearch()\">\n  <mat-icon>search</mat-icon>\n</button>\n<div class=\"matecu-topbar-search\" [ngClass]=\"{\n      'mobile-style': mobileStyle(),\n      'active-mobile': activeMobileSearch\n    }\">\n  <span class=\"matecu-topbar-search__icon matecu-topbar-search__icon--search\">\n    <mat-icon>search</mat-icon>\n  </span>\n  @if(hasValue || mobileStyle()){\n  <button class=\"matecu-topbar-search__icon matecu-topbar-search__icon--clear\" (click)=\"clearSearch()\">\n    <mat-icon>close</mat-icon>\n  </button>\n  }\n  <input type=\"text\" [placeholder]=\"placeholder()\" [formControl]=\"inputCtrl\" />\n</div>\n}", styles: [".matecu-topbar-search-mobile-only{display:none;border:none;background:none;cursor:pointer;color:var(--mtb-search-color, var(--mtb-bar-color, #fff));margin:var(--mtb-search-margin, 10px)}.matecu-topbar-search-mobile-only.mobile-style{display:block}.matecu-topbar-search,.matecu-topbar-search *{box-sizing:border-box;outline:none}.matecu-topbar-search{margin:var(--mtb-search-margin, 10px);position:relative;display:flex;align-items:center;color:var(--mtb-search-color, var(--mtb-bar-color, #fff));max-height:var(--bar-height, 64px)}.matecu-topbar-search input{width:var(--mtb-search-width, 200px);min-width:var(--mtb-search-width, 200px);height:var(--mtb-search-height, 40px);padding:var(--mtb-search-pading, 3px 35px);border-radius:4px;border:1px solid;border:var(--mtb-search-border, none);background-color:var(--search-background-color, rgba(255, 255, 255, .3019607843));color:currentColor;transition:all .3s ease-in-out}.matecu-topbar-search input::placeholder{color:var(--mtb-search-color, var(--mtb-bar-color, #fff));opacity:1}.matecu-topbar-search input:focus{min-width:var(--mtb-search-width-large, 290px)}.matecu-topbar-search__icon{position:absolute;top:50%;transform:translateY(-50%);padding:0}.matecu-topbar-search__icon--search{left:6px}.matecu-topbar-search__icon--clear{border:0px;background:0px;cursor:pointer;color:currentColor;right:6px}.mobile-style.matecu-topbar-search{position:absolute;top:0;left:0;right:0;border-bottom:1px solid;border-bottom-color:var(--mtb-search-border-bottom-color, #ededed);z-index:3;padding:0;margin:0;height:64px;color:var(--mtb-search-mobile-color, #000);transform:translateY(-120%);transition:all .3s ease-in-out}.mobile-style.matecu-topbar-search.active-mobile{transform:translateY(0)}.mobile-style.matecu-topbar-search input{background-color:#fff;height:100%;width:100%;border-radius:0}.mobile-style.matecu-topbar-search input::placeholder{color:var(--mtb-search-mobile-color, #000)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matecu-topbar-search', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatIconModule,
-                        MatButtonModule,
-                    ], template: "@if(display){\n<button class=\"matecu-topbar-search-mobile-only\" [ngClass]=\"{ 'mobile-style': mobileStyle }\"\n  (click)=\"toggleActiveMobildeSearch()\">\n  <mat-icon>search</mat-icon>\n</button>\n<div class=\"matecu-topbar-search\" [ngClass]=\"{\n      'mobile-style': mobileStyle,\n      'active-mobile': activeMobileSearch\n    }\">\n  <span class=\"matecu-topbar-search__icon matecu-topbar-search__icon--search\">\n    <mat-icon>search</mat-icon>\n  </span>\n  @if(hasValue || mobileStyle){\n  <button class=\"matecu-topbar-search__icon matecu-topbar-search__icon--clear\" (click)=\"clearSearch()\">\n    <mat-icon>close</mat-icon>\n  </button>\n  }\n  <input type=\"text\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n</div>\n}", styles: [".matecu-topbar-search-mobile-only{display:none;border:none;background:none;cursor:pointer;color:var(--mtb-search-color, var(--mtb-bar-color, #fff));margin:var(--mtb-search-margin, 10px)}.matecu-topbar-search-mobile-only.mobile-style{display:block}.matecu-topbar-search,.matecu-topbar-search *{box-sizing:border-box;outline:none}.matecu-topbar-search{margin:var(--mtb-search-margin, 10px);position:relative;display:flex;align-items:center;color:var(--mtb-search-color, var(--mtb-bar-color, #fff));max-height:var(--bar-height, 64px)}.matecu-topbar-search input{width:var(--mtb-search-width, 200px);min-width:var(--mtb-search-width, 200px);height:var(--mtb-search-height, 40px);padding:var(--mtb-search-pading, 3px 35px);border-radius:4px;border:1px solid;border:var(--mtb-search-border, none);background-color:var(--search-background-color, rgba(255, 255, 255, .3019607843));color:currentColor;transition:all .3s ease-in-out}.matecu-topbar-search input::placeholder{color:var(--mtb-search-color, var(--mtb-bar-color, #fff));opacity:1}.matecu-topbar-search input:focus{min-width:var(--mtb-search-width-large, 290px)}.matecu-topbar-search__icon{position:absolute;top:50%;transform:translateY(-50%);padding:0}.matecu-topbar-search__icon--search{left:6px}.matecu-topbar-search__icon--clear{border:0px;background:0px;cursor:pointer;color:currentColor;right:6px}.mobile-style.matecu-topbar-search{position:absolute;top:0;left:0;right:0;border-bottom:1px solid;border-bottom-color:var(--mtb-search-border-bottom-color, #ededed);z-index:3;padding:0;margin:0;height:64px;color:var(--mtb-search-mobile-color, #000);transform:translateY(-120%);transition:all .3s ease-in-out}.mobile-style.matecu-topbar-search.active-mobile{transform:translateY(0)}.mobile-style.matecu-topbar-search input{background-color:#fff;height:100%;width:100%;border-radius:0}.mobile-style.matecu-topbar-search input::placeholder{color:var(--mtb-search-mobile-color, #000)}\n"] }]
-        }], propDecorators: { display: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], delyValueChanges: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], mobileStyle: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], className: [{
+            args: [{ selector: 'matecu-topbar-search', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule], template: "@if(display()){\n<button class=\"matecu-topbar-search-mobile-only\" [ngClass]=\"{ 'mobile-style': mobileStyle() }\"\n  (click)=\"toggleActiveMobildeSearch()\">\n  <mat-icon>search</mat-icon>\n</button>\n<div class=\"matecu-topbar-search\" [ngClass]=\"{\n      'mobile-style': mobileStyle(),\n      'active-mobile': activeMobileSearch\n    }\">\n  <span class=\"matecu-topbar-search__icon matecu-topbar-search__icon--search\">\n    <mat-icon>search</mat-icon>\n  </span>\n  @if(hasValue || mobileStyle()){\n  <button class=\"matecu-topbar-search__icon matecu-topbar-search__icon--clear\" (click)=\"clearSearch()\">\n    <mat-icon>close</mat-icon>\n  </button>\n  }\n  <input type=\"text\" [placeholder]=\"placeholder()\" [formControl]=\"inputCtrl\" />\n</div>\n}", styles: [".matecu-topbar-search-mobile-only{display:none;border:none;background:none;cursor:pointer;color:var(--mtb-search-color, var(--mtb-bar-color, #fff));margin:var(--mtb-search-margin, 10px)}.matecu-topbar-search-mobile-only.mobile-style{display:block}.matecu-topbar-search,.matecu-topbar-search *{box-sizing:border-box;outline:none}.matecu-topbar-search{margin:var(--mtb-search-margin, 10px);position:relative;display:flex;align-items:center;color:var(--mtb-search-color, var(--mtb-bar-color, #fff));max-height:var(--bar-height, 64px)}.matecu-topbar-search input{width:var(--mtb-search-width, 200px);min-width:var(--mtb-search-width, 200px);height:var(--mtb-search-height, 40px);padding:var(--mtb-search-pading, 3px 35px);border-radius:4px;border:1px solid;border:var(--mtb-search-border, none);background-color:var(--search-background-color, rgba(255, 255, 255, .3019607843));color:currentColor;transition:all .3s ease-in-out}.matecu-topbar-search input::placeholder{color:var(--mtb-search-color, var(--mtb-bar-color, #fff));opacity:1}.matecu-topbar-search input:focus{min-width:var(--mtb-search-width-large, 290px)}.matecu-topbar-search__icon{position:absolute;top:50%;transform:translateY(-50%);padding:0}.matecu-topbar-search__icon--search{left:6px}.matecu-topbar-search__icon--clear{border:0px;background:0px;cursor:pointer;color:currentColor;right:6px}.mobile-style.matecu-topbar-search{position:absolute;top:0;left:0;right:0;border-bottom:1px solid;border-bottom-color:var(--mtb-search-border-bottom-color, #ededed);z-index:3;padding:0;margin:0;height:64px;color:var(--mtb-search-mobile-color, #000);transform:translateY(-120%);transition:all .3s ease-in-out}.mobile-style.matecu-topbar-search.active-mobile{transform:translateY(0)}.mobile-style.matecu-topbar-search input{background-color:#fff;height:100%;width:100%;border-radius:0}.mobile-style.matecu-topbar-search input::placeholder{color:var(--mtb-search-mobile-color, #000)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], delyValueChanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "delyValueChanges", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], mobileStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileStyle", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], className: [{
                 type: HostBinding
             }], color: [{
                 type: HostBinding,
@@ -423,20 +375,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 class MatecuTopbarHeaderRowComponent {
-    display = true;
+    display = input(true, ...(ngDevMode ? [{ debugName: "display" }] : []));
     className = 'matecu-topbar-header-row';
     get color() {
-        return this.display ? 'flex' : 'none';
+        return this.display() ? 'flex' : 'none';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuTopbarHeaderRowComponent, isStandalone: true, selector: "matecu-topbar-header-row", inputs: { display: "display" }, host: { properties: { "class": "this.className", "style.display": "this.color" } }, ngImport: i0, template: "@if(display){\n<div class=\"matecu-topbar-header-row__column matecu-topbar-header-row__column--left\">\n  <ng-content select=\"matecu-topbar-header-column[left-column]\"></ng-content>\n</div>\n\n<div class=\"matecu-topbar-header-row__column matecu-topbar-header-row__column--right\">\n  <ng-content select=\"matecu-topbar-header-column[right-column]\"></ng-content>\n</div>\n}", styles: [":host{--mtb-row-padding: 0px;--mtb-row-margin: 0;--mtb-row-max-width: 100%;--mtb-row-min-width: 320px}:host,:host *,.matecu-topbar-header-row,.matecu-topbar-header-row *{box-sizing:border-box;outline:none}:host,.matecu-topbar-header-row{padding:var(--mtb-row-padding);margin:var(--mtb-row-margin);display:flex;align-items:flex-start;justify-content:flex-start;box-sizing:border-box;width:100%;height:100%;max-width:var(--mtb-row-max-width);min-width:var(--mtb-row-min-width)}:host__column,.matecu-topbar-header-row__column{display:flex;height:100%;min-height:var(--mtb-bar-height, 64px);align-items:flex-start}:host__column--right,.matecu-topbar-header-row__column--right{margin-left:auto;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatToolbarModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuTopbarHeaderRowComponent, isStandalone: true, selector: "matecu-topbar-header-row", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className", "style.display": "this.color" } }, ngImport: i0, template: "@if(display()){\n<div class=\"matecu-topbar-header-row__column matecu-topbar-header-row__column--left\">\n  <ng-content select=\"matecu-topbar-header-column[left-column]\"></ng-content>\n</div>\n\n<div class=\"matecu-topbar-header-row__column matecu-topbar-header-row__column--right\">\n  <ng-content select=\"matecu-topbar-header-column[right-column]\"></ng-content>\n</div>\n}", styles: [":host{--mtb-row-padding: 0px;--mtb-row-margin: 0;--mtb-row-max-width: 100%;--mtb-row-min-width: 320px}:host,:host *,.matecu-topbar-header-row,.matecu-topbar-header-row *{box-sizing:border-box;outline:none}:host,.matecu-topbar-header-row{padding:var(--mtb-row-padding);margin:var(--mtb-row-margin);display:flex;align-items:flex-start;justify-content:flex-start;box-sizing:border-box;width:100%;height:100%;max-width:var(--mtb-row-max-width);min-width:var(--mtb-row-min-width)}:host__column,.matecu-topbar-header-row__column{display:flex;height:100%;min-height:var(--mtb-bar-height, 64px);align-items:flex-start}:host__column--right,.matecu-topbar-header-row__column--right{margin-left:auto;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatToolbarModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarHeaderRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matecu-topbar-header-row', standalone: true, imports: [CommonModule, MatToolbarModule], template: "@if(display){\n<div class=\"matecu-topbar-header-row__column matecu-topbar-header-row__column--left\">\n  <ng-content select=\"matecu-topbar-header-column[left-column]\"></ng-content>\n</div>\n\n<div class=\"matecu-topbar-header-row__column matecu-topbar-header-row__column--right\">\n  <ng-content select=\"matecu-topbar-header-column[right-column]\"></ng-content>\n</div>\n}", styles: [":host{--mtb-row-padding: 0px;--mtb-row-margin: 0;--mtb-row-max-width: 100%;--mtb-row-min-width: 320px}:host,:host *,.matecu-topbar-header-row,.matecu-topbar-header-row *{box-sizing:border-box;outline:none}:host,.matecu-topbar-header-row{padding:var(--mtb-row-padding);margin:var(--mtb-row-margin);display:flex;align-items:flex-start;justify-content:flex-start;box-sizing:border-box;width:100%;height:100%;max-width:var(--mtb-row-max-width);min-width:var(--mtb-row-min-width)}:host__column,.matecu-topbar-header-row__column{display:flex;height:100%;min-height:var(--mtb-bar-height, 64px);align-items:flex-start}:host__column--right,.matecu-topbar-header-row__column--right{margin-left:auto;justify-content:flex-end}\n"] }]
-        }], propDecorators: { display: [{
-                type: Input
-            }], className: [{
+            args: [{ selector: 'matecu-topbar-header-row', standalone: true, imports: [CommonModule, MatToolbarModule], template: "@if(display()){\n<div class=\"matecu-topbar-header-row__column matecu-topbar-header-row__column--left\">\n  <ng-content select=\"matecu-topbar-header-column[left-column]\"></ng-content>\n</div>\n\n<div class=\"matecu-topbar-header-row__column matecu-topbar-header-row__column--right\">\n  <ng-content select=\"matecu-topbar-header-column[right-column]\"></ng-content>\n</div>\n}", styles: [":host{--mtb-row-padding: 0px;--mtb-row-margin: 0;--mtb-row-max-width: 100%;--mtb-row-min-width: 320px}:host,:host *,.matecu-topbar-header-row,.matecu-topbar-header-row *{box-sizing:border-box;outline:none}:host,.matecu-topbar-header-row{padding:var(--mtb-row-padding);margin:var(--mtb-row-margin);display:flex;align-items:flex-start;justify-content:flex-start;box-sizing:border-box;width:100%;height:100%;max-width:var(--mtb-row-max-width);min-width:var(--mtb-row-min-width)}:host__column,.matecu-topbar-header-row__column{display:flex;height:100%;min-height:var(--mtb-bar-height, 64px);align-items:flex-start}:host__column--right,.matecu-topbar-header-row__column--right{margin-left:auto;justify-content:flex-end}\n"] }]
+        }], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], className: [{
                 type: HostBinding,
                 args: ['class']
             }], color: [{
@@ -531,33 +481,25 @@ var MatecuAlertBoxType;
 
 class MatecuAlertBoxComponent {
     classNameBase = 'matecu-alert-box';
-    alertColor;
     iconValue;
-    alertIcon = false;
-    get color() {
-        return this.alertColor;
-    }
-    set color(value) {
-        this.alertColor = value;
-        if (!!value) {
-            this.className = `${this.classNameBase} ${this.classNameBase}--${value}`;
-        }
-        else {
-            this.className = this.classNameBase;
-        }
-        this.updateIcon();
-    }
-    get icon() {
-        return this.alertIcon;
-    }
-    set icon(value) {
-        this.alertIcon = value;
-    }
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
+    icon = input(false, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     className = this.classNameBase;
-    constructor() { }
+    constructor() {
+        effect(() => {
+            const colorValue = this.color();
+            if (!!colorValue) {
+                this.className = `${this.classNameBase} ${this.classNameBase}--${colorValue}`;
+            }
+            else {
+                this.className = this.classNameBase;
+            }
+            this.updateIcon(colorValue);
+        });
+    }
     ngOnInit() { }
-    updateIcon() {
-        switch (this.color) {
+    updateIcon(colorValue) {
+        switch (colorValue) {
             case MatecuAlertBoxType.danger:
                 this.iconValue = 'dangerous';
                 break;
@@ -576,16 +518,12 @@ class MatecuAlertBoxComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAlertBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuAlertBoxComponent, isStandalone: true, selector: "matecu-alert-box", inputs: { color: "color", icon: "icon" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "@if (icon && iconValue) {\n<div class=\"matecu-alert-box__icon\">\n  <mat-icon>{{iconValue}}</mat-icon>\n</div>\n}\n<div class=\"matecu-alert-box__content\">\n  <ng-content>\n\n\n  </ng-content>\n</div>", styles: [":host.matecu-alert-box{display:flex;padding:1rem;border-radius:.25rem;position:relative;border:1px solid rgb(224,224,224);box-sizing:border-box;margin:1rem 0}:host.matecu-alert-box--success{color:#0f5032;background-color:#d2e6dc;border-color:#badccd}:host.matecu-alert-box--danger{color:#821e28;background-color:#f8d7da;border-color:#f5c2c7}:host.matecu-alert-box--warning{color:#644d03;background-color:#fff3cd;border-color:#ffecb4}:host.matecu-alert-box--info{color:#055160;background-color:#cff4fc;border-color:#b6effb}:host.matecu-alert-box .matecu-alert-box__icon{display:flex;margin-right:1rem}:host.matecu-alert-box .matecu-alert-box__content{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuAlertBoxComponent, isStandalone: true, selector: "matecu-alert-box", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "@if (icon() && iconValue) {\n<div class=\"matecu-alert-box__icon\">\n  <mat-icon>{{iconValue}}</mat-icon>\n</div>\n}\n<div class=\"matecu-alert-box__content\">\n  <ng-content>\n\n\n  </ng-content>\n</div>", styles: [":host.matecu-alert-box{display:flex;padding:1rem;border-radius:.25rem;position:relative;border:1px solid rgb(224,224,224);box-sizing:border-box;margin:1rem 0}:host.matecu-alert-box--success{color:#0f5032;background-color:#d2e6dc;border-color:#badccd}:host.matecu-alert-box--danger{color:#821e28;background-color:#f8d7da;border-color:#f5c2c7}:host.matecu-alert-box--warning{color:#644d03;background-color:#fff3cd;border-color:#ffecb4}:host.matecu-alert-box--info{color:#055160;background-color:#cff4fc;border-color:#b6effb}:host.matecu-alert-box .matecu-alert-box__icon{display:flex;margin-right:1rem}:host.matecu-alert-box .matecu-alert-box__content{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAlertBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matecu-alert-box', standalone: true, imports: [CommonModule, MatIconModule], template: "@if (icon && iconValue) {\n<div class=\"matecu-alert-box__icon\">\n  <mat-icon>{{iconValue}}</mat-icon>\n</div>\n}\n<div class=\"matecu-alert-box__content\">\n  <ng-content>\n\n\n  </ng-content>\n</div>", styles: [":host.matecu-alert-box{display:flex;padding:1rem;border-radius:.25rem;position:relative;border:1px solid rgb(224,224,224);box-sizing:border-box;margin:1rem 0}:host.matecu-alert-box--success{color:#0f5032;background-color:#d2e6dc;border-color:#badccd}:host.matecu-alert-box--danger{color:#821e28;background-color:#f8d7da;border-color:#f5c2c7}:host.matecu-alert-box--warning{color:#644d03;background-color:#fff3cd;border-color:#ffecb4}:host.matecu-alert-box--info{color:#055160;background-color:#cff4fc;border-color:#b6effb}:host.matecu-alert-box .matecu-alert-box__icon{display:flex;margin-right:1rem}:host.matecu-alert-box .matecu-alert-box__content{align-self:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], className: [{
+            args: [{ selector: 'matecu-alert-box', standalone: true, imports: [CommonModule, MatIconModule], template: "@if (icon() && iconValue) {\n<div class=\"matecu-alert-box__icon\">\n  <mat-icon>{{iconValue}}</mat-icon>\n</div>\n}\n<div class=\"matecu-alert-box__content\">\n  <ng-content>\n\n\n  </ng-content>\n</div>", styles: [":host.matecu-alert-box{display:flex;padding:1rem;border-radius:.25rem;position:relative;border:1px solid rgb(224,224,224);box-sizing:border-box;margin:1rem 0}:host.matecu-alert-box--success{color:#0f5032;background-color:#d2e6dc;border-color:#badccd}:host.matecu-alert-box--danger{color:#821e28;background-color:#f8d7da;border-color:#f5c2c7}:host.matecu-alert-box--warning{color:#644d03;background-color:#fff3cd;border-color:#ffecb4}:host.matecu-alert-box--info{color:#055160;background-color:#cff4fc;border-color:#b6effb}:host.matecu-alert-box .matecu-alert-box__icon{display:flex;margin-right:1rem}:host.matecu-alert-box .matecu-alert-box__content{align-self:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -754,38 +692,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }], ctorParameters: () => [{ type: i1$2.MatSnackBar }] });
 
 class MatecuAutocomplete {
-    options = [];
-    allowCreate = false;
-    loading = false;
-    readonly = false;
-    filterFn = this.createFilterFn();
-    searchChangeDebounceTime = 300;
-    // MatFormFieldControl inputs
-    get placeholder() {
-        return this._placeholder;
+    static nextId = 0;
+    creatingFlag = false;
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    allowCreate = input(false, ...(ngDevMode ? [{ debugName: "allowCreate" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    filterFn = input(this.createFilterFn(), ...(ngDevMode ? [{ debugName: "filterFn" }] : []));
+    searchChangeDebounceTime = input(300, ...(ngDevMode ? [{ debugName: "searchChangeDebounceTime" }] : []));
+    ngControl = null;
+    focused = false;
+    lastSearchText = null;
+    inputControl = new FormControl(null);
+    filteredOptions = computed(() => {
+        const fieldValue = this.inputValueSignal() ?? '';
+        const options = this.filter(fieldValue);
+        return options;
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _placeholder = signal('', ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    stateChanges = new Subject();
+    id = `matecu-autocomplete-${MatecuAutocomplete.nextId++}`;
+    controlType = 'matecu-autocomplete';
+    autofilled = false;
+    destroy$ = new Subject();
+    internalValue = null;
+    internalValueSignal = signal(null, ...(ngDevMode ? [{ debugName: "internalValueSignal" }] : []));
+    inputValueSignal = signal(null, ...(ngDevMode ? [{ debugName: "inputValueSignal" }] : []));
+    focusMonitor;
+    elementRef;
+    injector;
+    optionMap = new Map();
+    onChange = () => { };
+    onTouched = () => { };
+    get required() {
+        return this._required();
     }
-    set placeholder(value) {
-        this._placeholder = value;
+    set required(value) {
+        this._required.set(value);
         this.stateChanges.next();
     }
-    _placeholder = '';
-    get required() {
-        return this._required;
+    get readonly() {
+        return this._readonly();
     }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
+    set readonly(value) {
+        this._readonly.set(value);
+        this.stateChanges.next();
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
+    set placeholder(value) {
+        this._placeholder.set(value);
         this.stateChanges.next();
     }
-    _required = false;
     get disabled() {
-        return this._disabled;
+        return this._disabled();
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        this.setDisabledState(this._disabled);
+        this._disabled.set(value);
+        this.setDisabledState(value);
         this.stateChanges.next();
     }
-    _disabled = false;
     get value() {
         return this.internalValue;
     }
@@ -793,27 +762,9 @@ class MatecuAutocomplete {
         this.writeValue(value);
         this.stateChanges.next();
     }
-    searchChange = new EventEmitter();
-    create = new EventEmitter();
-    valueChange = new EventEmitter();
-    // MatFormFieldControl properties
-    static nextId = 0;
-    stateChanges = new Subject();
-    id = `matecu-autocomplete-${MatecuAutocomplete.nextId++}`;
-    ngControl = null;
-    focused = false;
-    lastSearchText = null;
-    controlType = 'matecu-autocomplete';
-    autofilled = false;
-    inputControl = new FormControl(null);
-    filteredOptions$;
-    internalValue = null;
-    focusMonitor;
-    elementRef;
-    injector;
-    optionMap = new Map();
-    onChange = () => { };
-    onTouched = () => { };
+    searchChange = output();
+    create = output();
+    valueChange = output();
     get empty() {
         const isEmpty = this.inputControl.value === '' || !this.inputControl.value;
         return isEmpty;
@@ -825,17 +776,34 @@ class MatecuAutocomplete {
     get errorState() {
         return !!(this.ngControl && this.ngControl.invalid && this.ngControl.touched);
     }
-    get showCreateOption() {
-        const value = this.inputControl.value;
-        return (this.allowCreate &&
+    showCreateOption = computed(() => {
+        // se obtienen primero los valores de los signals porque al usarlos directamente en el return no se obtienen los valores actualizados,
+        //  probablemente porque el effect que actualiza esos signals no se ha ejecutado aún, entonces al obtenerlos antes se asegura que se tienen los valores más recientes para la comparación
+        const options = this.options();
+        const allowCreate = this.allowCreate();
+        const internalValue = this.internalValueSignal();
+        const value = this.inputValueSignal() ?? '';
+        const valueTrimmed = value.trim();
+        const show = allowCreate &&
             typeof value === 'string' &&
-            this.internalValue !== value &&
-            this.options.some((option) => option[1].toLowerCase() === value.toLowerCase()) === false);
-    }
+            valueTrimmed !== '' &&
+            internalValue !== valueTrimmed &&
+            options.some((option) => option[1].trim().toLowerCase() === valueTrimmed.toLowerCase()) ===
+                false;
+        return show;
+    }, ...(ngDevMode ? [{ debugName: "showCreateOption" }] : []));
     constructor(focusMonitor, elementRef, injector) {
         this.focusMonitor = focusMonitor;
         this.elementRef = elementRef;
         this.injector = injector;
+        // Inicializar el signal con el valor inicial del inputControl
+        this.inputValueSignal.set(this.inputControl.value);
+        effect(() => {
+            this.options();
+            this.rebuildOptionMap();
+            this.updateInputLabelFromValue();
+            this.stateChanges.next();
+        });
     }
     ngOnInit() {
         // Intentar obtener NgControl de forma segura
@@ -846,20 +814,15 @@ class MatecuAutocomplete {
             // Ignorar si no se puede obtener NgControl
             this.ngControl = null;
         }
-        const value$ = this.inputControl.valueChanges.pipe(startWith(this.inputControl.value ?? ''));
-        this.filteredOptions$ = combineLatest([value$]).pipe(map$1(([value]) => this.filter(value ?? '')));
         this.inputControl.valueChanges
-            .pipe(
-        // Almacena el último valor valido para la búsqueda esto se utiliza para enviar una emición para crear un elemento
-        tap$1((value) => (this.lastSearchText = value ?? this.lastSearchText)), 
-        // CUando se escribe algo se limpian los valores seleccionados para que el usuario pueda seleccionar una opción o crear una nueva
-        tap$1(() => this.clearValue()), debounceTime$1(this.searchChangeDebounceTime))
-            .subscribe((value) => {
-            queueMicrotask(() => {
-                this.searchChange.emit(value ?? '');
-            });
-        });
-        this.focusMonitor.monitor(this.elementRef, true).subscribe((focused) => {
+            .pipe(startWith(this.inputControl.value ?? ''), debounceTime$1(this.searchChangeDebounceTime()), distinctUntilChanged$1(), 
+        // InternalValueSingal se actualiza solo al seleccionar una opción, no al escribir en el input, por lo que aquí se compara con el valor del input para evitar emitir searchChange cuando se selecciona una opción
+        filter((value) => this.internalValueSignal() !== value), tap$1((value) => (this.lastSearchText = value ?? this.lastSearchText)), tap$1((value) => this.inputValueSignal.set(value)), tap$1((value) => this.searchChange.emit(value ?? '')), tap$1(() => this.clearValue()), takeUntil$1(this.destroy$))
+            .subscribe();
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe((focused) => {
             if (!!focused !== this.focused) {
                 this.focused = !!focused;
                 this.stateChanges.next();
@@ -868,6 +831,8 @@ class MatecuAutocomplete {
     }
     ngOnDestroy() {
         this.stateChanges.complete();
+        this.destroy$.next();
+        this.destroy$.complete();
         this.focusMonitor.stopMonitoring(this.elementRef);
     }
     ngDoCheck() {
@@ -879,17 +844,12 @@ class MatecuAutocomplete {
         }
     }
     ngOnChanges(changes) {
-        if (changes['options']) {
-            this.rebuildOptionMap();
-            this.updateInputLabelFromValue();
-            this.stateChanges.next();
-        }
-        if (changes['placeholder'] || changes['required'] || changes['disabled']) {
+        if (changes['placeholder']) {
             this.stateChanges.next();
         }
     }
     filter(search) {
-        return this.options.filter((option) => this.filterFn(option[1], search));
+        return this.options().filter((option) => this.filterFn()(option[1], search));
     }
     createFilterFn() {
         return (v1, v2) => {
@@ -899,16 +859,15 @@ class MatecuAutocomplete {
     displayLabel = (value) => {
         if (value === null || value === undefined)
             return '';
-        if (!Array.isArray(this.options)) {
-            return '';
-        }
-        return this.optionMap.get(value) ?? '';
+        const mapValue = this.optionMap.get(value) ?? (this.creatingFlag ? value : '');
+        return mapValue;
     };
     onOptionSelected(value) {
-        if (!value || this.readonly || this.disabled) {
+        if (!value || this.readonly) {
             return;
         }
         this.internalValue = value;
+        this.internalValueSignal.set(value);
         this.inputControl.setValue(value, { emitEvent: false });
         this.onChange(value);
         this.onTouched();
@@ -917,10 +876,12 @@ class MatecuAutocomplete {
     onCreateClick() {
         if (!this.lastSearchText ||
             this.lastSearchText.trim() === '' ||
-            this.options.some((option) => option[1].toLowerCase() === this.lastSearchText.toLowerCase()) ||
-            this.options.some((option) => option[1].toLowerCase() === this.lastSearchText.toLowerCase())) {
+            this.options().some((option) => option[1].toLowerCase() === this.lastSearchText.toLowerCase())) {
             return;
         }
+        this.inputValueSignal.set(this.lastSearchText);
+        this.internalValue = this.lastSearchText;
+        this.creatingFlag = true;
         this.create.emit(this.lastSearchText);
     }
     updateInputLabelFromValue() {
@@ -932,6 +893,7 @@ class MatecuAutocomplete {
     // ControlValueAccessor
     writeValue(value) {
         this.internalValue = value;
+        this.internalValueSignal.set(value);
         this.updateInputLabelFromValue();
         this.stateChanges.next();
     }
@@ -942,8 +904,8 @@ class MatecuAutocomplete {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
         isDisabled ? this.inputControl.disable() : this.inputControl.enable();
+        this._disabled.set(isDisabled);
         this.stateChanges.next();
     }
     // MatFormFieldControl methods
@@ -961,18 +923,19 @@ class MatecuAutocomplete {
     }
     rebuildOptionMap() {
         this.optionMap.clear();
-        for (const [value, label] of this.options ?? []) {
+        for (const [value, label] of this.options() ?? []) {
             this.optionMap.set(value, label);
         }
     }
     clearValue() {
         this.internalValue = null;
+        this.internalValueSignal.set(null);
         this.onChange(null);
         this.onTouched();
         this.valueChange.emit(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAutocomplete, deps: [{ token: i1$3.FocusMonitor }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuAutocomplete, isStandalone: true, selector: "matecu-autocomplete", inputs: { options: "options", allowCreate: "allowCreate", loading: "loading", readonly: "readonly", filterFn: "filterFn", searchChangeDebounceTime: "searchChangeDebounceTime", placeholder: "placeholder", required: "required", disabled: "disabled", value: "value" }, outputs: { searchChange: "searchChange", create: "create", valueChange: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuAutocomplete, isStandalone: true, selector: "matecu-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, searchChangeDebounceTime: { classPropertyName: "searchChangeDebounceTime", publicName: "searchChangeDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange", create: "create", valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: MatecuAutocomplete,
@@ -982,7 +945,7 @@ class MatecuAutocomplete {
                 provide: MatFormFieldControl,
                 useExisting: MatecuAutocomplete,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<input matInput type=\"text\" matInput [formControl]=\"inputControl\" [matAutocomplete]=\"auto\" [class.loading]=\"loading\"\n    [readonly]=\"readonly\" />\n\n\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event.option.value)\"\n    [displayWith]=\"displayLabel\">\n\n    @for (option of filteredOptions$ | async; track $index) {\n\n    <mat-option [value]=\"option[0]\">\n        {{ option[1] }}\n    </mat-option>\n\n    }\n\n    <!-- Crear nuevo -->\n    @if(allowCreate){\n\n    <mat-divider></mat-divider>\n\n    @if(showCreateOption ){\n    <mat-option (click)=\"onCreateClick()\" class=\"create-option\">\n        <span>\u2795</span><span>\" {{ inputControl.value }}\"</span>\n\n    </mat-option>\n    }\n    }\n\n</mat-autocomplete>\n\n<!-- Spinner -->\n@if(loading){\n<mat-progress-spinner class=\"loading-spinner\" diameter=\"20\" mode=\"indeterminate\"\n    style=\"position:absolute; right:10px; top:50%; transform:translateY(-50%);\">\n</mat-progress-spinner>\n}", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;box-sizing:border-box;width:100%}:host input{border:none;background-color:transparent;outline:none}:host .create-option{display:flex;justify-content:space-between;align-items:center}:host .create-option:first-child{margin-right:auto;color:green}.loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}input.loading{padding-right:40px}.create-option{font-style:italic;opacity:.85}::ng-deep .mat-mdc-option.create-option:hover{background:#0000000a}::ng-deep .mat-mdc-autocomplete-panel mat-divider{margin:4px 0}:host(.mat-mdc-input-disabled){opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<input matInput type=\"text\" matInput [formControl]=\"inputControl\" [matAutocomplete]=\"auto\" [class.loading]=\"loading()\"\n    [readonly]=\"readonly\" />\n\n\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event.option.value)\"\n    [displayWith]=\"displayLabel\">\n\n    @for (option of filteredOptions(); track $index) {\n\n    <mat-option [value]=\"option[0]\">\n        {{ option[1] }}\n    </mat-option>\n\n    }\n\n    <!-- Crear nuevo -->\n    @if(allowCreate()){\n\n    <mat-divider></mat-divider>\n\n    @if(showCreateOption() ){\n    <mat-option (click)=\"onCreateClick()\" class=\"create-option\" [value]=\"inputControl.value\">\n        <span>\u2795</span><span>\" {{ inputControl.value }}\"</span>\n\n    </mat-option>\n    }\n    }\n\n</mat-autocomplete>\n\n<!-- Spinner -->\n@if(loading()){\n<mat-progress-spinner class=\"loading-spinner\" diameter=\"20\" mode=\"indeterminate\"\n    style=\"position:absolute; right:10px; top:50%; transform:translateY(-50%);\">\n</mat-progress-spinner>\n}", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;box-sizing:border-box;width:100%}:host input{border:none;background-color:transparent;outline:none}:host .create-option{display:flex;justify-content:space-between;align-items:center}:host .create-option:first-child{margin-right:auto;color:green}.loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}input.loading{padding-right:40px}.create-option{font-style:italic;opacity:.85}::ng-deep .mat-mdc-option.create-option:hover{background:#0000000a}::ng-deep .mat-mdc-autocomplete-panel mat-divider{margin:4px 0}:host(.mat-mdc-input-disabled){opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAutocomplete, decorators: [{
             type: Component,
@@ -1003,57 +966,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             provide: MatFormFieldControl,
                             useExisting: MatecuAutocomplete,
                         },
-                    ], template: "<input matInput type=\"text\" matInput [formControl]=\"inputControl\" [matAutocomplete]=\"auto\" [class.loading]=\"loading\"\n    [readonly]=\"readonly\" />\n\n\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event.option.value)\"\n    [displayWith]=\"displayLabel\">\n\n    @for (option of filteredOptions$ | async; track $index) {\n\n    <mat-option [value]=\"option[0]\">\n        {{ option[1] }}\n    </mat-option>\n\n    }\n\n    <!-- Crear nuevo -->\n    @if(allowCreate){\n\n    <mat-divider></mat-divider>\n\n    @if(showCreateOption ){\n    <mat-option (click)=\"onCreateClick()\" class=\"create-option\">\n        <span>\u2795</span><span>\" {{ inputControl.value }}\"</span>\n\n    </mat-option>\n    }\n    }\n\n</mat-autocomplete>\n\n<!-- Spinner -->\n@if(loading){\n<mat-progress-spinner class=\"loading-spinner\" diameter=\"20\" mode=\"indeterminate\"\n    style=\"position:absolute; right:10px; top:50%; transform:translateY(-50%);\">\n</mat-progress-spinner>\n}", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;box-sizing:border-box;width:100%}:host input{border:none;background-color:transparent;outline:none}:host .create-option{display:flex;justify-content:space-between;align-items:center}:host .create-option:first-child{margin-right:auto;color:green}.loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}input.loading{padding-right:40px}.create-option{font-style:italic;opacity:.85}::ng-deep .mat-mdc-option.create-option:hover{background:#0000000a}::ng-deep .mat-mdc-autocomplete-panel mat-divider{margin:4px 0}:host(.mat-mdc-input-disabled){opacity:.6;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.FocusMonitor }, { type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { options: [{
-                type: Input
-            }], allowCreate: [{
-                type: Input
-            }], loading: [{
+                    ], template: "<input matInput type=\"text\" matInput [formControl]=\"inputControl\" [matAutocomplete]=\"auto\" [class.loading]=\"loading()\"\n    [readonly]=\"readonly\" />\n\n\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event.option.value)\"\n    [displayWith]=\"displayLabel\">\n\n    @for (option of filteredOptions(); track $index) {\n\n    <mat-option [value]=\"option[0]\">\n        {{ option[1] }}\n    </mat-option>\n\n    }\n\n    <!-- Crear nuevo -->\n    @if(allowCreate()){\n\n    <mat-divider></mat-divider>\n\n    @if(showCreateOption() ){\n    <mat-option (click)=\"onCreateClick()\" class=\"create-option\" [value]=\"inputControl.value\">\n        <span>\u2795</span><span>\" {{ inputControl.value }}\"</span>\n\n    </mat-option>\n    }\n    }\n\n</mat-autocomplete>\n\n<!-- Spinner -->\n@if(loading()){\n<mat-progress-spinner class=\"loading-spinner\" diameter=\"20\" mode=\"indeterminate\"\n    style=\"position:absolute; right:10px; top:50%; transform:translateY(-50%);\">\n</mat-progress-spinner>\n}", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;box-sizing:border-box;width:100%}:host input{border:none;background-color:transparent;outline:none}:host .create-option{display:flex;justify-content:space-between;align-items:center}:host .create-option:first-child{margin-right:auto;color:green}.loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}input.loading{padding-right:40px}.create-option{font-style:italic;opacity:.85}::ng-deep .mat-mdc-option.create-option:hover{background:#0000000a}::ng-deep .mat-mdc-autocomplete-panel mat-divider{margin:4px 0}:host(.mat-mdc-input-disabled){opacity:.6;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.FocusMonitor }, { type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], searchChangeDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchChangeDebounceTime", required: false }] }], required: [{
                 type: Input
             }], readonly: [{
                 type: Input
-            }], filterFn: [{
-                type: Input
-            }], searchChangeDebounceTime: [{
-                type: Input
             }], placeholder: [{
                 type: Input
-            }], required: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], value: [{
                 type: Input
-            }], searchChange: [{
-                type: Output
-            }], create: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }] } });
+            }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], create: [{ type: i0.Output, args: ["create"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class MatecuAutocompleteMultiple {
     static nextId = 0;
     // ================= INPUTS =================
-    placeholder = '';
-    loading = false;
-    searchChangeDebounceTime = 300;
-    enableSelectAll = true;
-    readonly = false;
-    selectAllLabel = 'Select All';
-    clearAllLabel = 'Clear All';
-    showTooltip = true;
-    filterFn = this.createFilterFn();
-    _options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
-    set options(value) {
-        this._options.set(value ?? []);
-    }
-    get options() {
-        return this._options();
+    _placeholder = input('', ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    searchChangeDebounceTime = input(300, ...(ngDevMode ? [{ debugName: "searchChangeDebounceTime" }] : []));
+    enableSelectAll = input(true, ...(ngDevMode ? [{ debugName: "enableSelectAll" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    selectAllLabel = input('Select All', ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : []));
+    clearAllLabel = input('Clear All', ...(ngDevMode ? [{ debugName: "clearAllLabel" }] : []));
+    showTooltip = input(true, ...(ngDevMode ? [{ debugName: "showTooltip" }] : []));
+    filterFn = input(this.createFilterFn(), ...(ngDevMode ? [{ debugName: "filterFn" }] : []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    // MatFormFieldControl compatibility
+    get placeholder() {
+        return this._placeholder();
     }
     // ================= OUTPUT =================
-    searchChange = new EventEmitter();
-    valueChange = new EventEmitter();
+    searchChange = output();
+    valueChange = output();
     // ================= INTERNAL CONTROL =================
     control = new FormControl([], { nonNullable: true });
     controlValue$ = toSignal(this.control.valueChanges);
@@ -1063,12 +1008,12 @@ class MatecuAutocompleteMultiple {
     searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : [])); // 🔥 AHORA SÍ existe correctamente
     filteredOptions = computed(() => {
         const filter = this.searchText();
-        return this._options().filter((o) => this.filterFn(o[1], filter) && !this.control.value.includes(o[0]));
+        return this.options().filter((o) => this.filterFn()(o[1], filter) && !this.control.value.includes(o[0]));
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
     selectedItems = computed(() => {
         const values = this.controlValue$() ?? [];
         return values.map((v) => {
-            const found = this._options().find((o) => o[0] === v);
+            const found = this.options().find((o) => o[0] === v);
             return {
                 value: v,
                 label: found ? found[1] : v,
@@ -1110,7 +1055,7 @@ class MatecuAutocompleteMultiple {
             clearTimeout(timeout);
             timeout = setTimeout(() => {
                 this.searchChange.emit(value);
-            }, this.searchChangeDebounceTime);
+            }, this.searchChangeDebounceTime());
         });
     }
     value = null;
@@ -1130,7 +1075,7 @@ class MatecuAutocompleteMultiple {
     }
     // ================= AUTOCOMPLETE =================
     selectOption(option) {
-        if (this.readonly || this.disabled)
+        if (this.readonly() || this.disabled)
             return;
         if (!Array.isArray(option))
             return;
@@ -1148,21 +1093,21 @@ class MatecuAutocompleteMultiple {
     }
     // ================= CHIP ACTIONS =================
     remove(value) {
-        if (this.readonly || this.disabled)
+        if (this.readonly() || this.disabled)
             return;
         this.control.setValue(this.control.value.filter((v) => v !== value));
     }
     selectAll() {
-        if (this.readonly || this.disabled)
+        if (this.readonly() || this.disabled)
             return;
-        const allValues = this._options().map((o) => o[0]);
+        const allValues = this.options().map((o) => o[0]);
         this.control.setValue([...new Set([...this.control.value, ...allValues])]);
         this.searchControl.setValue('');
         this.searchText.set('');
         this.autocompleteTrigger.closePanel();
     }
     clearAll() {
-        if (this.disabled || this.readonly)
+        if (this.disabled || this.readonly())
             return;
         if (this.control.value.length === 0)
             return;
@@ -1173,7 +1118,7 @@ class MatecuAutocompleteMultiple {
     }
     // ================= DRAG & DROP =================
     drop(event) {
-        if (this.disabled || this.readonly)
+        if (this.disabled || this.readonly())
             return;
         const current = [...this.control.value];
         moveItemInArray(current, event.previousIndex, event.currentIndex);
@@ -1181,7 +1126,7 @@ class MatecuAutocompleteMultiple {
     }
     // ================= KEYBOARD =================
     onKeyDown(event) {
-        if (this.readonly || this.disabled)
+        if (this.readonly() || this.disabled)
             return;
         if (event.key === 'Backspace' && !this.searchText() && this.control.value.length > 0) {
             const updated = [...this.control.value];
@@ -1226,7 +1171,7 @@ class MatecuAutocompleteMultiple {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAutocompleteMultiple, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuAutocompleteMultiple, isStandalone: true, selector: "matecu-autocomplete-multiple", inputs: { placeholder: "placeholder", loading: "loading", searchChangeDebounceTime: "searchChangeDebounceTime", enableSelectAll: "enableSelectAll", readonly: "readonly", selectAllLabel: "selectAllLabel", clearAllLabel: "clearAllLabel", showTooltip: "showTooltip", filterFn: "filterFn", options: "options" }, outputs: { searchChange: "searchChange", valueChange: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuAutocompleteMultiple, isStandalone: true, selector: "matecu-autocomplete-multiple", inputs: { _placeholder: { classPropertyName: "_placeholder", publicName: "_placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchChangeDebounceTime: { classPropertyName: "searchChangeDebounceTime", publicName: "searchChangeDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, enableSelectAll: { classPropertyName: "enableSelectAll", publicName: "enableSelectAll", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { searchChange: "searchChange", valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatecuAutocompleteMultiple),
@@ -1236,7 +1181,7 @@ class MatecuAutocompleteMultiple {
                 provide: MatFormFieldControl,
                 useExisting: MatecuAutocompleteMultiple,
             },
-        ], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "@if (loading) {\n\n<mat-progress-spinner matSuffix diameter=\"20\" mode=\"indeterminate\">\n</mat-progress-spinner>\n}\n<mat-chip-grid #chipGrid class=\"chip-list\">\n\n    @for (item of selectedItems(); track item.value) {\n\n    <mat-chip-row [removable]=\"!disabled && !readonly\" (removed)=\"remove(item.value)\"\n        [matTooltip]=\"showTooltip ? item.label : ''\" matTooltipPosition=\"above\">\n\n\n\n        {{ item.label }}\n        @if (!disabled && !readonly) {\n\n        <button matChipRemove aria-label=\"Remove {{item.label}}\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n\n    </mat-chip-row>\n    }\n\n    <input type=\"text\" matInput [formControl]=\"searchControl\" [matAutocomplete]=\"auto\" (keydown)=\"onKeyDown($event)\"\n        [placeholder]=\"placeholder\" />\n\n</mat-chip-grid>\n\n\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectOption($event.option.value)\"\n    class=\"autocomplete-large-panel\" [displayWith]=\"displayLabel\">\n\n    @if (!readonly && !disabled && (enableSelectAll || control.value.length > 0)) {\n    <mat-option>\n        <div style=\"display: flex; gap: 10px; align-items: center; justify-content: center;  \">\n\n            @if (enableSelectAll) {\n            <div>\n                <button mat-icon-button (click)=\"selectAll()\" [matTooltip]=\"selectAllLabel\">\n                    <mat-icon>select_all</mat-icon>\n                </button>\n            </div>\n\n            }\n            @if (control.value.length > 0) {\n            <div>\n\n                <button mat-icon-button (click)=\"clearAll()\" [matTooltip]=\"clearAllLabel\">\n                    <mat-icon>clear_all</mat-icon>\n                </button>\n            </div>\n            }\n        </div>\n    </mat-option>\n    }\n\n    @for (option of filteredOptions(); track $index) {\n    <mat-option [value]=\"option\">\n        {{ option[1] }}\n    </mat-option>\n    }\n</mat-autocomplete>", styles: [":host{display:inline-block;position:relative;width:100%}:host input{outline:none;border:none;background-color:transparent;width:100%}:host .clear-all-box{width:100%;display:flex;justify-content:flex-end;align-items:center}:host mat-option span{display:block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+        ], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "@if (loading()) {\n\n<mat-progress-spinner matSuffix diameter=\"20\" mode=\"indeterminate\">\n</mat-progress-spinner>\n}\n<mat-chip-grid #chipGrid class=\"chip-list\">\n\n    @for (item of selectedItems(); track item.value) {\n\n    <mat-chip-row [removable]=\"!disabled && !readonly()\" (removed)=\"remove(item.value)\"\n        [matTooltip]=\"showTooltip() ? item.label : ''\" matTooltipPosition=\"above\">\n\n\n\n        {{ item.label }}\n        @if (!disabled && !readonly()) {\n\n        <button matChipRemove aria-label=\"Remove {{item.label}}\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n\n    </mat-chip-row>\n    }\n\n    <input type=\"text\" matInput [formControl]=\"searchControl\" [matAutocomplete]=\"auto\" (keydown)=\"onKeyDown($event)\"\n        [placeholder]=\"_placeholder()\" />\n\n</mat-chip-grid>\n\n\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectOption($event.option.value)\"\n    class=\"autocomplete-large-panel\" [displayWith]=\"displayLabel\">\n\n    @if (!readonly() && !disabled && (enableSelectAll() || control.value.length > 0)) {\n    <mat-option>\n        <div style=\"display: flex; gap: 10px; align-items: center; justify-content: center;  \">\n\n            @if (enableSelectAll()) {\n            <div>\n                <button mat-icon-button (click)=\"selectAll()\" [matTooltip]=\"selectAllLabel()\">\n                    <mat-icon>select_all</mat-icon>\n                </button>\n            </div>\n\n            }\n            @if (control.value.length > 0) {\n            <div>\n\n                <button mat-icon-button (click)=\"clearAll()\" [matTooltip]=\"clearAllLabel()\">\n                    <mat-icon>clear_all</mat-icon>\n                </button>\n            </div>\n            }\n        </div>\n    </mat-option>\n    }\n\n    @for (option of filteredOptions(); track $index) {\n    <mat-option [value]=\"option\">\n        {{ option[1] }}\n    </mat-option>\n    }\n</mat-autocomplete>", styles: [":host{display:inline-block;position:relative;width:100%}:host input{outline:none;border:none;background-color:transparent;width:100%}:host .clear-all-box{width:100%;display:flex;justify-content:flex-end;align-items:center}:host mat-option span{display:block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAutocompleteMultiple, decorators: [{
             type: Component,
@@ -1260,33 +1205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             provide: MatFormFieldControl,
                             useExisting: MatecuAutocompleteMultiple,
                         },
-                    ], template: "@if (loading) {\n\n<mat-progress-spinner matSuffix diameter=\"20\" mode=\"indeterminate\">\n</mat-progress-spinner>\n}\n<mat-chip-grid #chipGrid class=\"chip-list\">\n\n    @for (item of selectedItems(); track item.value) {\n\n    <mat-chip-row [removable]=\"!disabled && !readonly\" (removed)=\"remove(item.value)\"\n        [matTooltip]=\"showTooltip ? item.label : ''\" matTooltipPosition=\"above\">\n\n\n\n        {{ item.label }}\n        @if (!disabled && !readonly) {\n\n        <button matChipRemove aria-label=\"Remove {{item.label}}\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n\n    </mat-chip-row>\n    }\n\n    <input type=\"text\" matInput [formControl]=\"searchControl\" [matAutocomplete]=\"auto\" (keydown)=\"onKeyDown($event)\"\n        [placeholder]=\"placeholder\" />\n\n</mat-chip-grid>\n\n\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectOption($event.option.value)\"\n    class=\"autocomplete-large-panel\" [displayWith]=\"displayLabel\">\n\n    @if (!readonly && !disabled && (enableSelectAll || control.value.length > 0)) {\n    <mat-option>\n        <div style=\"display: flex; gap: 10px; align-items: center; justify-content: center;  \">\n\n            @if (enableSelectAll) {\n            <div>\n                <button mat-icon-button (click)=\"selectAll()\" [matTooltip]=\"selectAllLabel\">\n                    <mat-icon>select_all</mat-icon>\n                </button>\n            </div>\n\n            }\n            @if (control.value.length > 0) {\n            <div>\n\n                <button mat-icon-button (click)=\"clearAll()\" [matTooltip]=\"clearAllLabel\">\n                    <mat-icon>clear_all</mat-icon>\n                </button>\n            </div>\n            }\n        </div>\n    </mat-option>\n    }\n\n    @for (option of filteredOptions(); track $index) {\n    <mat-option [value]=\"option\">\n        {{ option[1] }}\n    </mat-option>\n    }\n</mat-autocomplete>", styles: [":host{display:inline-block;position:relative;width:100%}:host input{outline:none;border:none;background-color:transparent;width:100%}:host .clear-all-box{width:100%;display:flex;justify-content:flex-end;align-items:center}:host mat-option span{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { placeholder: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], searchChangeDebounceTime: [{
-                type: Input
-            }], enableSelectAll: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], selectAllLabel: [{
-                type: Input
-            }], clearAllLabel: [{
-                type: Input
-            }], showTooltip: [{
-                type: Input
-            }], filterFn: [{
-                type: Input
-            }], options: [{
-                type: Input,
-                args: [{ required: true }]
-            }], searchChange: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }], autocompleteTrigger: [{
+                    ], template: "@if (loading()) {\n\n<mat-progress-spinner matSuffix diameter=\"20\" mode=\"indeterminate\">\n</mat-progress-spinner>\n}\n<mat-chip-grid #chipGrid class=\"chip-list\">\n\n    @for (item of selectedItems(); track item.value) {\n\n    <mat-chip-row [removable]=\"!disabled && !readonly()\" (removed)=\"remove(item.value)\"\n        [matTooltip]=\"showTooltip() ? item.label : ''\" matTooltipPosition=\"above\">\n\n\n\n        {{ item.label }}\n        @if (!disabled && !readonly()) {\n\n        <button matChipRemove aria-label=\"Remove {{item.label}}\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n\n    </mat-chip-row>\n    }\n\n    <input type=\"text\" matInput [formControl]=\"searchControl\" [matAutocomplete]=\"auto\" (keydown)=\"onKeyDown($event)\"\n        [placeholder]=\"_placeholder()\" />\n\n</mat-chip-grid>\n\n\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectOption($event.option.value)\"\n    class=\"autocomplete-large-panel\" [displayWith]=\"displayLabel\">\n\n    @if (!readonly() && !disabled && (enableSelectAll() || control.value.length > 0)) {\n    <mat-option>\n        <div style=\"display: flex; gap: 10px; align-items: center; justify-content: center;  \">\n\n            @if (enableSelectAll()) {\n            <div>\n                <button mat-icon-button (click)=\"selectAll()\" [matTooltip]=\"selectAllLabel()\">\n                    <mat-icon>select_all</mat-icon>\n                </button>\n            </div>\n\n            }\n            @if (control.value.length > 0) {\n            <div>\n\n                <button mat-icon-button (click)=\"clearAll()\" [matTooltip]=\"clearAllLabel()\">\n                    <mat-icon>clear_all</mat-icon>\n                </button>\n            </div>\n            }\n        </div>\n    </mat-option>\n    }\n\n    @for (option of filteredOptions(); track $index) {\n    <mat-option [value]=\"option\">\n        {{ option[1] }}\n    </mat-option>\n    }\n</mat-autocomplete>", styles: [":host{display:inline-block;position:relative;width:100%}:host input{outline:none;border:none;background-color:transparent;width:100%}:host .clear-all-box{width:100%;display:flex;justify-content:flex-end;align-items:center}:host mat-option span{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { _placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "_placeholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchChangeDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchChangeDebounceTime", required: false }] }], enableSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelectAll", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], autocompleteTrigger: [{
                 type: ViewChild,
                 args: [MatAutocompleteTrigger]
             }] } });
@@ -1317,42 +1237,42 @@ class MatecuFileInput {
     onChange;
     onTouched;
     // Inputs - Funcionalidad básica
-    optimizeImage;
-    optimizeImageToSize;
-    maxFileSize; // tamaño máximo en bytes
-    maxFiles = 1;
-    multiple = false;
-    showFileSize = false;
-    fileSizeUnit = 'AUTO';
-    displayName;
-    placeholder = 'Select a file or drag here';
-    buttonText = 'Select file';
-    changeSelectedFileText = 'Change selected file(s)';
-    loadingText = 'Processing...';
-    ariaLabel;
+    optimizeImage = input(undefined, ...(ngDevMode ? [{ debugName: "optimizeImage" }] : []));
+    optimizeImageToSize = input(undefined, ...(ngDevMode ? [{ debugName: "optimizeImageToSize" }] : []));
+    maxFileSize = input(undefined, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : [])); // tamaño máximo en bytes
+    maxFiles = input(1, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    showFileSize = input(false, ...(ngDevMode ? [{ debugName: "showFileSize" }] : []));
+    fileSizeUnit = input('AUTO', ...(ngDevMode ? [{ debugName: "fileSizeUnit" }] : []));
+    displayName = input(undefined, ...(ngDevMode ? [{ debugName: "displayName" }] : []));
+    placeholder = input('Select a file or drag here', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    buttonText = input('Select file', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
+    changeSelectedFileText = input('Change selected file(s)', ...(ngDevMode ? [{ debugName: "changeSelectedFileText" }] : []));
+    loadingText = input('Processing...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     // Inputs - Validación
-    acceptedMimeTypes = [];
-    acceptedExtensions = [];
-    errorMessages = {
+    acceptedMimeTypes = input([], ...(ngDevMode ? [{ debugName: "acceptedMimeTypes" }] : []));
+    acceptedExtensions = input([], ...(ngDevMode ? [{ debugName: "acceptedExtensions" }] : []));
+    errorMessages = input({
         invalidSize: 'File exceeds maximum allowed size',
         invalidType: 'File type not allowed',
         tooManyFiles: 'Maximum number of files exceeded',
         uploadError: 'Error processing file',
-    };
+    }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     // Inputs - UI/UX
-    enableDragDrop = true;
-    showPreview = false;
-    previewMaxWidth = 200;
-    previewMaxHeight = 200;
-    showProgress = false;
+    enableDragDrop = input(true, ...(ngDevMode ? [{ debugName: "enableDragDrop" }] : []));
+    showPreview = input(false, ...(ngDevMode ? [{ debugName: "showPreview" }] : []));
+    previewMaxWidth = input(200, ...(ngDevMode ? [{ debugName: "previewMaxWidth" }] : []));
+    previewMaxHeight = input(200, ...(ngDevMode ? [{ debugName: "previewMaxHeight" }] : []));
+    showProgress = input(false, ...(ngDevMode ? [{ debugName: "showProgress" }] : []));
     // Outputs
-    fileSelected = new EventEmitter();
-    filesSelected = new EventEmitter();
-    fileRemoved = new EventEmitter();
-    validationError = new EventEmitter();
-    dragEnter = new EventEmitter();
-    dragLeave = new EventEmitter();
-    stateChange = new EventEmitter();
+    fileSelected = output();
+    filesSelected = output();
+    fileRemoved = output();
+    validationError = output();
+    dragEnter = output();
+    dragLeave = output();
+    stateChange = output();
     // ControlValueAccessor Methods
     writeValue(value) {
         if (value instanceof File) {
@@ -1427,7 +1347,7 @@ class MatecuFileInput {
             URL.revokeObjectURL(previewUrl);
             this.previewUrls.delete(fileKey);
         }
-        if (this.multiple) {
+        if (this.multiple()) {
             this.files = this.files.filter((file) => file !== fileToRemove);
             this.notifyChange(this.files.length > 0 ? this.files : null);
             this.filesSelected.emit([...this.files]);
@@ -1446,8 +1366,8 @@ class MatecuFileInput {
         this.validationErrors = [];
         try {
             // Validar número máximo de archivos
-            if (selectedFiles.length > this.maxFiles) {
-                this.validationErrors.push(this.errorMessages.tooManyFiles);
+            if (selectedFiles.length > this.maxFiles()) {
+                this.validationErrors.push(this.errorMessages().tooManyFiles);
                 this.changeState(FileInputState.ERROR);
                 return;
             }
@@ -1465,7 +1385,7 @@ class MatecuFileInput {
                     }
                 }
                 catch (error) {
-                    this.validationErrors.push(this.errorMessages.uploadError);
+                    this.validationErrors.push(this.errorMessages().uploadError);
                 }
             }
             if (this.validationErrors.length > 0) {
@@ -1474,7 +1394,7 @@ class MatecuFileInput {
                 return;
             }
             if (processedFiles.length > 0) {
-                if (this.multiple) {
+                if (this.multiple()) {
                     this.files = processedFiles;
                     this.filesSelected.emit([...this.files]);
                     this.notifyChange(this.files);
@@ -1489,14 +1409,14 @@ class MatecuFileInput {
             }
         }
         catch (error) {
-            this.validationErrors.push(this.errorMessages.uploadError);
+            this.validationErrors.push(this.errorMessages().uploadError);
             this.validationError.emit([...this.validationErrors]);
             this.changeState(FileInputState.ERROR);
         }
     }
     handleSingleFile(file) {
         this.file = file;
-        this.fileName = this.displayName || file.name;
+        this.fileName = this.displayName() || file.name;
         this.selectedFileSize = this.calculateFileSizeInMB(file);
         this.generatePreview(file);
     }
@@ -1506,9 +1426,10 @@ class MatecuFileInput {
         this.fileName = files.length > 0 ? `${files.length} file(s) selected` : undefined;
     }
     async processFile(file) {
-        if (this.optimizeImage && file.type.includes('image') && this.optimizeImageToSize) {
+        const optimizeImage = this.optimizeImage();
+        if (optimizeImage && file.type.includes('image') && this.optimizeImageToSize()) {
             try {
-                return await this.optimizeImage(file);
+                return await optimizeImage(file);
             }
             catch (error) {
                 console.warn('Error optimizing image:', error);
@@ -1520,20 +1441,23 @@ class MatecuFileInput {
     validateFile(file) {
         const errors = [];
         // Validar tamaño
-        if (this.maxFileSize && file.size > this.maxFileSize) {
-            errors.push(this.errorMessages.invalidSize);
+        const maxFileSize = this.maxFileSize();
+        if (maxFileSize && file.size > maxFileSize) {
+            errors.push(this.errorMessages().invalidSize);
         }
         // Validar tipo MIME
-        if (this.acceptedMimeTypes.length > 0) {
-            if (!this.acceptedMimeTypes.some((type) => file.type.includes(type))) {
-                errors.push(this.errorMessages.invalidType);
+        const acceptedMimeTypes = this.acceptedMimeTypes();
+        if (acceptedMimeTypes.length > 0) {
+            if (!acceptedMimeTypes.some((type) => file.type.includes(type))) {
+                errors.push(this.errorMessages().invalidType);
             }
         }
         // Validar extensión
-        if (this.acceptedExtensions.length > 0) {
+        const acceptedExtensions = this.acceptedExtensions();
+        if (acceptedExtensions.length > 0) {
             const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
-            if (!this.acceptedExtensions.some((ext) => ext.toLowerCase() === fileExtension)) {
-                errors.push(this.errorMessages.invalidType);
+            if (!acceptedExtensions.some((ext) => ext.toLowerCase() === fileExtension)) {
+                errors.push(this.errorMessages().invalidType);
             }
         }
         return {
@@ -1543,7 +1467,7 @@ class MatecuFileInput {
     }
     generatePreview(file) {
         this.cleanupPreview();
-        if (this.showPreview && file.type.startsWith('image/')) {
+        if (this.showPreview() && file.type.startsWith('image/')) {
             const reader = new FileReader();
             reader.onload = (e) => {
                 this.previewUrl = e.target?.result;
@@ -1601,8 +1525,9 @@ class MatecuFileInput {
         const k = 1024;
         const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB'];
         // Si se especifica una unidad específica, usarla
-        if (this.fileSizeUnit !== 'AUTO') {
-            const targetUnitIndex = sizes.indexOf(this.fileSizeUnit);
+        const fileSizeUnit = this.fileSizeUnit();
+        if (fileSizeUnit !== 'AUTO') {
+            const targetUnitIndex = sizes.indexOf(fileSizeUnit);
             if (targetUnitIndex !== -1) {
                 const size = bytes / Math.pow(k, targetUnitIndex);
                 const formattedSize = targetUnitIndex === 0 ? size.toString() : size.toFixed(2);
@@ -1652,16 +1577,16 @@ class MatecuFileInput {
         return this.currentState === FileInputState.LOADING;
     }
     get hasFiles() {
-        return this.multiple ? this.files.length > 0 : !!this.file;
+        return this.multiple() ? this.files.length > 0 : !!this.file;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuFileInput, isStandalone: true, selector: "matecu-file-input", inputs: { optimizeImage: "optimizeImage", optimizeImageToSize: "optimizeImageToSize", maxFileSize: "maxFileSize", maxFiles: "maxFiles", multiple: "multiple", showFileSize: "showFileSize", fileSizeUnit: "fileSizeUnit", displayName: "displayName", placeholder: "placeholder", buttonText: "buttonText", changeSelectedFileText: "changeSelectedFileText", loadingText: "loadingText", ariaLabel: "ariaLabel", acceptedMimeTypes: "acceptedMimeTypes", acceptedExtensions: "acceptedExtensions", errorMessages: "errorMessages", enableDragDrop: "enableDragDrop", showPreview: "showPreview", previewMaxWidth: "previewMaxWidth", previewMaxHeight: "previewMaxHeight", showProgress: "showProgress" }, outputs: { fileSelected: "fileSelected", filesSelected: "filesSelected", fileRemoved: "fileRemoved", validationError: "validationError", dragEnter: "dragEnter", dragLeave: "dragLeave", stateChange: "stateChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuFileInput, isStandalone: true, selector: "matecu-file-input", inputs: { optimizeImage: { classPropertyName: "optimizeImage", publicName: "optimizeImage", isSignal: true, isRequired: false, transformFunction: null }, optimizeImageToSize: { classPropertyName: "optimizeImageToSize", publicName: "optimizeImageToSize", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showFileSize: { classPropertyName: "showFileSize", publicName: "showFileSize", isSignal: true, isRequired: false, transformFunction: null }, fileSizeUnit: { classPropertyName: "fileSizeUnit", publicName: "fileSizeUnit", isSignal: true, isRequired: false, transformFunction: null }, displayName: { classPropertyName: "displayName", publicName: "displayName", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, changeSelectedFileText: { classPropertyName: "changeSelectedFileText", publicName: "changeSelectedFileText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptedMimeTypes: { classPropertyName: "acceptedMimeTypes", publicName: "acceptedMimeTypes", isSignal: true, isRequired: false, transformFunction: null }, acceptedExtensions: { classPropertyName: "acceptedExtensions", publicName: "acceptedExtensions", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, enableDragDrop: { classPropertyName: "enableDragDrop", publicName: "enableDragDrop", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, previewMaxWidth: { classPropertyName: "previewMaxWidth", publicName: "previewMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, previewMaxHeight: { classPropertyName: "previewMaxHeight", publicName: "previewMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", filesSelected: "filesSelected", fileRemoved: "fileRemoved", validationError: "validationError", dragEnter: "dragEnter", dragLeave: "dragLeave", stateChange: "stateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: MatecuFileInput,
             },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<!-- Hidden file input -->\n<input type=\"file\" #fileInput (change)=\"onFileChange($event)\" [multiple]=\"multiple\" [disabled]=\"isDisabled\"\n    [attr.aria-label]=\"ariaLabel || 'Select file'\" [attr.aria-describedby]=\"hasErrors ? 'file-input-errors' : null\"\n    [accept]=\"acceptedMimeTypes.join(',')\" />\n\n<!-- Main drop zone and file display -->\n<div class=\"file-input-container\" [class.drag-over]=\"isDragOver\" [class.disabled]=\"isDisabled\"\n    [class.has-files]=\"hasFiles\" [class.has-errors]=\"hasErrors\" [class.loading]=\"isLoading\"\n    (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\"\n    (click)=\"openFileDialog()\">\n    <!-- Loading state -->\n    @if (isLoading) {\n    <div class=\"loading-container\">\n        <div class=\"spinner\"></div>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n    </div>\n    }\n\n    <!-- Empty state / Drop zone -->\n    @if (!hasFiles && !isLoading) {\n    <div class=\"drop-zone\">\n        <div class=\"drop-zone-icon\">\n            \uD83D\uDCC1\n        </div>\n        <div class=\"drop-zone-content\">\n            <p class=\"drop-zone-title\">{{ placeholder }}</p>\n            <button type=\"button\" class=\"select-button\" [disabled]=\"isDisabled\"\n                (click)=\"openFileDialog(); $event.stopPropagation()\">\n                {{ buttonText }}\n            </button>\n            @if (enableDragDrop && !isDisabled) {\n            }\n        </div>\n    </div>\n    }\n\n    <!-- Single file display -->\n    @if (!multiple && file && !isLoading) {\n    <div class=\"single-file-display\">\n        <div class=\"file-info\">\n            <!-- File preview -->\n            @if (showPreview && file.type.startsWith('image/')) {\n            <div class=\"file-preview\">\n                <img [src]=\"getPreviewUrl(file)\" [alt]=\"file.name\" [style.max-width.px]=\"previewMaxWidth\"\n                    [style.max-height.px]=\"previewMaxHeight\" />\n            </div>\n            } @else {\n            <div class=\"file-icon\">\n                {{ getFileIcon(file) }}\n            </div>\n            }\n\n            <div class=\"file-details\">\n                <h3 class=\"file-name\">{{ displayName || file.name }}</h3>\n                @if (showFileSize && selectedFileSize) {\n                <p class=\"file-size\">\n                    {{ formatFileSize(file) }}\n                </p>\n                }\n                <p class=\"file-type\">{{ file.type || 'Unknown type' }}</p>\n            </div>\n        </div>\n\n        <button type=\"button\" class=\"remove-file-button\" (click)=\"removeFile(file); $event.stopPropagation()\"\n            [attr.aria-label]=\"'Remove ' + file.name\">\n            \u2715\n        </button>\n    </div>\n    }\n\n    <!-- Multiple files display -->\n    @if (multiple && files.length > 0 && !isLoading) {\n    <div class=\"multiple-files-display\">\n        <div class=\"files-header\">\n            @if (maxFiles > 1) {\n            <span class=\"files-counter\">{{ files.length }} / {{ maxFiles }}</span>\n            }\n        </div>\n\n        <div class=\"files-list\">\n            @for (file of files; track file.name + file.size; let i = $index) {\n            <div class=\"file-item\">\n                <!-- File preview -->\n                @if (showPreview && file.type.startsWith('image/')) {\n                <div class=\"file-preview-small\">\n                    <img [src]=\"getPreviewUrl(file)\" [alt]=\"file.name\" />\n                </div>\n                } @else {\n                <div class=\"file-icon-small\">\n                    {{ getFileIcon(file) }}\n                </div>\n                }\n\n                <div class=\"file-item-details\">\n                    <div class=\"file-item-name\">{{ file.name }}</div>\n                    @if (showFileSize) {\n                    <div class=\"file-item-size\">\n                        {{ formatFileSize(file) }}\n                    </div>\n                    }\n                </div>\n\n                <button type=\"button\" class=\"remove-file-button-small\"\n                    (click)=\"removeFile(file); $event.stopPropagation()\" [attr.aria-label]=\"'Remove ' + file.name\">\n                    \u2715\n                </button>\n            </div>\n            }\n        </div>\n\n        <!-- Add more files button -->\n        @if (files.length < maxFiles) { <button type=\"button\" class=\"add-more-button\"\n            (click)=\"openFileDialog(); $event.stopPropagation()\">\n            {{ changeSelectedFileText }}\n            </button>\n            }\n    </div>\n    }\n</div>\n\n<!-- Error messages -->\n@if (hasErrors) {\n<div id=\"file-input-errors\" class=\"error-messages\" role=\"alert\">\n    @for (error of validationErrors; track error) {\n    <div class=\"error-message\">{{ error }}</div>\n    }\n</div>\n}", styles: [":host{display:block;width:100%}:host>*{box-sizing:border-box}:host{--matecu-file-input-color-primary: #4f46e5;--matecu-file-input-color-primary-hover: #4338ca;--matecu-file-input-color-success: #10b981;--matecu-file-input-color-error: #ef4444;--matecu-file-input-color-error-hover: #dc2626;--matecu-file-input-color-loading: #8b5cf6;--matecu-file-input-color-disabled: #9ca3af;--matecu-file-input-border-default: #e1e5e9;--matecu-file-input-border-hover: var(--matecu-file-input-color-primary);--matecu-file-input-border-success: var(--matecu-file-input-color-success);--matecu-file-input-border-error: var(--matecu-file-input-color-error);--matecu-file-input-border-loading: var(--matecu-file-input-color-loading);--matecu-file-input-border-separator: #e5e7eb;--matecu-file-input-bg-default: #fafbfc;--matecu-file-input-bg-hover: #f8faff;--matecu-file-input-bg-drag-over: #eef2ff;--matecu-file-input-bg-disabled: #f5f5f5;--matecu-file-input-bg-success: #f0fdf4;--matecu-file-input-bg-error: #fef2f2;--matecu-file-input-bg-loading: #faf5ff;--matecu-file-input-bg-surface: #ffffff;--matecu-file-input-bg-surface-alt: #f3f4f6;--matecu-file-input-text-primary: #111827;--matecu-file-input-text-secondary: #374151;--matecu-file-input-text-muted: #6b7280;--matecu-file-input-text-disabled: #9ca3af;--matecu-file-input-text-on-primary: #ffffff;--matecu-file-input-text-error: #dc2626;--matecu-file-input-button-primary-bg: var(--matecu-file-input-color-primary);--matecu-file-input-button-primary-bg-hover: var(--matecu-file-input-color-primary-hover);--matecu-file-input-button-primary-text: var(--matecu-file-input-text-on-primary);--matecu-file-input-button-danger-bg: var(--matecu-file-input-color-error);--matecu-file-input-button-danger-bg-hover: var(--matecu-file-input-color-error-hover);--matecu-file-input-button-danger-text: var(--matecu-file-input-text-on-primary);--matecu-file-input-button-disabled-bg: var(--matecu-file-input-color-disabled);--matecu-file-input-spinner-track: #e5e7eb;--matecu-file-input-spinner-fill: var(--matecu-file-input-color-loading);--matecu-file-input-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--matecu-file-input-shadow-md: 0 1px 3px rgba(0, 0, 0, .1);--matecu-file-input-border-radius-sm: 4px;--matecu-file-input-border-radius-md: 6px;--matecu-file-input-border-radius-lg: 8px;--matecu-file-input-border-radius-xl: 12px;--matecu-file-input-border-width: 2px}:host input[type=file]{display:none}.file-input-container{position:relative;border:var(--matecu-file-input-border-width) dashed var(--matecu-file-input-border-default);border-radius:var(--matecu-file-input-border-radius-lg);padding:24px;transition:all .3s ease;background-color:var(--matecu-file-input-bg-default);cursor:pointer;min-height:120px;display:flex;align-items:center;justify-content:center}.file-input-container:hover:not(.disabled){border-color:var(--matecu-file-input-border-hover);background-color:var(--matecu-file-input-bg-hover)}.file-input-container.drag-over{border-color:var(--matecu-file-input-border-hover);background-color:var(--matecu-file-input-bg-drag-over);transform:scale(1.02)}.file-input-container.disabled{opacity:.6;cursor:not-allowed;background-color:var(--matecu-file-input-bg-disabled)}.file-input-container.has-files{border-style:solid;border-color:var(--matecu-file-input-border-success);background-color:var(--matecu-file-input-bg-success)}.file-input-container.has-errors{border-color:var(--matecu-file-input-border-error);background-color:var(--matecu-file-input-bg-error)}.file-input-container.loading{border-color:var(--matecu-file-input-border-loading);background-color:var(--matecu-file-input-bg-loading)}.loading-container{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--matecu-file-input-text-muted)}.loading-container .spinner{width:32px;height:32px;border:3px solid var(--matecu-file-input-spinner-track);border-top:3px solid var(--matecu-file-input-spinner-fill);border-radius:50%;animation:spin 1s linear infinite}.loading-container .loading-text{font-size:14px;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drop-zone{text-align:center;width:100%}.drop-zone .drop-zone-icon{font-size:48px;margin-bottom:16px}.drop-zone .drop-zone-content .drop-zone-title{font-size:16px;font-weight:600;color:var(--matecu-file-input-text-secondary);margin-bottom:12px}.drop-zone .drop-zone-content .drop-zone-subtitle{font-size:14px;color:var(--matecu-file-input-text-muted);margin-top:8px}.drop-zone .select-button{background-color:var(--matecu-file-input-button-primary-bg);color:var(--matecu-file-input-button-primary-text);border:none;padding:12px 24px;border-radius:var(--matecu-file-input-border-radius-md);font-weight:500;cursor:pointer;transition:background-color .2s ease}.drop-zone .select-button:hover:not(:disabled){background-color:var(--matecu-file-input-button-primary-bg-hover)}.drop-zone .select-button:disabled{background-color:var(--matecu-file-input-button-disabled-bg);cursor:not-allowed}.single-file-display{box-sizing:border-box;display:grid;grid-template-columns:1fr 32px;align-items:center;justify-content:space-between;width:100%;padding:16px;background-color:var(--matecu-file-input-bg-surface);border-radius:var(--matecu-file-input-border-radius-md);box-shadow:var(--matecu-file-input-shadow-md)}.single-file-display .file-info{display:flex;align-items:center;gap:16px;overflow:hidden}.single-file-display .file-info .file-preview img{border-radius:var(--matecu-file-input-border-radius-sm);object-fit:cover}.single-file-display .file-info .file-icon{width:48px;height:48px;background-color:var(--matecu-file-input-bg-surface-alt);border-radius:var(--matecu-file-input-border-radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--matecu-file-input-text-muted)}.single-file-display .file-info .file-details{max-width:calc(100% - 64px)}.single-file-display .file-info .file-details .file-name{max-width:100%;font-size:16px;font-weight:600;color:var(--matecu-file-input-text-primary);margin:0 0 4px;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.single-file-display .file-info .file-details .file-size{font-size:14px;color:var(--matecu-file-input-text-muted);margin:0 0 2px}.single-file-display .file-info .file-details .file-type{font-size:12px;color:var(--matecu-file-input-text-disabled);margin:0}.single-file-display .remove-file-button{background-color:var(--matecu-file-input-button-danger-bg);color:var(--matecu-file-input-button-danger-text);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background-color .2s ease}.single-file-display .remove-file-button:hover{background-color:var(--matecu-file-input-button-danger-bg-hover)}.multiple-files-display{width:100%}.multiple-files-display .files-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--matecu-file-input-border-separator)}.multiple-files-display .files-header h3{font-size:16px;font-weight:600;color:var(--matecu-file-input-text-primary);margin:0}.multiple-files-display .files-header .files-counter{font-size:14px;color:var(--matecu-file-input-text-muted);background-color:var(--matecu-file-input-bg-surface-alt);padding:4px 8px;border-radius:var(--matecu-file-input-border-radius-xl)}.multiple-files-display .files-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.multiple-files-display .file-item{display:flex;align-items:center;gap:12px;padding:12px;background-color:var(--matecu-file-input-bg-surface);border-radius:var(--matecu-file-input-border-radius-md);box-shadow:var(--matecu-file-input-shadow-sm);border:1px solid var(--matecu-file-input-border-separator)}.multiple-files-display .file-item .file-preview-small,.multiple-files-display .file-item .file-icon-small{width:32px;height:32px;background-color:var(--matecu-file-input-bg-surface-alt);border-radius:var(--matecu-file-input-border-radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--matecu-file-input-text-muted);flex-shrink:0}.multiple-files-display .file-item .file-preview-small img,.multiple-files-display .file-item .file-icon-small img{width:100%;height:100%;object-fit:cover;border-radius:var(--matecu-file-input-border-radius-sm)}.multiple-files-display .file-item .file-item-details{flex:1;min-width:0}.multiple-files-display .file-item .file-item-details .file-item-name{font-size:14px;font-weight:500;color:var(--matecu-file-input-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiple-files-display .file-item .file-item-details .file-item-size{font-size:12px;color:var(--matecu-file-input-text-muted)}.multiple-files-display .file-item .remove-file-button-small{background-color:var(--matecu-file-input-button-danger-bg);color:var(--matecu-file-input-button-danger-text);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:background-color .2s ease}.multiple-files-display .file-item .remove-file-button-small:hover{background-color:var(--matecu-file-input-button-danger-bg-hover)}.multiple-files-display .add-more-button{width:100%;background-color:var(--matecu-file-input-bg-surface-alt);color:var(--matecu-file-input-text-muted);border:var(--matecu-file-input-border-width) dashed var(--matecu-file-input-border-separator);padding:12px;border-radius:var(--matecu-file-input-border-radius-md);cursor:pointer;font-weight:500;transition:all .2s ease}.multiple-files-display .add-more-button:hover{background-color:var(--matecu-file-input-bg-hover);border-color:var(--matecu-file-input-text-disabled)}.error-messages{margin-top:12px}.error-messages .error-message{background-color:var(--matecu-file-input-bg-error);color:var(--matecu-file-input-text-error);padding:8px 12px;border-radius:var(--matecu-file-input-border-radius-sm);border-left:4px solid var(--matecu-file-input-color-error);font-size:14px;margin-bottom:4px}.error-messages .error-message:last-child{margin-bottom:0}@media(max-width:640px){.file-input-container{padding:16px;min-height:100px}.single-file-display .file-info{gap:12px}}@media screen and (max-width:640px)and (max-width:425px){.single-file-display .file-info{flex-direction:column}}@media(max-width:640px){.single-file-display .file-info .file-icon,.single-file-display .file-info .file-preview{width:40px;height:40px}}@media screen and (max-width:640px)and (max-width:425px){.single-file-display .file-info .file-icon,.single-file-display .file-info .file-preview{width:60px;height:60px}}@media(max-width:640px){.single-file-display .file-info .file-icon img,.single-file-display .file-info .file-preview img{width:100%;height:100%;object-fit:cover}.files-header{flex-direction:column;align-items:flex-start;gap:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<!-- Hidden file input -->\n<input type=\"file\" #fileInput (change)=\"onFileChange($event)\" [multiple]=\"multiple()\" [disabled]=\"isDisabled\"\n    [attr.aria-label]=\"ariaLabel() || 'Select file'\" [attr.aria-describedby]=\"hasErrors ? 'file-input-errors' : null\"\n    [accept]=\"acceptedMimeTypes().join(',')\" />\n\n<!-- Main drop zone and file display -->\n<div class=\"file-input-container\" [class.drag-over]=\"isDragOver\" [class.disabled]=\"isDisabled\"\n    [class.has-files]=\"hasFiles\" [class.has-errors]=\"hasErrors\" [class.loading]=\"isLoading\"\n    (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\"\n    (click)=\"openFileDialog()\">\n    <!-- Loading state -->\n    @if (isLoading) {\n    <div class=\"loading-container\">\n        <div class=\"spinner\"></div>\n        <span class=\"loading-text\">{{ loadingText() }}</span>\n    </div>\n    }\n\n    <!-- Empty state / Drop zone -->\n    @if (!hasFiles && !isLoading) {\n    <div class=\"drop-zone\">\n        <div class=\"drop-zone-icon\">\n            \uD83D\uDCC1\n        </div>\n        <div class=\"drop-zone-content\">\n            <p class=\"drop-zone-title\">{{ placeholder() }}</p>\n            <button type=\"button\" class=\"select-button\" [disabled]=\"isDisabled\"\n                (click)=\"openFileDialog(); $event.stopPropagation()\">\n                {{ buttonText() }}\n            </button>\n            @if (enableDragDrop() && !isDisabled) {\n            }\n        </div>\n    </div>\n    }\n\n    <!-- Single file display -->\n    @if (!multiple() && file && !isLoading) {\n    <div class=\"single-file-display\">\n        <div class=\"file-info\">\n            <!-- File preview -->\n            @if (showPreview() && file.type.startsWith('image/')) {\n            <div class=\"file-preview\">\n                <img [src]=\"getPreviewUrl(file)\" [alt]=\"file.name\" [style.max-width.px]=\"previewMaxWidth()\"\n                    [style.max-height.px]=\"previewMaxHeight()\" />\n            </div>\n            } @else {\n            <div class=\"file-icon\">\n                {{ getFileIcon(file) }}\n            </div>\n            }\n\n            <div class=\"file-details\">\n                <h3 class=\"file-name\">{{ displayName() || file.name }}</h3>\n                @if (showFileSize() && selectedFileSize) {\n                <p class=\"file-size\">\n                    {{ formatFileSize(file) }}\n                </p>\n                }\n                <p class=\"file-type\">{{ file.type || 'Unknown type' }}</p>\n            </div>\n        </div>\n\n        <button type=\"button\" class=\"remove-file-button\" (click)=\"removeFile(file); $event.stopPropagation()\"\n            [attr.aria-label]=\"'Remove ' + file.name\">\n            \u2715\n        </button>\n    </div>\n    }\n\n    <!-- Multiple files display -->\n    @if (multiple() && files.length > 0 && !isLoading) {\n    <div class=\"multiple-files-display\">\n        <div class=\"files-header\">\n            @if (maxFiles() > 1) {\n            <span class=\"files-counter\">{{ files.length }} / {{ maxFiles() }}</span>\n            }\n        </div>\n\n        <div class=\"files-list\">\n            @for (file of files; track file.name + file.size; let i = $index) {\n            <div class=\"file-item\">\n                <!-- File preview -->\n                @if (showPreview() && file.type.startsWith('image/')) {\n                <div class=\"file-preview-small\">\n                    <img [src]=\"getPreviewUrl(file)\" [alt]=\"file.name\" />\n                </div>\n                } @else {\n                <div class=\"file-icon-small\">\n                    {{ getFileIcon(file) }}\n                </div>\n                }\n\n                <div class=\"file-item-details\">\n                    <div class=\"file-item-name\">{{ file.name }}</div>\n                    @if (showFileSize()) {\n                    <div class=\"file-item-size\">\n                        {{ formatFileSize(file) }}\n                    </div>\n                    }\n                </div>\n\n                <button type=\"button\" class=\"remove-file-button-small\"\n                    (click)=\"removeFile(file); $event.stopPropagation()\" [attr.aria-label]=\"'Remove ' + file.name\">\n                    \u2715\n                </button>\n            </div>\n            }\n        </div>\n\n        <!-- Add more files button -->\n        @if (files.length < maxFiles()) { <button type=\"button\" class=\"add-more-button\"\n            (click)=\"openFileDialog(); $event.stopPropagation()\">\n            {{ changeSelectedFileText() }}\n            </button>\n            }\n    </div>\n    }\n</div>\n\n<!-- Error messages -->\n@if (hasErrors) {\n<div id=\"file-input-errors\" class=\"error-messages\" role=\"alert\">\n    @for (error of validationErrors; track error) {\n    <div class=\"error-message\">{{ error }}</div>\n    }\n</div>\n}", styles: [":host{display:block;width:100%}:host>*{box-sizing:border-box}:host{--matecu-file-input-color-primary: #4f46e5;--matecu-file-input-color-primary-hover: #4338ca;--matecu-file-input-color-success: #10b981;--matecu-file-input-color-error: #ef4444;--matecu-file-input-color-error-hover: #dc2626;--matecu-file-input-color-loading: #8b5cf6;--matecu-file-input-color-disabled: #9ca3af;--matecu-file-input-border-default: #e1e5e9;--matecu-file-input-border-hover: var(--matecu-file-input-color-primary);--matecu-file-input-border-success: var(--matecu-file-input-color-success);--matecu-file-input-border-error: var(--matecu-file-input-color-error);--matecu-file-input-border-loading: var(--matecu-file-input-color-loading);--matecu-file-input-border-separator: #e5e7eb;--matecu-file-input-bg-default: #fafbfc;--matecu-file-input-bg-hover: #f8faff;--matecu-file-input-bg-drag-over: #eef2ff;--matecu-file-input-bg-disabled: #f5f5f5;--matecu-file-input-bg-success: #f0fdf4;--matecu-file-input-bg-error: #fef2f2;--matecu-file-input-bg-loading: #faf5ff;--matecu-file-input-bg-surface: #ffffff;--matecu-file-input-bg-surface-alt: #f3f4f6;--matecu-file-input-text-primary: #111827;--matecu-file-input-text-secondary: #374151;--matecu-file-input-text-muted: #6b7280;--matecu-file-input-text-disabled: #9ca3af;--matecu-file-input-text-on-primary: #ffffff;--matecu-file-input-text-error: #dc2626;--matecu-file-input-button-primary-bg: var(--matecu-file-input-color-primary);--matecu-file-input-button-primary-bg-hover: var(--matecu-file-input-color-primary-hover);--matecu-file-input-button-primary-text: var(--matecu-file-input-text-on-primary);--matecu-file-input-button-danger-bg: var(--matecu-file-input-color-error);--matecu-file-input-button-danger-bg-hover: var(--matecu-file-input-color-error-hover);--matecu-file-input-button-danger-text: var(--matecu-file-input-text-on-primary);--matecu-file-input-button-disabled-bg: var(--matecu-file-input-color-disabled);--matecu-file-input-spinner-track: #e5e7eb;--matecu-file-input-spinner-fill: var(--matecu-file-input-color-loading);--matecu-file-input-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--matecu-file-input-shadow-md: 0 1px 3px rgba(0, 0, 0, .1);--matecu-file-input-border-radius-sm: 4px;--matecu-file-input-border-radius-md: 6px;--matecu-file-input-border-radius-lg: 8px;--matecu-file-input-border-radius-xl: 12px;--matecu-file-input-border-width: 2px}:host input[type=file]{display:none}.file-input-container{position:relative;border:var(--matecu-file-input-border-width) dashed var(--matecu-file-input-border-default);border-radius:var(--matecu-file-input-border-radius-lg);padding:24px;transition:all .3s ease;background-color:var(--matecu-file-input-bg-default);cursor:pointer;min-height:120px;display:flex;align-items:center;justify-content:center}.file-input-container:hover:not(.disabled){border-color:var(--matecu-file-input-border-hover);background-color:var(--matecu-file-input-bg-hover)}.file-input-container.drag-over{border-color:var(--matecu-file-input-border-hover);background-color:var(--matecu-file-input-bg-drag-over);transform:scale(1.02)}.file-input-container.disabled{opacity:.6;cursor:not-allowed;background-color:var(--matecu-file-input-bg-disabled)}.file-input-container.has-files{border-style:solid;border-color:var(--matecu-file-input-border-success);background-color:var(--matecu-file-input-bg-success)}.file-input-container.has-errors{border-color:var(--matecu-file-input-border-error);background-color:var(--matecu-file-input-bg-error)}.file-input-container.loading{border-color:var(--matecu-file-input-border-loading);background-color:var(--matecu-file-input-bg-loading)}.loading-container{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--matecu-file-input-text-muted)}.loading-container .spinner{width:32px;height:32px;border:3px solid var(--matecu-file-input-spinner-track);border-top:3px solid var(--matecu-file-input-spinner-fill);border-radius:50%;animation:spin 1s linear infinite}.loading-container .loading-text{font-size:14px;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drop-zone{text-align:center;width:100%}.drop-zone .drop-zone-icon{font-size:48px;margin-bottom:16px}.drop-zone .drop-zone-content .drop-zone-title{font-size:16px;font-weight:600;color:var(--matecu-file-input-text-secondary);margin-bottom:12px}.drop-zone .drop-zone-content .drop-zone-subtitle{font-size:14px;color:var(--matecu-file-input-text-muted);margin-top:8px}.drop-zone .select-button{background-color:var(--matecu-file-input-button-primary-bg);color:var(--matecu-file-input-button-primary-text);border:none;padding:12px 24px;border-radius:var(--matecu-file-input-border-radius-md);font-weight:500;cursor:pointer;transition:background-color .2s ease}.drop-zone .select-button:hover:not(:disabled){background-color:var(--matecu-file-input-button-primary-bg-hover)}.drop-zone .select-button:disabled{background-color:var(--matecu-file-input-button-disabled-bg);cursor:not-allowed}.single-file-display{box-sizing:border-box;display:grid;grid-template-columns:1fr 32px;align-items:center;justify-content:space-between;width:100%;padding:16px;background-color:var(--matecu-file-input-bg-surface);border-radius:var(--matecu-file-input-border-radius-md);box-shadow:var(--matecu-file-input-shadow-md)}.single-file-display .file-info{display:flex;align-items:center;gap:16px;overflow:hidden}.single-file-display .file-info .file-preview img{border-radius:var(--matecu-file-input-border-radius-sm);object-fit:cover}.single-file-display .file-info .file-icon{width:48px;height:48px;background-color:var(--matecu-file-input-bg-surface-alt);border-radius:var(--matecu-file-input-border-radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--matecu-file-input-text-muted)}.single-file-display .file-info .file-details{max-width:calc(100% - 64px)}.single-file-display .file-info .file-details .file-name{max-width:100%;font-size:16px;font-weight:600;color:var(--matecu-file-input-text-primary);margin:0 0 4px;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.single-file-display .file-info .file-details .file-size{font-size:14px;color:var(--matecu-file-input-text-muted);margin:0 0 2px}.single-file-display .file-info .file-details .file-type{font-size:12px;color:var(--matecu-file-input-text-disabled);margin:0}.single-file-display .remove-file-button{background-color:var(--matecu-file-input-button-danger-bg);color:var(--matecu-file-input-button-danger-text);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background-color .2s ease}.single-file-display .remove-file-button:hover{background-color:var(--matecu-file-input-button-danger-bg-hover)}.multiple-files-display{width:100%}.multiple-files-display .files-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--matecu-file-input-border-separator)}.multiple-files-display .files-header h3{font-size:16px;font-weight:600;color:var(--matecu-file-input-text-primary);margin:0}.multiple-files-display .files-header .files-counter{font-size:14px;color:var(--matecu-file-input-text-muted);background-color:var(--matecu-file-input-bg-surface-alt);padding:4px 8px;border-radius:var(--matecu-file-input-border-radius-xl)}.multiple-files-display .files-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.multiple-files-display .file-item{display:flex;align-items:center;gap:12px;padding:12px;background-color:var(--matecu-file-input-bg-surface);border-radius:var(--matecu-file-input-border-radius-md);box-shadow:var(--matecu-file-input-shadow-sm);border:1px solid var(--matecu-file-input-border-separator)}.multiple-files-display .file-item .file-preview-small,.multiple-files-display .file-item .file-icon-small{width:32px;height:32px;background-color:var(--matecu-file-input-bg-surface-alt);border-radius:var(--matecu-file-input-border-radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--matecu-file-input-text-muted);flex-shrink:0}.multiple-files-display .file-item .file-preview-small img,.multiple-files-display .file-item .file-icon-small img{width:100%;height:100%;object-fit:cover;border-radius:var(--matecu-file-input-border-radius-sm)}.multiple-files-display .file-item .file-item-details{flex:1;min-width:0}.multiple-files-display .file-item .file-item-details .file-item-name{font-size:14px;font-weight:500;color:var(--matecu-file-input-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiple-files-display .file-item .file-item-details .file-item-size{font-size:12px;color:var(--matecu-file-input-text-muted)}.multiple-files-display .file-item .remove-file-button-small{background-color:var(--matecu-file-input-button-danger-bg);color:var(--matecu-file-input-button-danger-text);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:background-color .2s ease}.multiple-files-display .file-item .remove-file-button-small:hover{background-color:var(--matecu-file-input-button-danger-bg-hover)}.multiple-files-display .add-more-button{width:100%;background-color:var(--matecu-file-input-bg-surface-alt);color:var(--matecu-file-input-text-muted);border:var(--matecu-file-input-border-width) dashed var(--matecu-file-input-border-separator);padding:12px;border-radius:var(--matecu-file-input-border-radius-md);cursor:pointer;font-weight:500;transition:all .2s ease}.multiple-files-display .add-more-button:hover{background-color:var(--matecu-file-input-bg-hover);border-color:var(--matecu-file-input-text-disabled)}.error-messages{margin-top:12px}.error-messages .error-message{background-color:var(--matecu-file-input-bg-error);color:var(--matecu-file-input-text-error);padding:8px 12px;border-radius:var(--matecu-file-input-border-radius-sm);border-left:4px solid var(--matecu-file-input-color-error);font-size:14px;margin-bottom:4px}.error-messages .error-message:last-child{margin-bottom:0}@media(max-width:640px){.file-input-container{padding:16px;min-height:100px}.single-file-display .file-info{gap:12px}}@media screen and (max-width:640px)and (max-width:425px){.single-file-display .file-info{flex-direction:column}}@media(max-width:640px){.single-file-display .file-info .file-icon,.single-file-display .file-info .file-preview{width:40px;height:40px}}@media screen and (max-width:640px)and (max-width:425px){.single-file-display .file-info .file-icon,.single-file-display .file-info .file-preview{width:60px;height:60px}}@media(max-width:640px){.single-file-display .file-info .file-icon img,.single-file-display .file-info .file-preview img{width:100%;height:100%;object-fit:cover}.files-header{flex-direction:column;align-items:flex-start;gap:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuFileInput, decorators: [{
             type: Component,
@@ -1671,82 +1596,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             multi: true,
                             useExisting: MatecuFileInput,
                         },
-                    ], template: "<!-- Hidden file input -->\n<input type=\"file\" #fileInput (change)=\"onFileChange($event)\" [multiple]=\"multiple\" [disabled]=\"isDisabled\"\n    [attr.aria-label]=\"ariaLabel || 'Select file'\" [attr.aria-describedby]=\"hasErrors ? 'file-input-errors' : null\"\n    [accept]=\"acceptedMimeTypes.join(',')\" />\n\n<!-- Main drop zone and file display -->\n<div class=\"file-input-container\" [class.drag-over]=\"isDragOver\" [class.disabled]=\"isDisabled\"\n    [class.has-files]=\"hasFiles\" [class.has-errors]=\"hasErrors\" [class.loading]=\"isLoading\"\n    (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\"\n    (click)=\"openFileDialog()\">\n    <!-- Loading state -->\n    @if (isLoading) {\n    <div class=\"loading-container\">\n        <div class=\"spinner\"></div>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n    </div>\n    }\n\n    <!-- Empty state / Drop zone -->\n    @if (!hasFiles && !isLoading) {\n    <div class=\"drop-zone\">\n        <div class=\"drop-zone-icon\">\n            \uD83D\uDCC1\n        </div>\n        <div class=\"drop-zone-content\">\n            <p class=\"drop-zone-title\">{{ placeholder }}</p>\n            <button type=\"button\" class=\"select-button\" [disabled]=\"isDisabled\"\n                (click)=\"openFileDialog(); $event.stopPropagation()\">\n                {{ buttonText }}\n            </button>\n            @if (enableDragDrop && !isDisabled) {\n            }\n        </div>\n    </div>\n    }\n\n    <!-- Single file display -->\n    @if (!multiple && file && !isLoading) {\n    <div class=\"single-file-display\">\n        <div class=\"file-info\">\n            <!-- File preview -->\n            @if (showPreview && file.type.startsWith('image/')) {\n            <div class=\"file-preview\">\n                <img [src]=\"getPreviewUrl(file)\" [alt]=\"file.name\" [style.max-width.px]=\"previewMaxWidth\"\n                    [style.max-height.px]=\"previewMaxHeight\" />\n            </div>\n            } @else {\n            <div class=\"file-icon\">\n                {{ getFileIcon(file) }}\n            </div>\n            }\n\n            <div class=\"file-details\">\n                <h3 class=\"file-name\">{{ displayName || file.name }}</h3>\n                @if (showFileSize && selectedFileSize) {\n                <p class=\"file-size\">\n                    {{ formatFileSize(file) }}\n                </p>\n                }\n                <p class=\"file-type\">{{ file.type || 'Unknown type' }}</p>\n            </div>\n        </div>\n\n        <button type=\"button\" class=\"remove-file-button\" (click)=\"removeFile(file); $event.stopPropagation()\"\n            [attr.aria-label]=\"'Remove ' + file.name\">\n            \u2715\n        </button>\n    </div>\n    }\n\n    <!-- Multiple files display -->\n    @if (multiple && files.length > 0 && !isLoading) {\n    <div class=\"multiple-files-display\">\n        <div class=\"files-header\">\n            @if (maxFiles > 1) {\n            <span class=\"files-counter\">{{ files.length }} / {{ maxFiles }}</span>\n            }\n        </div>\n\n        <div class=\"files-list\">\n            @for (file of files; track file.name + file.size; let i = $index) {\n            <div class=\"file-item\">\n                <!-- File preview -->\n                @if (showPreview && file.type.startsWith('image/')) {\n                <div class=\"file-preview-small\">\n                    <img [src]=\"getPreviewUrl(file)\" [alt]=\"file.name\" />\n                </div>\n                } @else {\n                <div class=\"file-icon-small\">\n                    {{ getFileIcon(file) }}\n                </div>\n                }\n\n                <div class=\"file-item-details\">\n                    <div class=\"file-item-name\">{{ file.name }}</div>\n                    @if (showFileSize) {\n                    <div class=\"file-item-size\">\n                        {{ formatFileSize(file) }}\n                    </div>\n                    }\n                </div>\n\n                <button type=\"button\" class=\"remove-file-button-small\"\n                    (click)=\"removeFile(file); $event.stopPropagation()\" [attr.aria-label]=\"'Remove ' + file.name\">\n                    \u2715\n                </button>\n            </div>\n            }\n        </div>\n\n        <!-- Add more files button -->\n        @if (files.length < maxFiles) { <button type=\"button\" class=\"add-more-button\"\n            (click)=\"openFileDialog(); $event.stopPropagation()\">\n            {{ changeSelectedFileText }}\n            </button>\n            }\n    </div>\n    }\n</div>\n\n<!-- Error messages -->\n@if (hasErrors) {\n<div id=\"file-input-errors\" class=\"error-messages\" role=\"alert\">\n    @for (error of validationErrors; track error) {\n    <div class=\"error-message\">{{ error }}</div>\n    }\n</div>\n}", styles: [":host{display:block;width:100%}:host>*{box-sizing:border-box}:host{--matecu-file-input-color-primary: #4f46e5;--matecu-file-input-color-primary-hover: #4338ca;--matecu-file-input-color-success: #10b981;--matecu-file-input-color-error: #ef4444;--matecu-file-input-color-error-hover: #dc2626;--matecu-file-input-color-loading: #8b5cf6;--matecu-file-input-color-disabled: #9ca3af;--matecu-file-input-border-default: #e1e5e9;--matecu-file-input-border-hover: var(--matecu-file-input-color-primary);--matecu-file-input-border-success: var(--matecu-file-input-color-success);--matecu-file-input-border-error: var(--matecu-file-input-color-error);--matecu-file-input-border-loading: var(--matecu-file-input-color-loading);--matecu-file-input-border-separator: #e5e7eb;--matecu-file-input-bg-default: #fafbfc;--matecu-file-input-bg-hover: #f8faff;--matecu-file-input-bg-drag-over: #eef2ff;--matecu-file-input-bg-disabled: #f5f5f5;--matecu-file-input-bg-success: #f0fdf4;--matecu-file-input-bg-error: #fef2f2;--matecu-file-input-bg-loading: #faf5ff;--matecu-file-input-bg-surface: #ffffff;--matecu-file-input-bg-surface-alt: #f3f4f6;--matecu-file-input-text-primary: #111827;--matecu-file-input-text-secondary: #374151;--matecu-file-input-text-muted: #6b7280;--matecu-file-input-text-disabled: #9ca3af;--matecu-file-input-text-on-primary: #ffffff;--matecu-file-input-text-error: #dc2626;--matecu-file-input-button-primary-bg: var(--matecu-file-input-color-primary);--matecu-file-input-button-primary-bg-hover: var(--matecu-file-input-color-primary-hover);--matecu-file-input-button-primary-text: var(--matecu-file-input-text-on-primary);--matecu-file-input-button-danger-bg: var(--matecu-file-input-color-error);--matecu-file-input-button-danger-bg-hover: var(--matecu-file-input-color-error-hover);--matecu-file-input-button-danger-text: var(--matecu-file-input-text-on-primary);--matecu-file-input-button-disabled-bg: var(--matecu-file-input-color-disabled);--matecu-file-input-spinner-track: #e5e7eb;--matecu-file-input-spinner-fill: var(--matecu-file-input-color-loading);--matecu-file-input-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--matecu-file-input-shadow-md: 0 1px 3px rgba(0, 0, 0, .1);--matecu-file-input-border-radius-sm: 4px;--matecu-file-input-border-radius-md: 6px;--matecu-file-input-border-radius-lg: 8px;--matecu-file-input-border-radius-xl: 12px;--matecu-file-input-border-width: 2px}:host input[type=file]{display:none}.file-input-container{position:relative;border:var(--matecu-file-input-border-width) dashed var(--matecu-file-input-border-default);border-radius:var(--matecu-file-input-border-radius-lg);padding:24px;transition:all .3s ease;background-color:var(--matecu-file-input-bg-default);cursor:pointer;min-height:120px;display:flex;align-items:center;justify-content:center}.file-input-container:hover:not(.disabled){border-color:var(--matecu-file-input-border-hover);background-color:var(--matecu-file-input-bg-hover)}.file-input-container.drag-over{border-color:var(--matecu-file-input-border-hover);background-color:var(--matecu-file-input-bg-drag-over);transform:scale(1.02)}.file-input-container.disabled{opacity:.6;cursor:not-allowed;background-color:var(--matecu-file-input-bg-disabled)}.file-input-container.has-files{border-style:solid;border-color:var(--matecu-file-input-border-success);background-color:var(--matecu-file-input-bg-success)}.file-input-container.has-errors{border-color:var(--matecu-file-input-border-error);background-color:var(--matecu-file-input-bg-error)}.file-input-container.loading{border-color:var(--matecu-file-input-border-loading);background-color:var(--matecu-file-input-bg-loading)}.loading-container{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--matecu-file-input-text-muted)}.loading-container .spinner{width:32px;height:32px;border:3px solid var(--matecu-file-input-spinner-track);border-top:3px solid var(--matecu-file-input-spinner-fill);border-radius:50%;animation:spin 1s linear infinite}.loading-container .loading-text{font-size:14px;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drop-zone{text-align:center;width:100%}.drop-zone .drop-zone-icon{font-size:48px;margin-bottom:16px}.drop-zone .drop-zone-content .drop-zone-title{font-size:16px;font-weight:600;color:var(--matecu-file-input-text-secondary);margin-bottom:12px}.drop-zone .drop-zone-content .drop-zone-subtitle{font-size:14px;color:var(--matecu-file-input-text-muted);margin-top:8px}.drop-zone .select-button{background-color:var(--matecu-file-input-button-primary-bg);color:var(--matecu-file-input-button-primary-text);border:none;padding:12px 24px;border-radius:var(--matecu-file-input-border-radius-md);font-weight:500;cursor:pointer;transition:background-color .2s ease}.drop-zone .select-button:hover:not(:disabled){background-color:var(--matecu-file-input-button-primary-bg-hover)}.drop-zone .select-button:disabled{background-color:var(--matecu-file-input-button-disabled-bg);cursor:not-allowed}.single-file-display{box-sizing:border-box;display:grid;grid-template-columns:1fr 32px;align-items:center;justify-content:space-between;width:100%;padding:16px;background-color:var(--matecu-file-input-bg-surface);border-radius:var(--matecu-file-input-border-radius-md);box-shadow:var(--matecu-file-input-shadow-md)}.single-file-display .file-info{display:flex;align-items:center;gap:16px;overflow:hidden}.single-file-display .file-info .file-preview img{border-radius:var(--matecu-file-input-border-radius-sm);object-fit:cover}.single-file-display .file-info .file-icon{width:48px;height:48px;background-color:var(--matecu-file-input-bg-surface-alt);border-radius:var(--matecu-file-input-border-radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--matecu-file-input-text-muted)}.single-file-display .file-info .file-details{max-width:calc(100% - 64px)}.single-file-display .file-info .file-details .file-name{max-width:100%;font-size:16px;font-weight:600;color:var(--matecu-file-input-text-primary);margin:0 0 4px;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.single-file-display .file-info .file-details .file-size{font-size:14px;color:var(--matecu-file-input-text-muted);margin:0 0 2px}.single-file-display .file-info .file-details .file-type{font-size:12px;color:var(--matecu-file-input-text-disabled);margin:0}.single-file-display .remove-file-button{background-color:var(--matecu-file-input-button-danger-bg);color:var(--matecu-file-input-button-danger-text);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background-color .2s ease}.single-file-display .remove-file-button:hover{background-color:var(--matecu-file-input-button-danger-bg-hover)}.multiple-files-display{width:100%}.multiple-files-display .files-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--matecu-file-input-border-separator)}.multiple-files-display .files-header h3{font-size:16px;font-weight:600;color:var(--matecu-file-input-text-primary);margin:0}.multiple-files-display .files-header .files-counter{font-size:14px;color:var(--matecu-file-input-text-muted);background-color:var(--matecu-file-input-bg-surface-alt);padding:4px 8px;border-radius:var(--matecu-file-input-border-radius-xl)}.multiple-files-display .files-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.multiple-files-display .file-item{display:flex;align-items:center;gap:12px;padding:12px;background-color:var(--matecu-file-input-bg-surface);border-radius:var(--matecu-file-input-border-radius-md);box-shadow:var(--matecu-file-input-shadow-sm);border:1px solid var(--matecu-file-input-border-separator)}.multiple-files-display .file-item .file-preview-small,.multiple-files-display .file-item .file-icon-small{width:32px;height:32px;background-color:var(--matecu-file-input-bg-surface-alt);border-radius:var(--matecu-file-input-border-radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--matecu-file-input-text-muted);flex-shrink:0}.multiple-files-display .file-item .file-preview-small img,.multiple-files-display .file-item .file-icon-small img{width:100%;height:100%;object-fit:cover;border-radius:var(--matecu-file-input-border-radius-sm)}.multiple-files-display .file-item .file-item-details{flex:1;min-width:0}.multiple-files-display .file-item .file-item-details .file-item-name{font-size:14px;font-weight:500;color:var(--matecu-file-input-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiple-files-display .file-item .file-item-details .file-item-size{font-size:12px;color:var(--matecu-file-input-text-muted)}.multiple-files-display .file-item .remove-file-button-small{background-color:var(--matecu-file-input-button-danger-bg);color:var(--matecu-file-input-button-danger-text);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:background-color .2s ease}.multiple-files-display .file-item .remove-file-button-small:hover{background-color:var(--matecu-file-input-button-danger-bg-hover)}.multiple-files-display .add-more-button{width:100%;background-color:var(--matecu-file-input-bg-surface-alt);color:var(--matecu-file-input-text-muted);border:var(--matecu-file-input-border-width) dashed var(--matecu-file-input-border-separator);padding:12px;border-radius:var(--matecu-file-input-border-radius-md);cursor:pointer;font-weight:500;transition:all .2s ease}.multiple-files-display .add-more-button:hover{background-color:var(--matecu-file-input-bg-hover);border-color:var(--matecu-file-input-text-disabled)}.error-messages{margin-top:12px}.error-messages .error-message{background-color:var(--matecu-file-input-bg-error);color:var(--matecu-file-input-text-error);padding:8px 12px;border-radius:var(--matecu-file-input-border-radius-sm);border-left:4px solid var(--matecu-file-input-color-error);font-size:14px;margin-bottom:4px}.error-messages .error-message:last-child{margin-bottom:0}@media(max-width:640px){.file-input-container{padding:16px;min-height:100px}.single-file-display .file-info{gap:12px}}@media screen and (max-width:640px)and (max-width:425px){.single-file-display .file-info{flex-direction:column}}@media(max-width:640px){.single-file-display .file-info .file-icon,.single-file-display .file-info .file-preview{width:40px;height:40px}}@media screen and (max-width:640px)and (max-width:425px){.single-file-display .file-info .file-icon,.single-file-display .file-info .file-preview{width:60px;height:60px}}@media(max-width:640px){.single-file-display .file-info .file-icon img,.single-file-display .file-info .file-preview img{width:100%;height:100%;object-fit:cover}.files-header{flex-direction:column;align-items:flex-start;gap:8px}}\n"] }]
+                    ], template: "<!-- Hidden file input -->\n<input type=\"file\" #fileInput (change)=\"onFileChange($event)\" [multiple]=\"multiple()\" [disabled]=\"isDisabled\"\n    [attr.aria-label]=\"ariaLabel() || 'Select file'\" [attr.aria-describedby]=\"hasErrors ? 'file-input-errors' : null\"\n    [accept]=\"acceptedMimeTypes().join(',')\" />\n\n<!-- Main drop zone and file display -->\n<div class=\"file-input-container\" [class.drag-over]=\"isDragOver\" [class.disabled]=\"isDisabled\"\n    [class.has-files]=\"hasFiles\" [class.has-errors]=\"hasErrors\" [class.loading]=\"isLoading\"\n    (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\"\n    (click)=\"openFileDialog()\">\n    <!-- Loading state -->\n    @if (isLoading) {\n    <div class=\"loading-container\">\n        <div class=\"spinner\"></div>\n        <span class=\"loading-text\">{{ loadingText() }}</span>\n    </div>\n    }\n\n    <!-- Empty state / Drop zone -->\n    @if (!hasFiles && !isLoading) {\n    <div class=\"drop-zone\">\n        <div class=\"drop-zone-icon\">\n            \uD83D\uDCC1\n        </div>\n        <div class=\"drop-zone-content\">\n            <p class=\"drop-zone-title\">{{ placeholder() }}</p>\n            <button type=\"button\" class=\"select-button\" [disabled]=\"isDisabled\"\n                (click)=\"openFileDialog(); $event.stopPropagation()\">\n                {{ buttonText() }}\n            </button>\n            @if (enableDragDrop() && !isDisabled) {\n            }\n        </div>\n    </div>\n    }\n\n    <!-- Single file display -->\n    @if (!multiple() && file && !isLoading) {\n    <div class=\"single-file-display\">\n        <div class=\"file-info\">\n            <!-- File preview -->\n            @if (showPreview() && file.type.startsWith('image/')) {\n            <div class=\"file-preview\">\n                <img [src]=\"getPreviewUrl(file)\" [alt]=\"file.name\" [style.max-width.px]=\"previewMaxWidth()\"\n                    [style.max-height.px]=\"previewMaxHeight()\" />\n            </div>\n            } @else {\n            <div class=\"file-icon\">\n                {{ getFileIcon(file) }}\n            </div>\n            }\n\n            <div class=\"file-details\">\n                <h3 class=\"file-name\">{{ displayName() || file.name }}</h3>\n                @if (showFileSize() && selectedFileSize) {\n                <p class=\"file-size\">\n                    {{ formatFileSize(file) }}\n                </p>\n                }\n                <p class=\"file-type\">{{ file.type || 'Unknown type' }}</p>\n            </div>\n        </div>\n\n        <button type=\"button\" class=\"remove-file-button\" (click)=\"removeFile(file); $event.stopPropagation()\"\n            [attr.aria-label]=\"'Remove ' + file.name\">\n            \u2715\n        </button>\n    </div>\n    }\n\n    <!-- Multiple files display -->\n    @if (multiple() && files.length > 0 && !isLoading) {\n    <div class=\"multiple-files-display\">\n        <div class=\"files-header\">\n            @if (maxFiles() > 1) {\n            <span class=\"files-counter\">{{ files.length }} / {{ maxFiles() }}</span>\n            }\n        </div>\n\n        <div class=\"files-list\">\n            @for (file of files; track file.name + file.size; let i = $index) {\n            <div class=\"file-item\">\n                <!-- File preview -->\n                @if (showPreview() && file.type.startsWith('image/')) {\n                <div class=\"file-preview-small\">\n                    <img [src]=\"getPreviewUrl(file)\" [alt]=\"file.name\" />\n                </div>\n                } @else {\n                <div class=\"file-icon-small\">\n                    {{ getFileIcon(file) }}\n                </div>\n                }\n\n                <div class=\"file-item-details\">\n                    <div class=\"file-item-name\">{{ file.name }}</div>\n                    @if (showFileSize()) {\n                    <div class=\"file-item-size\">\n                        {{ formatFileSize(file) }}\n                    </div>\n                    }\n                </div>\n\n                <button type=\"button\" class=\"remove-file-button-small\"\n                    (click)=\"removeFile(file); $event.stopPropagation()\" [attr.aria-label]=\"'Remove ' + file.name\">\n                    \u2715\n                </button>\n            </div>\n            }\n        </div>\n\n        <!-- Add more files button -->\n        @if (files.length < maxFiles()) { <button type=\"button\" class=\"add-more-button\"\n            (click)=\"openFileDialog(); $event.stopPropagation()\">\n            {{ changeSelectedFileText() }}\n            </button>\n            }\n    </div>\n    }\n</div>\n\n<!-- Error messages -->\n@if (hasErrors) {\n<div id=\"file-input-errors\" class=\"error-messages\" role=\"alert\">\n    @for (error of validationErrors; track error) {\n    <div class=\"error-message\">{{ error }}</div>\n    }\n</div>\n}", styles: [":host{display:block;width:100%}:host>*{box-sizing:border-box}:host{--matecu-file-input-color-primary: #4f46e5;--matecu-file-input-color-primary-hover: #4338ca;--matecu-file-input-color-success: #10b981;--matecu-file-input-color-error: #ef4444;--matecu-file-input-color-error-hover: #dc2626;--matecu-file-input-color-loading: #8b5cf6;--matecu-file-input-color-disabled: #9ca3af;--matecu-file-input-border-default: #e1e5e9;--matecu-file-input-border-hover: var(--matecu-file-input-color-primary);--matecu-file-input-border-success: var(--matecu-file-input-color-success);--matecu-file-input-border-error: var(--matecu-file-input-color-error);--matecu-file-input-border-loading: var(--matecu-file-input-color-loading);--matecu-file-input-border-separator: #e5e7eb;--matecu-file-input-bg-default: #fafbfc;--matecu-file-input-bg-hover: #f8faff;--matecu-file-input-bg-drag-over: #eef2ff;--matecu-file-input-bg-disabled: #f5f5f5;--matecu-file-input-bg-success: #f0fdf4;--matecu-file-input-bg-error: #fef2f2;--matecu-file-input-bg-loading: #faf5ff;--matecu-file-input-bg-surface: #ffffff;--matecu-file-input-bg-surface-alt: #f3f4f6;--matecu-file-input-text-primary: #111827;--matecu-file-input-text-secondary: #374151;--matecu-file-input-text-muted: #6b7280;--matecu-file-input-text-disabled: #9ca3af;--matecu-file-input-text-on-primary: #ffffff;--matecu-file-input-text-error: #dc2626;--matecu-file-input-button-primary-bg: var(--matecu-file-input-color-primary);--matecu-file-input-button-primary-bg-hover: var(--matecu-file-input-color-primary-hover);--matecu-file-input-button-primary-text: var(--matecu-file-input-text-on-primary);--matecu-file-input-button-danger-bg: var(--matecu-file-input-color-error);--matecu-file-input-button-danger-bg-hover: var(--matecu-file-input-color-error-hover);--matecu-file-input-button-danger-text: var(--matecu-file-input-text-on-primary);--matecu-file-input-button-disabled-bg: var(--matecu-file-input-color-disabled);--matecu-file-input-spinner-track: #e5e7eb;--matecu-file-input-spinner-fill: var(--matecu-file-input-color-loading);--matecu-file-input-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--matecu-file-input-shadow-md: 0 1px 3px rgba(0, 0, 0, .1);--matecu-file-input-border-radius-sm: 4px;--matecu-file-input-border-radius-md: 6px;--matecu-file-input-border-radius-lg: 8px;--matecu-file-input-border-radius-xl: 12px;--matecu-file-input-border-width: 2px}:host input[type=file]{display:none}.file-input-container{position:relative;border:var(--matecu-file-input-border-width) dashed var(--matecu-file-input-border-default);border-radius:var(--matecu-file-input-border-radius-lg);padding:24px;transition:all .3s ease;background-color:var(--matecu-file-input-bg-default);cursor:pointer;min-height:120px;display:flex;align-items:center;justify-content:center}.file-input-container:hover:not(.disabled){border-color:var(--matecu-file-input-border-hover);background-color:var(--matecu-file-input-bg-hover)}.file-input-container.drag-over{border-color:var(--matecu-file-input-border-hover);background-color:var(--matecu-file-input-bg-drag-over);transform:scale(1.02)}.file-input-container.disabled{opacity:.6;cursor:not-allowed;background-color:var(--matecu-file-input-bg-disabled)}.file-input-container.has-files{border-style:solid;border-color:var(--matecu-file-input-border-success);background-color:var(--matecu-file-input-bg-success)}.file-input-container.has-errors{border-color:var(--matecu-file-input-border-error);background-color:var(--matecu-file-input-bg-error)}.file-input-container.loading{border-color:var(--matecu-file-input-border-loading);background-color:var(--matecu-file-input-bg-loading)}.loading-container{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--matecu-file-input-text-muted)}.loading-container .spinner{width:32px;height:32px;border:3px solid var(--matecu-file-input-spinner-track);border-top:3px solid var(--matecu-file-input-spinner-fill);border-radius:50%;animation:spin 1s linear infinite}.loading-container .loading-text{font-size:14px;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drop-zone{text-align:center;width:100%}.drop-zone .drop-zone-icon{font-size:48px;margin-bottom:16px}.drop-zone .drop-zone-content .drop-zone-title{font-size:16px;font-weight:600;color:var(--matecu-file-input-text-secondary);margin-bottom:12px}.drop-zone .drop-zone-content .drop-zone-subtitle{font-size:14px;color:var(--matecu-file-input-text-muted);margin-top:8px}.drop-zone .select-button{background-color:var(--matecu-file-input-button-primary-bg);color:var(--matecu-file-input-button-primary-text);border:none;padding:12px 24px;border-radius:var(--matecu-file-input-border-radius-md);font-weight:500;cursor:pointer;transition:background-color .2s ease}.drop-zone .select-button:hover:not(:disabled){background-color:var(--matecu-file-input-button-primary-bg-hover)}.drop-zone .select-button:disabled{background-color:var(--matecu-file-input-button-disabled-bg);cursor:not-allowed}.single-file-display{box-sizing:border-box;display:grid;grid-template-columns:1fr 32px;align-items:center;justify-content:space-between;width:100%;padding:16px;background-color:var(--matecu-file-input-bg-surface);border-radius:var(--matecu-file-input-border-radius-md);box-shadow:var(--matecu-file-input-shadow-md)}.single-file-display .file-info{display:flex;align-items:center;gap:16px;overflow:hidden}.single-file-display .file-info .file-preview img{border-radius:var(--matecu-file-input-border-radius-sm);object-fit:cover}.single-file-display .file-info .file-icon{width:48px;height:48px;background-color:var(--matecu-file-input-bg-surface-alt);border-radius:var(--matecu-file-input-border-radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--matecu-file-input-text-muted)}.single-file-display .file-info .file-details{max-width:calc(100% - 64px)}.single-file-display .file-info .file-details .file-name{max-width:100%;font-size:16px;font-weight:600;color:var(--matecu-file-input-text-primary);margin:0 0 4px;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.single-file-display .file-info .file-details .file-size{font-size:14px;color:var(--matecu-file-input-text-muted);margin:0 0 2px}.single-file-display .file-info .file-details .file-type{font-size:12px;color:var(--matecu-file-input-text-disabled);margin:0}.single-file-display .remove-file-button{background-color:var(--matecu-file-input-button-danger-bg);color:var(--matecu-file-input-button-danger-text);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background-color .2s ease}.single-file-display .remove-file-button:hover{background-color:var(--matecu-file-input-button-danger-bg-hover)}.multiple-files-display{width:100%}.multiple-files-display .files-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--matecu-file-input-border-separator)}.multiple-files-display .files-header h3{font-size:16px;font-weight:600;color:var(--matecu-file-input-text-primary);margin:0}.multiple-files-display .files-header .files-counter{font-size:14px;color:var(--matecu-file-input-text-muted);background-color:var(--matecu-file-input-bg-surface-alt);padding:4px 8px;border-radius:var(--matecu-file-input-border-radius-xl)}.multiple-files-display .files-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.multiple-files-display .file-item{display:flex;align-items:center;gap:12px;padding:12px;background-color:var(--matecu-file-input-bg-surface);border-radius:var(--matecu-file-input-border-radius-md);box-shadow:var(--matecu-file-input-shadow-sm);border:1px solid var(--matecu-file-input-border-separator)}.multiple-files-display .file-item .file-preview-small,.multiple-files-display .file-item .file-icon-small{width:32px;height:32px;background-color:var(--matecu-file-input-bg-surface-alt);border-radius:var(--matecu-file-input-border-radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--matecu-file-input-text-muted);flex-shrink:0}.multiple-files-display .file-item .file-preview-small img,.multiple-files-display .file-item .file-icon-small img{width:100%;height:100%;object-fit:cover;border-radius:var(--matecu-file-input-border-radius-sm)}.multiple-files-display .file-item .file-item-details{flex:1;min-width:0}.multiple-files-display .file-item .file-item-details .file-item-name{font-size:14px;font-weight:500;color:var(--matecu-file-input-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiple-files-display .file-item .file-item-details .file-item-size{font-size:12px;color:var(--matecu-file-input-text-muted)}.multiple-files-display .file-item .remove-file-button-small{background-color:var(--matecu-file-input-button-danger-bg);color:var(--matecu-file-input-button-danger-text);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:background-color .2s ease}.multiple-files-display .file-item .remove-file-button-small:hover{background-color:var(--matecu-file-input-button-danger-bg-hover)}.multiple-files-display .add-more-button{width:100%;background-color:var(--matecu-file-input-bg-surface-alt);color:var(--matecu-file-input-text-muted);border:var(--matecu-file-input-border-width) dashed var(--matecu-file-input-border-separator);padding:12px;border-radius:var(--matecu-file-input-border-radius-md);cursor:pointer;font-weight:500;transition:all .2s ease}.multiple-files-display .add-more-button:hover{background-color:var(--matecu-file-input-bg-hover);border-color:var(--matecu-file-input-text-disabled)}.error-messages{margin-top:12px}.error-messages .error-message{background-color:var(--matecu-file-input-bg-error);color:var(--matecu-file-input-text-error);padding:8px 12px;border-radius:var(--matecu-file-input-border-radius-sm);border-left:4px solid var(--matecu-file-input-color-error);font-size:14px;margin-bottom:4px}.error-messages .error-message:last-child{margin-bottom:0}@media(max-width:640px){.file-input-container{padding:16px;min-height:100px}.single-file-display .file-info{gap:12px}}@media screen and (max-width:640px)and (max-width:425px){.single-file-display .file-info{flex-direction:column}}@media(max-width:640px){.single-file-display .file-info .file-icon,.single-file-display .file-info .file-preview{width:40px;height:40px}}@media screen and (max-width:640px)and (max-width:425px){.single-file-display .file-info .file-icon,.single-file-display .file-info .file-preview{width:60px;height:60px}}@media(max-width:640px){.single-file-display .file-info .file-icon img,.single-file-display .file-info .file-preview img{width:100%;height:100%;object-fit:cover}.files-header{flex-direction:column;align-items:flex-start;gap:8px}}\n"] }]
         }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
-            }], optimizeImage: [{
-                type: Input
-            }], optimizeImageToSize: [{
-                type: Input
-            }], maxFileSize: [{
-                type: Input
-            }], maxFiles: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], showFileSize: [{
-                type: Input
-            }], fileSizeUnit: [{
-                type: Input
-            }], displayName: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], buttonText: [{
-                type: Input
-            }], changeSelectedFileText: [{
-                type: Input
-            }], loadingText: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], acceptedMimeTypes: [{
-                type: Input
-            }], acceptedExtensions: [{
-                type: Input
-            }], errorMessages: [{
-                type: Input
-            }], enableDragDrop: [{
-                type: Input
-            }], showPreview: [{
-                type: Input
-            }], previewMaxWidth: [{
-                type: Input
-            }], previewMaxHeight: [{
-                type: Input
-            }], showProgress: [{
-                type: Input
-            }], fileSelected: [{
-                type: Output
-            }], filesSelected: [{
-                type: Output
-            }], fileRemoved: [{
-                type: Output
-            }], validationError: [{
-                type: Output
-            }], dragEnter: [{
-                type: Output
-            }], dragLeave: [{
-                type: Output
-            }], stateChange: [{
-                type: Output
-            }] } });
+            }], optimizeImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "optimizeImage", required: false }] }], optimizeImageToSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "optimizeImageToSize", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileSize", required: false }] }], fileSizeUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSizeUnit", required: false }] }], displayName: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayName", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], changeSelectedFileText: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeSelectedFileText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], acceptedMimeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedMimeTypes", required: false }] }], acceptedExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedExtensions", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], enableDragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDragDrop", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], previewMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewMaxWidth", required: false }] }], previewMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewMaxHeight", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], validationError: [{ type: i0.Output, args: ["validationError"] }], dragEnter: [{ type: i0.Output, args: ["dragEnter"] }], dragLeave: [{ type: i0.Output, args: ["dragLeave"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }] } });
 
 class MatecuDatetimePicker {
     value = null;
     disabled = false;
-    dateLabel = 'Select date';
-    timeLabel = 'Select time';
-    apparance = 'fill';
-    matTimepickerMin = null;
-    matTimepickerMax = null;
-    minDate = null;
-    maxDate = null;
-    timeInterval = null;
-    timeOptions = null;
-    matDatepickerFilter = null;
-    valueChange = new EventEmitter();
+    dateLabel = input('Select date', ...(ngDevMode ? [{ debugName: "dateLabel" }] : []));
+    timeLabel = input('Select time', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
+    apparance = input('fill', ...(ngDevMode ? [{ debugName: "apparance" }] : []));
+    matTimepickerMin = input(null, ...(ngDevMode ? [{ debugName: "matTimepickerMin" }] : []));
+    matTimepickerMax = input(null, ...(ngDevMode ? [{ debugName: "matTimepickerMax" }] : []));
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    timeInterval = input(null, ...(ngDevMode ? [{ debugName: "timeInterval" }] : []));
+    timeOptions = input(null, ...(ngDevMode ? [{ debugName: "timeOptions" }] : []));
+    matDatepickerFilter = input(null, ...(ngDevMode ? [{ debugName: "matDatepickerFilter" }] : []));
+    valueChange = output();
     onChange = () => { };
     onTouched = () => { };
     writeValue(value) {
@@ -1777,29 +1646,34 @@ class MatecuDatetimePicker {
             return { invalidDate: true };
         }
         const dateValue = control.value;
-        if (this.minDate && dateValue < this.minDate) {
-            return { minDate: { min: this.minDate, actual: dateValue } };
+        const minDate = this.minDate();
+        if (minDate && dateValue < minDate) {
+            return { minDate: { min: minDate, actual: dateValue } };
         }
-        if (this.maxDate && dateValue > this.maxDate) {
-            return { maxDate: { max: this.maxDate, actual: dateValue } };
+        const maxDate = this.maxDate();
+        if (maxDate && dateValue > maxDate) {
+            return { maxDate: { max: maxDate, actual: dateValue } };
         }
         // Validar tiempo mínimo
-        if (this.matTimepickerMin) {
-            const minTimeError = this.validateMinTime(dateValue, this.matTimepickerMin);
+        const matTimepickerMin = this.matTimepickerMin();
+        if (matTimepickerMin) {
+            const minTimeError = this.validateMinTime(dateValue, matTimepickerMin);
             if (minTimeError) {
                 return minTimeError;
             }
         }
         // Validar tiempo máximo
-        if (this.matTimepickerMax) {
-            const maxTimeError = this.validateMaxTime(dateValue, this.matTimepickerMax);
+        const matTimepickerMax = this.matTimepickerMax();
+        if (matTimepickerMax) {
+            const maxTimeError = this.validateMaxTime(dateValue, matTimepickerMax);
             if (maxTimeError) {
                 return maxTimeError;
             }
         }
         // Validar contra timeOptions si están disponibles
-        if (this.timeOptions && this.timeOptions.length > 0) {
-            const timeOptionsError = this.validateTimeOptions(dateValue, this.timeOptions);
+        const timeOptions = this.timeOptions();
+        if (timeOptions && timeOptions.length > 0) {
+            const timeOptionsError = this.validateTimeOptions(dateValue, timeOptions);
             if (timeOptionsError) {
                 return timeOptionsError;
             }
@@ -1872,7 +1746,7 @@ class MatecuDatetimePicker {
         return date instanceof Date && !isNaN(date.getTime());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuDatetimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MatecuDatetimePicker, isStandalone: true, selector: "matecu-datetime-picker", inputs: { dateLabel: "dateLabel", timeLabel: "timeLabel", apparance: "apparance", matTimepickerMin: "matTimepickerMin", matTimepickerMax: "matTimepickerMax", minDate: "minDate", maxDate: "maxDate", timeInterval: "timeInterval", timeOptions: "timeOptions", matDatepickerFilter: "matDatepickerFilter" }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: MatecuDatetimePicker, isStandalone: true, selector: "matecu-datetime-picker", inputs: { dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, apparance: { classPropertyName: "apparance", publicName: "apparance", isSignal: true, isRequired: false, transformFunction: null }, matTimepickerMin: { classPropertyName: "matTimepickerMin", publicName: "matTimepickerMin", isSignal: true, isRequired: false, transformFunction: null }, matTimepickerMax: { classPropertyName: "matTimepickerMax", publicName: "matTimepickerMax", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, timeInterval: { classPropertyName: "timeInterval", publicName: "timeInterval", isSignal: true, isRequired: false, transformFunction: null }, timeOptions: { classPropertyName: "timeOptions", publicName: "timeOptions", isSignal: true, isRequired: false, transformFunction: null }, matDatepickerFilter: { classPropertyName: "matDatepickerFilter", publicName: "matDatepickerFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
             provideNativeDateAdapter(),
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1884,7 +1758,7 @@ class MatecuDatetimePicker {
                 useExisting: MatecuDatetimePicker,
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"matecu-datetime-picker-content\">\n  <mat-form-field [appearance]=\"apparance\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input matInput [matDatepicker]=\"datepicker\" [ngModel]=\"value\" (ngModelChange)=\"onDateChange($event)\"\n      [disabled]=\"disabled\" [min]=\"minDate\" [max]=\"maxDate\" [matDatepickerFilter]=\"matDatepickerFilter\"\n      (blur)=\"onBlur()\" />\n    <mat-datepicker #datepicker />\n    <mat-datepicker-toggle [for]=\"datepicker\" matSuffix />\n\n    <mat-hint> <ng-content select=\"[mat-hint-date]\"></ng-content> </mat-hint>\n    <mat-error> <ng-content select=\"[mat-error-date]\"></ng-content> </mat-error>\n  </mat-form-field>\n\n  <mat-form-field [appearance]=\"apparance\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input matInput [matTimepicker]=\"timepicker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\"\n      [ngModelOptions]=\"{ updateOn: 'blur' }\" [disabled]=\"disabled\" [matTimepickerMin]=\"matTimepickerMin\"\n      [matTimepickerMax]=\"matTimepickerMax\" (blur)=\"onBlur()\" />\n    <mat-timepicker #timepicker [options]=\"timeOptions\" [interval]=\"timeInterval\" />\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n\n    <mat-hint> <ng-content select=\"[mat-hint-time]\"></ng-content> </mat-hint>\n    <mat-error> <ng-content select=\"[mat-error-time]\"></ng-content> </mat-error>\n  </mat-form-field>\n</div>", styles: [":host{display:block;container-type:inline-size;--matecu-datetime-picker-mobile-bg: #f1f5f9}:host .matecu-datetime-picker-content{display:flex;gap:8px}:host .matecu-datetime-picker-content>mat-form-field:last-of-type{max-width:140px}@container (width <= 400px){:host .matecu-datetime-picker-content{flex-direction:column;background-color:var(--matecu-datetime-picker-mobile-bg);gap:25px;padding:10px 10px 15px}:host .matecu-datetime-picker-content>mat-form-field:last-of-type{max-width:unset}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i3$2.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i3$2.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i3$2.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"matecu-datetime-picker-content\">\n  <mat-form-field [appearance]=\"apparance()\">\n    <mat-label>{{ dateLabel() }}</mat-label>\n    <input matInput [matDatepicker]=\"datepicker\" [ngModel]=\"value\" (ngModelChange)=\"onDateChange($event)\"\n      [disabled]=\"disabled\" [min]=\"minDate()\" [max]=\"maxDate()\" [matDatepickerFilter]=\"matDatepickerFilter()\"\n      (blur)=\"onBlur()\" />\n    <mat-datepicker #datepicker />\n    <mat-datepicker-toggle [for]=\"datepicker\" matSuffix />\n\n    <mat-hint> <ng-content select=\"[mat-hint-date]\"></ng-content> </mat-hint>\n    <mat-error> <ng-content select=\"[mat-error-date]\"></ng-content> </mat-error>\n  </mat-form-field>\n\n  <mat-form-field [appearance]=\"apparance()\">\n    <mat-label>{{ timeLabel() }}</mat-label>\n    <input matInput [matTimepicker]=\"timepicker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\"\n      [ngModelOptions]=\"{ updateOn: 'blur' }\" [disabled]=\"disabled\" [matTimepickerMin]=\"matTimepickerMin()\"\n      [matTimepickerMax]=\"matTimepickerMax()\" (blur)=\"onBlur()\" />\n    <mat-timepicker #timepicker [options]=\"timeOptions()\" [interval]=\"timeInterval()\" />\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n\n    <mat-hint> <ng-content select=\"[mat-hint-time]\"></ng-content> </mat-hint>\n    <mat-error> <ng-content select=\"[mat-error-time]\"></ng-content> </mat-error>\n  </mat-form-field>\n</div>", styles: [":host{display:block;container-type:inline-size;--matecu-datetime-picker-mobile-bg: #f1f5f9}:host .matecu-datetime-picker-content{display:flex;gap:8px}:host .matecu-datetime-picker-content>mat-form-field:last-of-type{max-width:140px}@container (width <= 400px){:host .matecu-datetime-picker-content{flex-direction:column;background-color:var(--matecu-datetime-picker-mobile-bg);gap:25px;padding:10px 10px 15px}:host .matecu-datetime-picker-content>mat-form-field:last-of-type{max-width:unset}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i3$2.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i3$2.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i3$2.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuDatetimePicker, decorators: [{
             type: Component,
@@ -1906,30 +1780,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             useExisting: MatecuDatetimePicker,
                             multi: true,
                         },
-                    ], template: "<div class=\"matecu-datetime-picker-content\">\n  <mat-form-field [appearance]=\"apparance\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input matInput [matDatepicker]=\"datepicker\" [ngModel]=\"value\" (ngModelChange)=\"onDateChange($event)\"\n      [disabled]=\"disabled\" [min]=\"minDate\" [max]=\"maxDate\" [matDatepickerFilter]=\"matDatepickerFilter\"\n      (blur)=\"onBlur()\" />\n    <mat-datepicker #datepicker />\n    <mat-datepicker-toggle [for]=\"datepicker\" matSuffix />\n\n    <mat-hint> <ng-content select=\"[mat-hint-date]\"></ng-content> </mat-hint>\n    <mat-error> <ng-content select=\"[mat-error-date]\"></ng-content> </mat-error>\n  </mat-form-field>\n\n  <mat-form-field [appearance]=\"apparance\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input matInput [matTimepicker]=\"timepicker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\"\n      [ngModelOptions]=\"{ updateOn: 'blur' }\" [disabled]=\"disabled\" [matTimepickerMin]=\"matTimepickerMin\"\n      [matTimepickerMax]=\"matTimepickerMax\" (blur)=\"onBlur()\" />\n    <mat-timepicker #timepicker [options]=\"timeOptions\" [interval]=\"timeInterval\" />\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n\n    <mat-hint> <ng-content select=\"[mat-hint-time]\"></ng-content> </mat-hint>\n    <mat-error> <ng-content select=\"[mat-error-time]\"></ng-content> </mat-error>\n  </mat-form-field>\n</div>", styles: [":host{display:block;container-type:inline-size;--matecu-datetime-picker-mobile-bg: #f1f5f9}:host .matecu-datetime-picker-content{display:flex;gap:8px}:host .matecu-datetime-picker-content>mat-form-field:last-of-type{max-width:140px}@container (width <= 400px){:host .matecu-datetime-picker-content{flex-direction:column;background-color:var(--matecu-datetime-picker-mobile-bg);gap:25px;padding:10px 10px 15px}:host .matecu-datetime-picker-content>mat-form-field:last-of-type{max-width:unset}}\n"] }]
-        }], propDecorators: { dateLabel: [{
-                type: Input
-            }], timeLabel: [{
-                type: Input
-            }], apparance: [{
-                type: Input
-            }], matTimepickerMin: [{
-                type: Input
-            }], matTimepickerMax: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], timeInterval: [{
-                type: Input
-            }], timeOptions: [{
-                type: Input
-            }], matDatepickerFilter: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
+                    ], template: "<div class=\"matecu-datetime-picker-content\">\n  <mat-form-field [appearance]=\"apparance()\">\n    <mat-label>{{ dateLabel() }}</mat-label>\n    <input matInput [matDatepicker]=\"datepicker\" [ngModel]=\"value\" (ngModelChange)=\"onDateChange($event)\"\n      [disabled]=\"disabled\" [min]=\"minDate()\" [max]=\"maxDate()\" [matDatepickerFilter]=\"matDatepickerFilter()\"\n      (blur)=\"onBlur()\" />\n    <mat-datepicker #datepicker />\n    <mat-datepicker-toggle [for]=\"datepicker\" matSuffix />\n\n    <mat-hint> <ng-content select=\"[mat-hint-date]\"></ng-content> </mat-hint>\n    <mat-error> <ng-content select=\"[mat-error-date]\"></ng-content> </mat-error>\n  </mat-form-field>\n\n  <mat-form-field [appearance]=\"apparance()\">\n    <mat-label>{{ timeLabel() }}</mat-label>\n    <input matInput [matTimepicker]=\"timepicker\" [ngModel]=\"value\" (ngModelChange)=\"onValueChange($event)\"\n      [ngModelOptions]=\"{ updateOn: 'blur' }\" [disabled]=\"disabled\" [matTimepickerMin]=\"matTimepickerMin()\"\n      [matTimepickerMax]=\"matTimepickerMax()\" (blur)=\"onBlur()\" />\n    <mat-timepicker #timepicker [options]=\"timeOptions()\" [interval]=\"timeInterval()\" />\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n\n    <mat-hint> <ng-content select=\"[mat-hint-time]\"></ng-content> </mat-hint>\n    <mat-error> <ng-content select=\"[mat-error-time]\"></ng-content> </mat-error>\n  </mat-form-field>\n</div>", styles: [":host{display:block;container-type:inline-size;--matecu-datetime-picker-mobile-bg: #f1f5f9}:host .matecu-datetime-picker-content{display:flex;gap:8px}:host .matecu-datetime-picker-content>mat-form-field:last-of-type{max-width:140px}@container (width <= 400px){:host .matecu-datetime-picker-content{flex-direction:column;background-color:var(--matecu-datetime-picker-mobile-bg);gap:25px;padding:10px 10px 15px}:host .matecu-datetime-picker-content>mat-form-field:last-of-type{max-width:unset}}\n"] }]
+        }], propDecorators: { dateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabel", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], apparance: [{ type: i0.Input, args: [{ isSignal: true, alias: "apparance", required: false }] }], matTimepickerMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "matTimepickerMin", required: false }] }], matTimepickerMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "matTimepickerMax", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], timeInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeInterval", required: false }] }], timeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeOptions", required: false }] }], matDatepickerFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "matDatepickerFilter", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /*
  * Public API Surface of angular-matecu