angular-matecu 4.1.0 → 4.1.1

package/fesm2022/angular-matecu.mjs

@@ -0,0 +1,1736 @@
+import * as i0 from '@angular/core';
+import { Injectable, Input, HostBinding, Component, NgModule, EventEmitter, ViewChild, Output, Inject, signal, computed, effect, forwardRef } 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 { tap, takeUntil, map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import * as i2$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i2 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i1$2 from '@angular/material/snack-bar';
+import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i2$2 from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import * as i3$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i5 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatFormFieldControl } 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 * as i2$3 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i7 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+class MatecuSpinnerService {
+    active$ = new BehaviorSubject(false);
+    requestsKeys = [];
+    constructor() { }
+    watch() {
+        return this.active$.pipe();
+    }
+    add(customKey) {
+        const key = typeof customKey === 'string' && customKey.length > 0 ? customKey : this.createKey();
+        this.requestsKeys.push(key);
+        this.updateStatus();
+        return key;
+    }
+    remove(key) {
+        this.requestsKeys = this.requestsKeys.filter((requestKey) => requestKey !== key);
+        this.updateStatus();
+    }
+    clear() {
+        this.requestsKeys = [];
+        this.updateStatus();
+    }
+    updateStatus() {
+        const active = this.requestsKeys.length > 0;
+        this.active$.next(active);
+    }
+    createKey() {
+        const time = new Date().getTime();
+        const complement = Math.random();
+        return `${time}__${complement}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSpinnerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSpinnerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSpinnerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class MatecuSpinnerComponent {
+    spinnerService;
+    cdr;
+    destroy$ = new Subject();
+    hiddenClass = 'matecu-spinner--hidden';
+    activeCache = false;
+    className = 'matecu-spinner';
+    color = '#2196F3';
+    global = false;
+    get active() {
+        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;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    ngOnInit() {
+        if (this.global) {
+            this.spinnerService
+                .watch()
+                .pipe(tap((value) => (this.activeCache = 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 }] });
+}
+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"] }]
+        }], ctorParameters: () => [{ type: MatecuSpinnerService }, { type: i0.ChangeDetectorRef }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }], color: [{
+                type: Input
+            }], global: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class MatecuSpinnerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: MatecuSpinnerModule, imports: [CommonModule, MatecuSpinnerComponent], exports: [MatecuSpinnerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSpinnerModule, imports: [CommonModule, MatecuSpinnerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSpinnerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule, MatecuSpinnerComponent
+                    ],
+                    exports: [
+                        MatecuSpinnerComponent
+                    ]
+                }]
+        }] });
+
+class MatecuTopbarLayoutComponent {
+    elementRef;
+    changeDetector;
+    zone;
+    _scrolled = false;
+    _prominent = false;
+    get scrolled() {
+        return this._scrolled;
+    }
+    set scrolled(value) {
+        this._scrolled = 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`;
+        }
+    }
+    className = 'matecu-topbar-layout';
+    bodyElement;
+    constructor(elementRef, changeDetector, zone) {
+        this.elementRef = elementRef;
+        this.changeDetector = changeDetector;
+        this.zone = zone;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    spyScroll(scrollabe) {
+        if (!scrollabe) {
+            return;
+        }
+        const maxScrollHeight = scrollabe.scrollHeight;
+        const scrollableHeight = scrollabe.clientHeight;
+        if (scrollableHeight > maxScrollHeight) {
+            return;
+        }
+        const scrollPosition = scrollabe.scrollTop;
+        this.scrolled = scrollPosition > 20;
+    }
+    ngAfterViewInit() {
+        const layoutElement = this.elementRef.nativeElement;
+        const resizeObserver = new ResizeObserver(() => {
+            const width = layoutElement?.clientWidth;
+            if (!width) {
+                return;
+            }
+            this.mobileStyle = width <= this.mobileWidth;
+            this.zone.run(() => {
+                this.mobileStyleChange.emit(this.mobileStyle);
+                this.whenResize.emit(width);
+            });
+        });
+        resizeObserver.observe(layoutElement);
+        this.destroy$.pipe(tap(() => resizeObserver.disconnect())).subscribe();
+        if (this.bodyElement) {
+            fromEvent(this.bodyElement.nativeElement, 'scroll')
+                .pipe(tap(() => this.spyScroll(this.bodyElement?.nativeElement)), takeUntil(this.destroy$))
+                .subscribe();
+        }
+    }
+    scrollTop() {
+        if (!this.bodyElement) {
+            return;
+        }
+        this.bodyElement.nativeElement.scroll({
+            top: 0,
+            behavior: 'smooth',
+        });
+    }
+    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 }] });
+}
+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: [{
+                type: HostBinding,
+                args: ['class']
+            }], bodyElement: [{
+                type: ViewChild,
+                args: ['mtbBody']
+            }] } });
+
+class MatecuTopbarTitleComponent {
+    className = 'matecu-topbar-title';
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MatecuTopbarTitleComponent, isStandalone: true, selector: "matecu-topbar-title", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>", 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}:host,:host *,.matecu-topbar-search,.matecu-topbar-search *{box-sizing:border-box;outline:none}:host,.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)}:host input,.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}:host input::placeholder,.matecu-topbar-search input::placeholder{color:var(--mtb-search-color, var(--mtb-bar-color, #fff));opacity:1}:host input:focus,.matecu-topbar-search input:focus{min-width:var(--mtb-search-width-large, 290px)}:host__icon,.matecu-topbar-search__icon{position:absolute;top:50%;transform:translateY(-50%);padding:0}:host__icon--search,.matecu-topbar-search__icon--search{left:6px}:host__icon--clear,.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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matecu-topbar-title', standalone: true, template: "<ng-content></ng-content>", 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}:host,:host *,.matecu-topbar-search,.matecu-topbar-search *{box-sizing:border-box;outline:none}:host,.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)}:host input,.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}:host input::placeholder,.matecu-topbar-search input::placeholder{color:var(--mtb-search-color, var(--mtb-bar-color, #fff));opacity:1}:host input:focus,.matecu-topbar-search input:focus{min-width:var(--mtb-search-width-large, 290px)}:host__icon,.matecu-topbar-search__icon{position:absolute;top:50%;transform:translateY(-50%);padding:0}:host__icon--search,.matecu-topbar-search__icon--search{left:6px}:host__icon--clear,.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: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MatecuTopbarBodyComponent {
+    className = 'matecu-topbar-body';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MatecuTopbarBodyComponent, isStandalone: true, selector: "matecu-topbar-body", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host,.matecu-topbar-body{display:block}:host,:host *,.matecu-topbar-body,.matecu-topbar-body *{box-sizing:border-box;outline:none}:host,.matecu-topbar-body{padding:var(--mtb-body-padding, 30px);background-color:var(--mtb-body-background, auto);overflow-y:auto;padding-bottom:var(--mtb-body-padding-button, 60px)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matecu-topbar-body', standalone: true, template: "<ng-content></ng-content>", styles: [":host,.matecu-topbar-body{display:block}:host,:host *,.matecu-topbar-body,.matecu-topbar-body *{box-sizing:border-box;outline:none}:host,.matecu-topbar-body{padding:var(--mtb-body-padding, 30px);background-color:var(--mtb-body-background, auto);overflow-y:auto;padding-bottom:var(--mtb-body-padding-button, 60px)}\n"] }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+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`;
+        }
+    }
+    className = this.mainClassName;
+    get color() {
+        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 }] });
+}
+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: [{
+                type: HostBinding,
+                args: ['class']
+            }], color: [{
+                type: HostBinding,
+                args: ['style.display']
+            }] } });
+
+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();
+    className = 'matecu-topbar-search';
+    get color() {
+        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$))
+            .subscribe();
+    }
+    toggleActiveMobildeSearch() {
+        this.activeMobileSearch = !this.activeMobileSearch;
+    }
+    clearSearch() {
+        this.inputCtrl.setValue('');
+        this.activeMobileSearch = false;
+    }
+    updateHasValueFn() {
+        return (value) => {
+            this.hasValue = value.length > 0;
+        };
+    }
+    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 }] });
+}
+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: [{
+                type: HostBinding
+            }], color: [{
+                type: HostBinding,
+                args: ['style.display']
+            }] } });
+
+class MatecuTopbarActionComponent {
+    className = 'matecu-topbar-action';
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MatecuTopbarActionComponent, isStandalone: true, selector: "matecu-topbar-action", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{--mtb-bar-height: 64px;--mtb-action-padding: 10px;--mtb-action-margin: 0px}:host,:host *,.matecu-topbar-action,.matecu-topbar-action *{box-sizing:border-box;outline:none}:host,.matecu-topbar-action{height:100%;display:flex;align-items:flex-start;max-height:var(--mtb-bar-height);padding:var(--mtb-action-padding);margin:var(--mtb-action-margin)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matecu-topbar-action', standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{--mtb-bar-height: 64px;--mtb-action-padding: 10px;--mtb-action-margin: 0px}:host,:host *,.matecu-topbar-action,.matecu-topbar-action *{box-sizing:border-box;outline:none}:host,.matecu-topbar-action{height:100%;display:flex;align-items:flex-start;max-height:var(--mtb-bar-height);padding:var(--mtb-action-padding);margin:var(--mtb-action-margin)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MatecuTopbarHeaderRowComponent {
+    display = true;
+    className = 'matecu-topbar-header-row';
+    get color() {
+        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 }] });
+}
+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: [{
+                type: HostBinding,
+                args: ['class']
+            }], color: [{
+                type: HostBinding,
+                args: ['style.display']
+            }] } });
+
+class MatecuTopbarHeaderColumnComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarHeaderColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MatecuTopbarHeaderColumnComponent, isStandalone: true, selector: "matecu-topbar-header-column", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;height:100%;min-height:var(--mtb-bar-height, 64px)}:host[right-row]{justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarHeaderColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matecu-topbar-header-column', standalone: true, imports: [CommonModule], template: "<ng-content></ng-content>\n", styles: [":host{display:flex;height:100%;min-height:var(--mtb-bar-height, 64px)}:host[right-row]{justify-content:flex-end}\n"] }]
+        }] });
+
+class MatecuTopbarLayoutModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarLayoutModule, imports: [CommonModule,
+            MatToolbarModule,
+            MatIconModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatecuTopbarLayoutComponent,
+            MatecuTopbarTitleComponent,
+            MatecuTopbarBodyComponent,
+            MatecuTopbarFabComponent,
+            MatecuTopbarSearchComponent,
+            MatecuTopbarActionComponent,
+            MatecuTopbarHeaderRowComponent,
+            MatecuTopbarHeaderColumnComponent], exports: [MatecuTopbarLayoutComponent,
+            MatecuTopbarTitleComponent,
+            MatecuTopbarBodyComponent,
+            MatecuTopbarFabComponent,
+            MatecuTopbarSearchComponent,
+            MatecuTopbarActionComponent,
+            MatecuTopbarHeaderRowComponent,
+            MatecuTopbarHeaderColumnComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarLayoutModule, imports: [CommonModule,
+            MatToolbarModule,
+            MatIconModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatecuTopbarLayoutComponent,
+            MatecuTopbarFabComponent,
+            MatecuTopbarSearchComponent,
+            MatecuTopbarHeaderRowComponent,
+            MatecuTopbarHeaderColumnComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuTopbarLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        MatToolbarModule,
+                        MatIconModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatecuTopbarLayoutComponent,
+                        MatecuTopbarTitleComponent,
+                        MatecuTopbarBodyComponent,
+                        MatecuTopbarFabComponent,
+                        MatecuTopbarSearchComponent,
+                        MatecuTopbarActionComponent,
+                        MatecuTopbarHeaderRowComponent,
+                        MatecuTopbarHeaderColumnComponent,
+                    ],
+                    exports: [
+                        MatecuTopbarLayoutComponent,
+                        MatecuTopbarTitleComponent,
+                        MatecuTopbarBodyComponent,
+                        MatecuTopbarFabComponent,
+                        MatecuTopbarSearchComponent,
+                        MatecuTopbarActionComponent,
+                        MatecuTopbarHeaderRowComponent,
+                        MatecuTopbarHeaderColumnComponent,
+                    ],
+                }]
+        }] });
+
+var MatecuAlertBoxType;
+(function (MatecuAlertBoxType) {
+    MatecuAlertBoxType["warning"] = "warning";
+    MatecuAlertBoxType["success"] = "success";
+    MatecuAlertBoxType["danger"] = "danger";
+    MatecuAlertBoxType["info"] = "info";
+})(MatecuAlertBoxType || (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;
+    }
+    className = this.classNameBase;
+    constructor() { }
+    ngOnInit() { }
+    updateIcon() {
+        switch (this.color) {
+            case MatecuAlertBoxType.danger:
+                this.iconValue = 'dangerous';
+                break;
+            case MatecuAlertBoxType.warning:
+                this.iconValue = 'warning';
+                break;
+            case MatecuAlertBoxType.success:
+                this.iconValue = 'check_circle';
+                break;
+            case MatecuAlertBoxType.info:
+                this.iconValue = 'info';
+                break;
+            default:
+                this.iconValue = null;
+                break;
+        }
+    }
+    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"] }] });
+}
+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: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MatecuAlertDialogComponent {
+    dialogData;
+    dialogRef;
+    hasTitle = false;
+    hasDismissBtn = false;
+    hasActionBtn = false;
+    showActions = false;
+    constructor(dialogData, dialogRef) {
+        this.dialogData = dialogData;
+        this.dialogRef = dialogRef;
+        this.setHasTitle();
+        this.setHasDismissBtn();
+        this.setHasActionBtn();
+        this.setShowActions();
+    }
+    ngOnInit() { }
+    activateAction() {
+        this.dialogRef.close(true);
+    }
+    setHasTitle() {
+        this.hasTitle = this.isValidString(this.dialogData.title);
+    }
+    setHasDismissBtn() {
+        this.hasDismissBtn = this.isValidString(this.dialogData.dismissText);
+    }
+    setHasActionBtn() {
+        this.hasActionBtn = this.isValidString(this.dialogData.action);
+    }
+    setShowActions() {
+        this.showActions = this.hasActionBtn || this.hasDismissBtn;
+    }
+    isValidString(str) {
+        const isValid = typeof str === 'string' && str.trim().length > 0;
+        return isValid;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAlertDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuAlertDialogComponent, isStandalone: true, selector: "matecu-alert-dialog", ngImport: i0, template: "@if (hasTitle) {\n\n<h2 mat-dialog-title>{{dialogData.title}}</h2>\n}\n<mat-dialog-content>\n\n  <matecu-alert-box [color]=\"dialogData.type\" [icon]=\"!!dialogData.icon\">\n    {{dialogData.message}}\n  </matecu-alert-box>\n\n</mat-dialog-content>\n@if (showActions) {\n\n<mat-dialog-actions align=\"end\">\n  @if (hasDismissBtn) {\n  <button mat-button color=\"primary\" tabindex=\"-1\" mat-dialog-close>{{dialogData.dismissText}}\n  </button>\n  }\n  @if(hasActionBtn) {\n  <button mat-button color=\"primary\" tabindex=\"-2\" (click)=\"activateAction()\">{{dialogData.action}}\n  </button>\n  }\n</mat-dialog-actions>\n}", styles: [":host matecu-alert-box{max-width:900px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: MatecuAlertBoxComponent, selector: "matecu-alert-box", inputs: ["color", "icon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAlertDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matecu-alert-dialog', standalone: true, imports: [CommonModule, MatDialogModule, MatIconModule, MatecuAlertBoxComponent, MatButtonModule], template: "@if (hasTitle) {\n\n<h2 mat-dialog-title>{{dialogData.title}}</h2>\n}\n<mat-dialog-content>\n\n  <matecu-alert-box [color]=\"dialogData.type\" [icon]=\"!!dialogData.icon\">\n    {{dialogData.message}}\n  </matecu-alert-box>\n\n</mat-dialog-content>\n@if (showActions) {\n\n<mat-dialog-actions align=\"end\">\n  @if (hasDismissBtn) {\n  <button mat-button color=\"primary\" tabindex=\"-1\" mat-dialog-close>{{dialogData.dismissText}}\n  </button>\n  }\n  @if(hasActionBtn) {\n  <button mat-button color=\"primary\" tabindex=\"-2\" (click)=\"activateAction()\">{{dialogData.action}}\n  </button>\n  }\n</mat-dialog-actions>\n}", styles: [":host matecu-alert-box{max-width:900px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$1.MatDialogRef }] });
+
+class MatecuAlertSnackBarComponent {
+    data;
+    snackBarRef;
+    title;
+    message;
+    action;
+    classNameBase = 'matecu-alert-snackbar';
+    alertColor;
+    get color() {
+        return this.alertColor;
+    }
+    set color(value) {
+        this.alertColor = value;
+        this.className = `${this.classNameBase} ${this.classNameBase}--${value}`;
+    }
+    className = this.classNameBase;
+    constructor(data, snackBarRef) {
+        this.data = data;
+        this.snackBarRef = snackBarRef;
+        this.title = data.title;
+        this.message = data.message;
+        this.action = data.action;
+        this.color = data.type;
+    }
+    dismiss() {
+        this.snackBarRef.dismissWithAction();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAlertSnackBarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$2.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MatecuAlertSnackBarComponent, isStandalone: true, selector: "matecu-alert-snack-bar", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div>\n    <strong>{{title}}</strong> &nbsp;\n    <span>{{message}}</span>\n</div>\n@if(action?.length){\n\n<div>\n    <button mat-button color=\"accent\" (click)=\"dismiss()\">{{action}}</button>\n</div>\n}", styles: [":host.matecu-alert-snackbar{display:flex;align-items:center}:host.matecu-alert-snackbar>*:not(:first-child){margin-left:10px}:host.matecu-alert-snackbar--success strong{color:#20db20}:host.matecu-alert-snackbar--danger strong{color:red}:host.matecu-alert-snackbar--warning strong{color:orange}:host.matecu-alert-snackbar--info strong{color:#07a0ed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSnackBarModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAlertSnackBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matecu-alert-snack-bar', standalone: true, imports: [CommonModule, MatButtonModule, MatSnackBarModule], template: "<div>\n    <strong>{{title}}</strong> &nbsp;\n    <span>{{message}}</span>\n</div>\n@if(action?.length){\n\n<div>\n    <button mat-button color=\"accent\" (click)=\"dismiss()\">{{action}}</button>\n</div>\n}", styles: [":host.matecu-alert-snackbar{display:flex;align-items:center}:host.matecu-alert-snackbar>*:not(:first-child){margin-left:10px}:host.matecu-alert-snackbar--success strong{color:#20db20}:host.matecu-alert-snackbar--danger strong{color:red}:host.matecu-alert-snackbar--warning strong{color:orange}:host.matecu-alert-snackbar--info strong{color:#07a0ed}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SNACK_BAR_DATA]
+                }] }, { type: i1$2.MatSnackBarRef }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MatecuAlertBoxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAlertBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: MatecuAlertBoxModule, imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, MatSnackBarModule, MatecuAlertBoxComponent, MatecuAlertDialogComponent, MatecuAlertSnackBarComponent], exports: [MatecuAlertBoxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAlertBoxModule, imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, MatSnackBarModule, MatecuAlertBoxComponent, MatecuAlertDialogComponent, MatecuAlertSnackBarComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAlertBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, MatSnackBarModule, MatecuAlertBoxComponent, MatecuAlertDialogComponent, MatecuAlertSnackBarComponent],
+                    exports: [MatecuAlertBoxComponent]
+                }]
+        }] });
+
+class MatecuSnackBarService {
+    snackBar;
+    constructor(snackBar) {
+        this.snackBar = snackBar;
+    }
+    openError(error, title, action, config) {
+        const message = this.getErrorMessage(error);
+        const titleStr = title || 'ERROR';
+        const type = MatecuAlertBoxType.danger;
+        return this.openAlert(message, titleStr, type, action, config);
+    }
+    openSuccess(message, title, action, config) {
+        const titleStr = title || 'OK';
+        const type = MatecuAlertBoxType.success;
+        return this.openAlert(message, titleStr, type, action, config);
+    }
+    openWarning(message, title, action, config) {
+        const titleStr = title || 'WARNING';
+        const type = MatecuAlertBoxType.warning;
+        return this.openAlert(message, titleStr, type, action, config);
+    }
+    openInfo(message, title, action, config) {
+        const titleStr = title || 'INFO';
+        const type = MatecuAlertBoxType.info;
+        return this.openAlert(message, titleStr, type, action, config);
+    }
+    open(message, action, config) {
+        return this.snackBar.open(message, action, config);
+    }
+    dismiss() {
+        this.snackBar.dismiss();
+    }
+    openAlert(message, title, type, action, config) {
+        const data = {
+            message,
+            title,
+            action,
+            type
+        };
+        const dialogConfig = { ...config, data };
+        return this.snackBar.openFromComponent(MatecuAlertSnackBarComponent, dialogConfig);
+    }
+    getErrorMessage(err) {
+        const error = new Error();
+        if (typeof err === 'string') {
+            return err;
+        }
+        if (err instanceof Error) {
+            return err.message;
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSnackBarService, deps: [{ token: i1$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSnackBarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuSnackBarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], 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;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    _placeholder = '';
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    _required = false;
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this.setDisabledState(this._disabled);
+        this.stateChanges.next();
+    }
+    _disabled = false;
+    get value() {
+        return this.internalValue;
+    }
+    set value(value) {
+        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 = () => { };
+    get empty() {
+        const isEmpty = this.inputControl.value === '' || !this.inputControl.value;
+        return isEmpty;
+    }
+    get shouldLabelFloat() {
+        const shouldFloat = this.focused || !this.empty;
+        return shouldFloat;
+    }
+    get errorState() {
+        return !!(this.ngControl && this.ngControl.invalid && this.ngControl.touched);
+    }
+    get showCreateOption() {
+        const value = this.inputControl.value;
+        return (this.allowCreate &&
+            typeof value === 'string' &&
+            this.internalValue !== value &&
+            this.options.some((option) => option[1].toLowerCase() === value.toLowerCase()) === false);
+    }
+    constructor(focusMonitor, elementRef, injector) {
+        this.focusMonitor = focusMonitor;
+        this.elementRef = elementRef;
+        this.injector = injector;
+    }
+    ngOnInit() {
+        // Intentar obtener NgControl de forma segura
+        try {
+            this.ngControl = this.injector.get(NgControl, null);
+        }
+        catch (error) {
+            // 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) => {
+            if (!!focused !== this.focused) {
+                this.focused = !!focused;
+                this.stateChanges.next();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this.focusMonitor.stopMonitoring(this.elementRef);
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            const newErrorState = !!(this.ngControl.invalid && this.ngControl.touched);
+            if (newErrorState !== this.errorState) {
+                this.stateChanges.next();
+            }
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['options']) {
+            this.rebuildOptionMap();
+            this.updateInputLabelFromValue();
+            this.stateChanges.next();
+        }
+        if (changes['placeholder'] || changes['required'] || changes['disabled']) {
+            this.stateChanges.next();
+        }
+    }
+    filter(search) {
+        return this.options.filter((option) => this.filterFn(option[1], search));
+    }
+    createFilterFn() {
+        return (v1, v2) => {
+            return v1.toLowerCase().includes(v2.toLowerCase());
+        };
+    }
+    displayLabel = (value) => {
+        if (value === null || value === undefined)
+            return '';
+        if (!Array.isArray(this.options)) {
+            return '';
+        }
+        return this.optionMap.get(value) ?? '';
+    };
+    onOptionSelected(value) {
+        if (!value || this.readonly || this.disabled) {
+            return;
+        }
+        this.internalValue = value;
+        this.inputControl.setValue(value, { emitEvent: false });
+        this.onChange(value);
+        this.onTouched();
+        this.valueChange.emit(value);
+    }
+    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())) {
+            return;
+        }
+        this.create.emit(this.lastSearchText);
+    }
+    updateInputLabelFromValue() {
+        if (this.internalValue !== null) {
+            const label = this.displayLabel(this.internalValue);
+            this.inputControl.setValue(label, { emitEvent: false });
+        }
+    }
+    // ControlValueAccessor
+    writeValue(value) {
+        this.internalValue = value;
+        this.updateInputLabelFromValue();
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled = isDisabled;
+        isDisabled ? this.inputControl.disable() : this.inputControl.enable();
+        this.stateChanges.next();
+    }
+    // MatFormFieldControl methods
+    focus(options) {
+        this.elementRef.nativeElement.querySelector('input')?.focus(options);
+    }
+    onContainerClick() {
+        this.focus();
+    }
+    setDescribedByIds(ids) {
+        const input = this.elementRef.nativeElement.querySelector('input');
+        if (input) {
+            input.setAttribute('aria-describedby', ids.join(' '));
+        }
+    }
+    rebuildOptionMap() {
+        this.optionMap.clear();
+        for (const [value, label] of this.options ?? []) {
+            this.optionMap.set(value, label);
+        }
+    }
+    clearValue() {
+        this.internalValue = 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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: MatecuAutocomplete,
+                multi: true,
+            },
+            {
+                provide: MatFormFieldControl,
+                useExisting: MatecuAutocomplete,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<input matInput type=\"text\" matInput [formControl]=\"inputControl\" [matAutocomplete]=\"auto\" [class.loading]=\"loading\"\n    [disabled]=\"disabled\" [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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAutocomplete, decorators: [{
+            type: Component,
+            args: [{ selector: 'matecu-autocomplete', standalone: true, imports: [
+                        CommonModule,
+                        MatAutocompleteModule,
+                        MatDividerModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatProgressSpinnerModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: MatecuAutocomplete,
+                            multi: true,
+                        },
+                        {
+                            provide: MatFormFieldControl,
+                            useExisting: MatecuAutocomplete,
+                        },
+                    ], template: "<input matInput type=\"text\" matInput [formControl]=\"inputControl\" [matAutocomplete]=\"auto\" [class.loading]=\"loading\"\n    [disabled]=\"disabled\" [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: [{
+                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
+            }] } });
+
+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();
+    }
+    // ================= OUTPUT =================
+    searchChange = new EventEmitter();
+    // ================= INTERNAL CONTROL =================
+    control = new FormControl([], { nonNullable: true });
+    controlValue$ = toSignal(this.control.valueChanges);
+    searchControl = new FormControl('', { nonNullable: true });
+    autocompleteTrigger;
+    // ================= SIGNALS =================
+    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]));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    selectedItems = computed(() => {
+        const values = this.controlValue$() ?? [];
+        return values.map((v) => {
+            const found = this._options().find((o) => o[0] === v);
+            return {
+                value: v,
+                label: found ? found[1] : v,
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    // ================= FORM FIELD CONTROL =================
+    stateChanges = new Subject();
+    focused = false;
+    controlType = 'autocomplete-multiple';
+    id = `autocomplete-multiple-${MatecuAutocompleteMultiple.nextId++}`;
+    describedBy = '';
+    disabled = false;
+    required = false;
+    errorState = false;
+    injector;
+    ngControl = null;
+    get empty() {
+        return this.control.value.length === 0;
+    }
+    get shouldLabelFloat() {
+        return true;
+    }
+    // ================= CONSTRUCTOR =================
+    constructor(injector) {
+        this.injector = injector;
+        // Debounce search
+        let timeout;
+        this.searchControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+            this.searchText.set(value ?? '');
+        });
+        this.control.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+            this.onChange(value);
+            this.stateChanges.next();
+        });
+        effect(() => {
+            const value = this.searchText();
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                this.searchChange.emit(value);
+            }, this.searchChangeDebounceTime);
+        });
+    }
+    value = null;
+    autofilled;
+    userAriaDescribedBy;
+    disableAutomaticLabeling;
+    describedByIds;
+    ngOnInit() {
+        try {
+            this.ngControl = this.injector.get(NgControl, null);
+        }
+        catch (error) {
+            // Ignorar si no se puede obtener NgControl
+            this.ngControl = null;
+        }
+        // Propagar cambios del FormControl interno
+    }
+    // ================= AUTOCOMPLETE =================
+    selectOption(option) {
+        if (this.readonly || this.disabled)
+            return;
+        if (!Array.isArray(option))
+            return;
+        if (!this.control.value.includes(option[0])) {
+            this.control.setValue([...this.control.value, option[0]]);
+        }
+        // limpiar input correctamente
+        this.searchControl.setValue('');
+        this.searchText.set('');
+        // cerrar panel
+        this.autocompleteTrigger.closePanel();
+    }
+    displayLabel(option) {
+        return Array.isArray(option) ? option[1] : '';
+    }
+    // ================= CHIP ACTIONS =================
+    remove(value) {
+        if (this.readonly || this.disabled)
+            return;
+        this.control.setValue(this.control.value.filter((v) => v !== value));
+    }
+    selectAll() {
+        if (this.readonly || this.disabled)
+            return;
+        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)
+            return;
+        if (this.control.value.length === 0)
+            return;
+        this.control.setValue([]);
+        this.searchControl.setValue('');
+        this.searchText.set('');
+        this.autocompleteTrigger?.closePanel();
+    }
+    // ================= DRAG & DROP =================
+    drop(event) {
+        if (this.disabled || this.readonly)
+            return;
+        const current = [...this.control.value];
+        moveItemInArray(current, event.previousIndex, event.currentIndex);
+        this.control.setValue(current);
+    }
+    // ================= KEYBOARD =================
+    onKeyDown(event) {
+        if (this.readonly || this.disabled)
+            return;
+        if (event.key === 'Backspace' && !this.searchText() && this.control.value.length > 0) {
+            const updated = [...this.control.value];
+            updated.pop();
+            this.control.setValue(updated);
+        }
+    }
+    // ================= CVA =================
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.control.setValue(value ?? [], { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        isDisabled
+            ? this.control.disable({ emitEvent: false })
+            : this.control.enable({ emitEvent: false });
+        this.stateChanges.next();
+    }
+    setDescribedByIds(ids) {
+        this.describedBy = ids.join(' ');
+    }
+    onContainerClick() { }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    trackByValue = (_, item) => item[0];
+    openPanel() {
+        this.autocompleteTrigger.openPanel();
+        setTimeout(() => this.autocompleteTrigger.updatePosition());
+    }
+    createFilterFn() {
+        return (v1, v2) => {
+            return v1.toLowerCase().includes(v2.toLowerCase());
+        };
+    }
+    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" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MatecuAutocompleteMultiple),
+                multi: true,
+            },
+            {
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuAutocompleteMultiple, decorators: [{
+            type: Component,
+            args: [{ selector: 'matecu-autocomplete-multiple', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        MatChipsModule,
+                        DragDropModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatAutocompleteModule,
+                        ScrollingModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MatecuAutocompleteMultiple),
+                            multi: true,
+                        },
+                        {
+                            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
+            }], autocompleteTrigger: [{
+                type: ViewChild,
+                args: [MatAutocompleteTrigger]
+            }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var FileInputState;
+(function (FileInputState) {
+    FileInputState["IDLE"] = "idle";
+    FileInputState["LOADING"] = "loading";
+    FileInputState["SUCCESS"] = "success";
+    FileInputState["ERROR"] = "error";
+})(FileInputState || (FileInputState = {}));
+class MatecuFileInput {
+    fileInput;
+    // State
+    files = [];
+    file;
+    isDisabled = false;
+    fileName;
+    selectedFileSize;
+    hasInvalidSize = false;
+    hasInvalidType = false;
+    previewUrl;
+    previewUrls = new Map(); // Para múltiples archivos
+    currentState = FileInputState.IDLE;
+    validationErrors = [];
+    isDragOver = false;
+    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;
+    // Inputs - Validación
+    acceptedMimeTypes = [];
+    acceptedExtensions = [];
+    errorMessages = {
+        invalidSize: 'File exceeds maximum allowed size',
+        invalidType: 'File type not allowed',
+        tooManyFiles: 'Maximum number of files exceeded',
+        uploadError: 'Error processing file',
+    };
+    // Inputs - UI/UX
+    enableDragDrop = true;
+    showPreview = false;
+    previewMaxWidth = 200;
+    previewMaxHeight = 200;
+    showProgress = false;
+    // Outputs
+    fileSelected = new EventEmitter();
+    filesSelected = new EventEmitter();
+    fileRemoved = new EventEmitter();
+    validationError = new EventEmitter();
+    dragEnter = new EventEmitter();
+    dragLeave = new EventEmitter();
+    stateChange = new EventEmitter();
+    // ControlValueAccessor Methods
+    writeValue(value) {
+        if (value instanceof File) {
+            this.handleSingleFile(value);
+        }
+        else if (Array.isArray(value)) {
+            this.handleMultipleFiles(value);
+        }
+        else if (typeof value === 'string') {
+            this.fileName = value;
+        }
+        else {
+            this.resetComponent();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.changeState(this.isDisabled ? FileInputState.IDLE : this.currentState);
+    }
+    ngOnDestroy() {
+        this.cleanupPreview();
+    }
+    // Event Handlers
+    onFileChange(event) {
+        const input = event.target;
+        const selectedFiles = Array.from(input.files || []);
+        this.handleFileSelection(selectedFiles);
+    }
+    onDragOver(event) {
+        if (!this.enableDragDrop || this.isDisabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.isDragOver) {
+            this.isDragOver = true;
+            this.dragEnter.emit(event);
+        }
+    }
+    onDragLeave(event) {
+        if (!this.enableDragDrop || this.isDisabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+        this.dragLeave.emit(event);
+    }
+    onDrop(event) {
+        if (!this.enableDragDrop || this.isDisabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+        const files = Array.from(event.dataTransfer?.files || []);
+        this.handleFileSelection(files);
+    }
+    openFileDialog() {
+        if (this.isDisabled)
+            return;
+        this.fileInput?.nativeElement.click();
+    }
+    removeFile(fileToRemove) {
+        // Limpiar preview del archivo eliminado
+        const fileKey = `${fileToRemove.name}-${fileToRemove.size}-${fileToRemove.lastModified}`;
+        const previewUrl = this.previewUrls.get(fileKey);
+        if (previewUrl && previewUrl.startsWith('blob:')) {
+            URL.revokeObjectURL(previewUrl);
+            this.previewUrls.delete(fileKey);
+        }
+        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]);
+        }
+        else {
+            this.resetComponent();
+            this.notifyChange(null);
+        }
+        this.fileRemoved.emit(fileToRemove);
+    }
+    // Private Methods
+    async handleFileSelection(selectedFiles) {
+        if (selectedFiles.length === 0)
+            return;
+        this.changeState(FileInputState.LOADING);
+        this.validationErrors = [];
+        try {
+            // Validar número máximo de archivos
+            if (selectedFiles.length > this.maxFiles) {
+                this.validationErrors.push(this.errorMessages.tooManyFiles);
+                this.changeState(FileInputState.ERROR);
+                return;
+            }
+            const processedFiles = [];
+            for (const file of selectedFiles) {
+                const validation = this.validateFile(file);
+                if (!validation.isValid) {
+                    this.validationErrors.push(...validation.errors);
+                    continue;
+                }
+                try {
+                    const processedFile = await this.processFile(file);
+                    if (processedFile) {
+                        processedFiles.push(processedFile);
+                    }
+                }
+                catch (error) {
+                    this.validationErrors.push(this.errorMessages.uploadError);
+                }
+            }
+            if (this.validationErrors.length > 0) {
+                this.validationError.emit([...this.validationErrors]);
+                this.changeState(FileInputState.ERROR);
+                return;
+            }
+            if (processedFiles.length > 0) {
+                if (this.multiple) {
+                    this.files = processedFiles;
+                    this.filesSelected.emit([...this.files]);
+                    this.notifyChange(this.files);
+                }
+                else {
+                    this.file = processedFiles[0];
+                    this.handleSingleFile(this.file);
+                    this.fileSelected.emit(this.file);
+                    this.notifyChange(this.file);
+                }
+                this.changeState(FileInputState.SUCCESS);
+            }
+        }
+        catch (error) {
+            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.selectedFileSize = this.calculateFileSizeInMB(file);
+        this.generatePreview(file);
+    }
+    handleMultipleFiles(files) {
+        this.files = files;
+        this.file = files[0] || undefined;
+        this.fileName = files.length > 0 ? `${files.length} file(s) selected` : undefined;
+    }
+    async processFile(file) {
+        if (this.optimizeImage && file.type.includes('image') && this.optimizeImageToSize) {
+            try {
+                return await this.optimizeImage(file);
+            }
+            catch (error) {
+                console.warn('Error optimizing image:', error);
+                return file; // Return original if optimization fails
+            }
+        }
+        return file;
+    }
+    validateFile(file) {
+        const errors = [];
+        // Validar tamaño
+        if (this.maxFileSize && file.size > this.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);
+            }
+        }
+        // Validar extensión
+        if (this.acceptedExtensions.length > 0) {
+            const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
+            if (!this.acceptedExtensions.some((ext) => ext.toLowerCase() === fileExtension)) {
+                errors.push(this.errorMessages.invalidType);
+            }
+        }
+        return {
+            isValid: errors.length === 0,
+            errors,
+        };
+    }
+    generatePreview(file) {
+        this.cleanupPreview();
+        if (this.showPreview && file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.previewUrl = e.target?.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    cleanupPreview() {
+        // Limpiar preview simple
+        if (this.previewUrl && this.previewUrl.startsWith('blob:')) {
+            URL.revokeObjectURL(this.previewUrl);
+        }
+        this.previewUrl = undefined;
+        // Limpiar previews múltiples
+        this.previewUrls.forEach((url) => {
+            if (url.startsWith('blob:')) {
+                URL.revokeObjectURL(url);
+            }
+        });
+        this.previewUrls.clear();
+    }
+    resetComponent() {
+        this.files = [];
+        this.file = undefined;
+        this.fileName = undefined;
+        this.selectedFileSize = undefined;
+        this.validationErrors = [];
+        this.hasInvalidSize = false;
+        this.hasInvalidType = false;
+        this.cleanupPreview();
+        this.changeState(FileInputState.IDLE);
+    }
+    notifyChange(value) {
+        if (this.onChange) {
+            this.onChange(value);
+        }
+        if (this.onTouched) {
+            this.onTouched();
+        }
+    }
+    changeState(newState) {
+        if (this.currentState !== newState) {
+            this.currentState = newState;
+            this.stateChange.emit(newState);
+        }
+    }
+    calculateFileSizeInMB(file) {
+        const sizeInMB = file.size / 1024 / 1024;
+        return sizeInMB > 0.01 ? sizeInMB : 0.01;
+    }
+    formatFileSize(file) {
+        const bytes = file.size;
+        if (bytes === 0)
+            return '0 bytes';
+        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);
+            if (targetUnitIndex !== -1) {
+                const size = bytes / Math.pow(k, targetUnitIndex);
+                const formattedSize = targetUnitIndex === 0 ? size.toString() : size.toFixed(2);
+                return `${formattedSize} ${this.fileSizeUnit}`;
+            }
+        }
+        // Comportamiento AUTO (original)
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        const size = bytes / Math.pow(k, i);
+        const formattedSize = i === 0 ? size.toString() : size.toFixed(2);
+        return `${formattedSize} ${sizes[i]}`;
+    }
+    // Public Utility Methods
+    getFileIcon(file) {
+        if (!file)
+            return 'insert_drive_file';
+        if (file.type.startsWith('image/'))
+            return '🖼️';
+        if (file.type.includes('pdf'))
+            return '📄';
+        if (file.type.startsWith('video/'))
+            return '🎥';
+        if (file.type.startsWith('audio/'))
+            return '🎵';
+        if (file.type.includes('zip') || file.type.includes('rar'))
+            return '🗜️';
+        if (file.type.includes('word'))
+            return '📝';
+        if (file.type.includes('excel') || file.type.includes('sheet'))
+            return '📊';
+        return '📄';
+    }
+    getPreviewUrl(file) {
+        if (!file.type.startsWith('image/'))
+            return '';
+        const fileKey = `${file.name}-${file.size}-${file.lastModified}`;
+        if (!this.previewUrls.has(fileKey)) {
+            const url = URL.createObjectURL(file);
+            this.previewUrls.set(fileKey, url);
+        }
+        return this.previewUrls.get(fileKey) || '';
+    }
+    get hasErrors() {
+        return this.validationErrors.length > 0 || this.currentState === FileInputState.ERROR;
+    }
+    get isLoading() {
+        return this.currentState === FileInputState.LOADING;
+    }
+    get hasFiles() {
+        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: [
+            {
+                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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatecuFileInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'matecu-file-input', imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], 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
+            }] } });
+
+/*
+ * Public API Surface of angular-matecu
+ */
+/**
+ *  spinner
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FileInputState, MatecuAlertBoxComponent, MatecuAlertBoxModule, MatecuAlertBoxType, MatecuAlertDialogComponent, MatecuAlertSnackBarComponent, MatecuAutocomplete, MatecuAutocompleteMultiple, MatecuFileInput, MatecuSnackBarService, MatecuSpinnerComponent, MatecuSpinnerModule, MatecuSpinnerService, MatecuTopbarActionComponent, MatecuTopbarBodyComponent, MatecuTopbarFabComponent, MatecuTopbarHeaderColumnComponent, MatecuTopbarHeaderRowComponent, MatecuTopbarLayoutComponent, MatecuTopbarLayoutModule, MatecuTopbarSearchComponent, MatecuTopbarTitleComponent };
+//# sourceMappingURL=angular-matecu.mjs.map