matcha-components 19.74.0 → 19.75.0

package/fesm2022/matcha-components.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, Renderer2, HostBinding, Inject, HostListener, ContentChild, Directive, forwardRef, ChangeDetectionStrategy, NgModule, createComponent, Injectable } from '@angular/core';
+import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, Renderer2, HostBinding, Inject, HostListener, ContentChild, Directive, forwardRef, Injectable, ChangeDetectionStrategy, NgModule, createComponent } from '@angular/core';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
-import { Subscription, Subject } from 'rxjs';
+import { Subscription, Subject, BehaviorSubject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
 import { FormControlName, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 const customAnimation = animation([
@@ -1561,11 +1562,11 @@ class MatchaFormFieldComponent {
         return !!this.control?.invalid && (this.control?.touched || this.control?.dirty);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n</div>\n" }]
+            args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n" }]
         }], propDecorators: { color: [{
                 type: Input
             }], size: [{
@@ -1878,6 +1879,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                 args: ['size']
             }] } });
 
+class MatchaOptionService {
+    constructor() {
+        this._optionsSubject = new BehaviorSubject([]);
+        this.options$ = this._optionsSubject.asObservable();
+        this._activeOptionSubject = new BehaviorSubject(0);
+        this.activeOption$ = this._activeOptionSubject.asObservable();
+        this._canShowOptionsSubject = new BehaviorSubject(false);
+        this.canShowOptions$ = this._canShowOptionsSubject.asObservable();
+        this._selectedOptionSubject = new Subject();
+        this.selectedOption$ = this._selectedOptionSubject.asObservable();
+    }
+    setSelectedOption(selectedOption) {
+        this._selectedOptionSubject.next(selectedOption);
+    }
+    getCanShowOptions() {
+        return this._canShowOptionsSubject.value;
+    }
+    setCanShowOptions(canShowOptions) {
+        this._canShowOptionsSubject.next(canShowOptions);
+    }
+    updateOptions(options) {
+        this._optionsSubject.next(options);
+    }
+    updateActiveOption(activeOption) {
+        this._activeOptionSubject.next(activeOption);
+    }
+    resetActiveOption() {
+        this.updateActiveOption(0);
+        const currentOptions = this._optionsSubject.value;
+        const activeOption = this._activeOptionSubject.value;
+        currentOptions.forEach((option, index) => {
+            index === activeOption ? option.setIsOptionActive(true, false) : option.setIsOptionActive(false, false);
+        });
+        return;
+    }
+    removeActiveOption() {
+        const currentOptions = this._optionsSubject.value;
+        currentOptions.forEach((option) => {
+            option.isOptionActive = false;
+        });
+        this.updateActiveOption(-1);
+        return;
+    }
+    changeActiveOption(stepsToMove) {
+        const currentOptions = this._optionsSubject.value;
+        const lastActiveOption = this._activeOptionSubject.value;
+        this.updateActiveOption(Math.max(0, Math.min(currentOptions.length - 1, lastActiveOption + stepsToMove)));
+        const currentActiveOption = this._activeOptionSubject.value;
+        currentOptions.forEach((option, index) => {
+            option.setIsOptionActive(index === currentActiveOption, false);
+        });
+        return;
+    }
+    selectActiveOption() {
+        const currentOptions = this._optionsSubject.value;
+        const activeOption = this._activeOptionSubject.value;
+        if (currentOptions[activeOption]) {
+            currentOptions[activeOption].selectOption();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaOptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaOptionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaOptionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class MatchaAutocompleteComponent {
+    constructor(changeDetectorRef, matchaOptionService) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.matchaOptionService = matchaOptionService;
+        this.isDisplayAutocomplete = false;
+        this.activeOption = 0;
+    }
+    ngOnInit() {
+        this.matchaOptionService.canShowOptions$.subscribe((canShowOptions) => {
+            if (!canShowOptions) {
+                this.matchaOptionService.resetActiveOption();
+            }
+            this.isDisplayAutocomplete = canShowOptions;
+        });
+    }
+    ngAfterContentInit() {
+        const options = this.options.toArray();
+        if (options.length > 0) {
+            options[0].setIsOptionActive(true, false);
+        }
+        this.matchaOptionService.updateOptions(options);
+        this.options.changes.subscribe((newOptions) => {
+            this.matchaOptionService.updateOptions(newOptions.toArray());
+            this.matchaOptionService.resetActiveOption();
+        });
+        this.matchaOptionService.activeOption$.subscribe((currentActiveOption) => {
+            this.activeOption = currentActiveOption;
+            this.changeDetectorRef.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MatchaOptionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", queries: [{ propertyName: "options", predicate: MatchaOptionComponent }], ngImport: i0, template: "<ng-container *ngIf=\"isDisplayAutocomplete\">\n    <div class=\"background-bg pt-24 position-absolute z-index-2 w-100-p\">\n        <ul class=\"background-surface m-0 radius-8 elevation-z-1 p-0\">\n            <ng-content></ng-content>\n        </ul>\n    </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-autocomplete', standalone: false, template: "<ng-container *ngIf=\"isDisplayAutocomplete\">\n    <div class=\"background-bg pt-24 position-absolute z-index-2 w-100-p\">\n        <ul class=\"background-surface m-0 radius-8 elevation-z-1 p-0\">\n            <ng-content></ng-content>\n        </ul>\n    </div>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MatchaOptionService }], propDecorators: { options: [{
+                type: ContentChildren,
+                args: [MatchaOptionComponent]
+            }] } });
+
+class MatchaOptionComponent {
+    constructor(changeDetectorRef, matchaOptionService) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.matchaOptionService = matchaOptionService;
+        this.isOptionActive = false;
+    }
+    selectOption() {
+        this.matchaOptionService.setCanShowOptions(true);
+        this.matchaOptionService.setSelectedOption(this.value);
+        setTimeout(() => {
+            this.matchaOptionService.setCanShowOptions(false);
+        }, 300);
+    }
+    setIsOptionActive(isOptionActive, isMouseEvent) {
+        if (isMouseEvent) {
+            this.matchaOptionService.removeActiveOption();
+        }
+        this.isOptionActive = isOptionActive;
+        this.changeDetectorRef.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MatchaOptionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: MatchaOptionComponent, isStandalone: false, selector: "matcha-option", inputs: { value: "value" }, ngImport: i0, template: "<span\n    (click)=\"selectOption()\"\n    (mouseenter)=\"setIsOptionActive(true, true)\"\n    (mouseleave)=\"setIsOptionActive(false, true)\"\n    [class.background-bg]=\"isOptionActive\"\n    class=\"d-block py-8 cursor-pointer px-16 w-100-p\">\n    <ng-content></ng-content>\n</span>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-option', standalone: false, template: "<span\n    (click)=\"selectOption()\"\n    (mouseenter)=\"setIsOptionActive(true, true)\"\n    (mouseleave)=\"setIsOptionActive(false, true)\"\n    [class.background-bg]=\"isOptionActive\"\n    class=\"d-block py-8 cursor-pointer px-16 w-100-p\">\n    <ng-content></ng-content>\n</span>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MatchaOptionService }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
 class MatchaSlideToggleComponent {
     set checked(value) {
         const newCheckedState = value === '' ? true : !!value;
@@ -2873,56 +3015,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                 }]
         }] });
 
-class MatchaAutocompleteDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-autocomplete');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.12", type: MatchaAutocompleteDirective, isStandalone: false, selector: "[matcha-autocomplete]", ngImport: i0 }); }
+class MatchaOptionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: MatchaOptionModule, declarations: [MatchaOptionComponent], imports: [CommonModule], exports: [MatchaOptionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaOptionModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaOptionModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: '[matcha-autocomplete]',
-                    standalone: false
+                    declarations: [MatchaOptionComponent],
+                    imports: [CommonModule],
+                    exports: [MatchaOptionComponent],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }] });
 
-class MatchaAutocompleteOverviewDirective {
-    constructor(_elementRef, _renderer) {
+class MatchaAutocompleteDirective {
+    displayAutocomplete() {
+        this.matchaOptionService.setCanShowOptions(true);
+    }
+    hideAutocomplete() {
+        setTimeout(() => {
+            const canShowAutocomplete = this.matchaOptionService.getCanShowOptions();
+            if (canShowAutocomplete) {
+                this.matchaOptionService.setCanShowOptions(false);
+            }
+        }, 300);
+    }
+    onArrowDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                this.matchaOptionService.changeActiveOption(1);
+                break;
+            case 'ArrowUp':
+                this.matchaOptionService.changeActiveOption(-1);
+                break;
+            case 'Enter':
+                this.matchaOptionService.selectActiveOption();
+                break;
+            default:
+                break;
+        }
+    }
+    constructor(ngControl, _elementRef, matchaOptionService) {
+        this.ngControl = ngControl;
         this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-autocomplete-overview');
+        this.matchaOptionService = matchaOptionService;
+    }
+    ngOnInit() {
+        this.matchaOptionService.selectedOption$.subscribe((option) => {
+            this._updateInputValue(option);
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteOverviewDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.12", type: MatchaAutocompleteOverviewDirective, isStandalone: false, selector: "[matcha-autocomplete-overview]", ngImport: i0 }); }
+    _updateInputValue(selectedOption) {
+        if (this.ngControl.control) {
+            this.ngControl.control.setValue(selectedOption);
+            this.ngControl.control.markAsDirty();
+            this.matchaOptionService.setCanShowOptions(false);
+            this._elementRef.nativeElement.blur();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteDirective, deps: [{ token: i1$1.NgControl }, { token: i0.ElementRef }, { token: MatchaOptionService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.12", type: MatchaAutocompleteDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { matchaAutocomplete: "matchaAutocomplete" }, host: { listeners: { "focus": "displayAutocomplete()", "focusout": "hideAutocomplete()", "keydown": "onArrowDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteOverviewDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[matcha-autocomplete-overview]',
-                    standalone: false
+                    selector: '[matchaAutocomplete]',
+                    standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }], ctorParameters: () => [{ type: i1$1.NgControl }, { type: i0.ElementRef }, { type: MatchaOptionService }], propDecorators: { matchaAutocomplete: [{
+                type: Input
+            }], displayAutocomplete: [{
+                type: HostListener,
+                args: ['focus']
+            }], hideAutocomplete: [{
+                type: HostListener,
+                args: ['focusout']
+            }], onArrowDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
 
 class MatchaAutocompleteModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteDirective,
-            MatchaAutocompleteOverviewDirective], exports: [MatchaAutocompleteDirective, MatchaAutocompleteOverviewDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteComponent, MatchaAutocompleteDirective], imports: [CommonModule, FormsModule, MatchaOptionModule], exports: [MatchaAutocompleteComponent, MatchaAutocompleteDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteModule, imports: [CommonModule, FormsModule, MatchaOptionModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        MatchaAutocompleteDirective,
-                        MatchaAutocompleteOverviewDirective,
-                    ],
-                    imports: [],
-                    exports: [MatchaAutocompleteDirective, MatchaAutocompleteOverviewDirective],
+                    declarations: [MatchaAutocompleteComponent, MatchaAutocompleteDirective],
+                    imports: [CommonModule, FormsModule, MatchaOptionModule],
+                    exports: [MatchaAutocompleteComponent, MatchaAutocompleteDirective],
                 }]
         }] });
 
@@ -3624,234 +3808,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
 
 class MatchaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatchaAccordionModule,
-            MatchaAutocompleteModule,
-            MatchaBadgeModule,
-            MatchaButtonModule,
-            MatchaButtonToggleModule,
-            MatchaCardModule,
-            MatchaCheckboxModule,
-            MatchaChipsModule,
-            MatchaDatepickerModule,
-            MatchaDividerModule,
-            MatchaElevationModule,
-            MatchaFormFieldModule,
-            MatchaHintTextModule,
-            MatchaIconModule,
-            MatchaInfiniteScrollModule,
-            MatchaInputModule,
-            MatchaMasonryModule,
-            MatchaMenuModule,
-            MatchaModalModule,
-            MatchaPaginatorModule,
-            MatchaProgressBarModule,
-            MatchaRadioButtonModule,
-            MatchaRippleModule,
-            MatchaSelectModule,
-            MatchaSidenavModule,
-            MatchaSlideToggleModule,
-            MatchaSliderModule,
-            MatchaSnackBarModule,
-            MatchaSortHeaderModule,
-            MatchaSpinModule,
-            MatchaTableModule,
-            MatchaTabsModule,
-            MatchaTitleModule,
-            MatchaTooltipModule,
-            MatchaTreeModule], exports: [MatchaAccordionModule,
-            MatchaAutocompleteModule,
-            MatchaBadgeModule,
-            MatchaButtonModule,
-            MatchaButtonToggleModule,
-            MatchaCardModule,
-            MatchaCheckboxModule,
-            MatchaChipsModule,
-            MatchaDatepickerModule,
-            MatchaDividerModule,
-            MatchaElevationModule,
-            MatchaFormFieldModule,
-            MatchaHintTextModule,
-            MatchaIconModule,
-            MatchaInfiniteScrollModule,
-            MatchaInputModule,
-            MatchaMasonryModule,
-            MatchaMenuModule,
-            MatchaModalModule,
-            MatchaPaginatorModule,
-            MatchaProgressBarModule,
-            MatchaRadioButtonModule,
-            MatchaRippleModule,
-            MatchaSelectModule,
-            MatchaSidenavModule,
-            MatchaSlideToggleModule,
-            MatchaSliderModule,
-            MatchaSnackBarModule,
-            MatchaSortHeaderModule,
-            MatchaSpinModule,
-            MatchaTableModule,
-            MatchaTabsModule,
-            MatchaTitleModule,
-            MatchaTooltipModule,
-            MatchaTreeModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatchaAccordionModule,
-            MatchaAutocompleteModule,
-            MatchaBadgeModule,
-            MatchaButtonModule,
-            MatchaButtonToggleModule,
-            MatchaCardModule,
-            MatchaCheckboxModule,
-            MatchaChipsModule,
-            MatchaDatepickerModule,
-            MatchaDividerModule,
-            MatchaElevationModule,
-            MatchaFormFieldModule,
-            MatchaHintTextModule,
-            MatchaIconModule,
-            MatchaInfiniteScrollModule,
-            MatchaInputModule,
-            MatchaMasonryModule,
-            MatchaMenuModule,
-            MatchaModalModule,
-            MatchaPaginatorModule,
-            MatchaProgressBarModule,
-            MatchaRadioButtonModule,
-            MatchaRippleModule,
-            MatchaSelectModule,
-            MatchaSidenavModule,
-            MatchaSlideToggleModule,
-            MatchaSliderModule,
-            MatchaSnackBarModule,
-            MatchaSortHeaderModule,
-            MatchaSpinModule,
-            MatchaTableModule,
-            MatchaTabsModule,
-            MatchaTitleModule,
-            MatchaTooltipModule,
-            MatchaTreeModule, MatchaAccordionModule,
-            MatchaAutocompleteModule,
-            MatchaBadgeModule,
-            MatchaButtonModule,
-            MatchaButtonToggleModule,
-            MatchaCardModule,
-            MatchaCheckboxModule,
-            MatchaChipsModule,
-            MatchaDatepickerModule,
-            MatchaDividerModule,
-            MatchaElevationModule,
-            MatchaFormFieldModule,
-            MatchaHintTextModule,
-            MatchaIconModule,
-            MatchaInfiniteScrollModule,
-            MatchaInputModule,
-            MatchaMasonryModule,
-            MatchaMenuModule,
-            MatchaModalModule,
-            MatchaPaginatorModule,
-            MatchaProgressBarModule,
-            MatchaRadioButtonModule,
-            MatchaRippleModule,
-            MatchaSelectModule,
-            MatchaSidenavModule,
-            MatchaSlideToggleModule,
-            MatchaSliderModule,
-            MatchaSnackBarModule,
-            MatchaSortHeaderModule,
-            MatchaSpinModule,
-            MatchaTableModule,
-            MatchaTabsModule,
-            MatchaTitleModule,
-            MatchaTooltipModule,
-            MatchaTreeModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, MatchaAccordionModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaButtonModule, MatchaButtonToggleModule, MatchaCardModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaFormFieldModule, MatchaHintTextModule, MatchaIconModule, MatchaInfiniteScrollModule, MatchaInputModule, MatchaMasonryModule, MatchaMenuModule, MatchaModalModule, MatchaOptionModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaRadioButtonModule, MatchaRippleModule, MatchaSelectModule, MatchaSidenavModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaSpinModule, MatchaTableModule, MatchaTabsModule, MatchaTitleModule, MatchaTooltipModule, MatchaTreeModule], exports: [MatchaAccordionModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaButtonModule, MatchaButtonToggleModule, MatchaCardModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaFormFieldModule, MatchaHintTextModule, MatchaIconModule, MatchaInfiniteScrollModule, MatchaInputModule, MatchaMasonryModule, MatchaMenuModule, MatchaModalModule, MatchaOptionModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaRadioButtonModule, MatchaRippleModule, MatchaSelectModule, MatchaSidenavModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaSpinModule, MatchaTableModule, MatchaTabsModule, MatchaTitleModule, MatchaTooltipModule, MatchaTreeModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, MatchaAccordionModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaButtonModule, MatchaButtonToggleModule, MatchaCardModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaFormFieldModule, MatchaHintTextModule, MatchaIconModule, MatchaInfiniteScrollModule, MatchaInputModule, MatchaMasonryModule, MatchaMenuModule, MatchaModalModule, MatchaOptionModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaRadioButtonModule, MatchaRippleModule, MatchaSelectModule, MatchaSidenavModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaSpinModule, MatchaTableModule, MatchaTabsModule, MatchaTitleModule, MatchaTooltipModule, MatchaTreeModule, MatchaAccordionModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaButtonModule, MatchaButtonToggleModule, MatchaCardModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaFormFieldModule, MatchaHintTextModule, MatchaIconModule, MatchaInfiniteScrollModule, MatchaInputModule, MatchaMasonryModule, MatchaMenuModule, MatchaModalModule, MatchaOptionModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaRadioButtonModule, MatchaRippleModule, MatchaSelectModule, MatchaSidenavModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaSpinModule, MatchaTableModule, MatchaTabsModule, MatchaTitleModule, MatchaTooltipModule, MatchaTreeModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        MatchaOverflowDraggableComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatchaAccordionModule,
-                        MatchaAutocompleteModule,
-                        MatchaBadgeModule,
-                        MatchaButtonModule,
-                        MatchaButtonToggleModule,
-                        MatchaCardModule,
-                        MatchaCheckboxModule,
-                        MatchaChipsModule,
-                        MatchaDatepickerModule,
-                        MatchaDividerModule,
-                        MatchaElevationModule,
-                        MatchaFormFieldModule,
-                        MatchaHintTextModule,
-                        MatchaIconModule,
-                        MatchaInfiniteScrollModule,
-                        MatchaInputModule,
-                        MatchaMasonryModule,
-                        MatchaMenuModule,
-                        MatchaModalModule,
-                        MatchaPaginatorModule,
-                        MatchaProgressBarModule,
-                        MatchaRadioButtonModule,
-                        MatchaRippleModule,
-                        MatchaSelectModule,
-                        MatchaSidenavModule,
-                        MatchaSlideToggleModule,
-                        MatchaSliderModule,
-                        MatchaSnackBarModule,
-                        MatchaSortHeaderModule,
-                        MatchaSpinModule,
-                        MatchaTableModule,
-                        MatchaTabsModule,
-                        MatchaTitleModule,
-                        MatchaTooltipModule,
-                        MatchaTreeModule
-                    ],
-                    exports: [
-                        MatchaAccordionModule,
-                        MatchaAutocompleteModule,
-                        MatchaBadgeModule,
-                        MatchaButtonModule,
-                        MatchaButtonToggleModule,
-                        MatchaCardModule,
-                        MatchaCheckboxModule,
-                        MatchaChipsModule,
-                        MatchaDatepickerModule,
-                        MatchaDividerModule,
-                        MatchaElevationModule,
-                        MatchaFormFieldModule,
-                        MatchaHintTextModule,
-                        MatchaIconModule,
-                        MatchaInfiniteScrollModule,
-                        MatchaInputModule,
-                        MatchaMasonryModule,
-                        MatchaMenuModule,
-                        MatchaModalModule,
-                        MatchaPaginatorModule,
-                        MatchaProgressBarModule,
-                        MatchaRadioButtonModule,
-                        MatchaRippleModule,
-                        MatchaSelectModule,
-                        MatchaSidenavModule,
-                        MatchaSlideToggleModule,
-                        MatchaSliderModule,
-                        MatchaSnackBarModule,
-                        MatchaSortHeaderModule,
-                        MatchaSpinModule,
-                        MatchaTableModule,
-                        MatchaTabsModule,
-                        MatchaTitleModule,
-                        MatchaTooltipModule,
-                        MatchaTreeModule
-                    ]
+                    declarations: [MatchaOverflowDraggableComponent],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, MatchaAccordionModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaButtonModule, MatchaButtonToggleModule, MatchaCardModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaFormFieldModule, MatchaHintTextModule, MatchaIconModule, MatchaInfiniteScrollModule, MatchaInputModule, MatchaMasonryModule, MatchaMenuModule, MatchaModalModule, MatchaOptionModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaRadioButtonModule, MatchaRippleModule, MatchaSelectModule, MatchaSidenavModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaSpinModule, MatchaTableModule, MatchaTabsModule, MatchaTitleModule, MatchaTooltipModule, MatchaTreeModule],
+                    exports: [MatchaAccordionModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaButtonModule, MatchaButtonToggleModule, MatchaCardModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDividerModule, MatchaElevationModule, MatchaFormFieldModule, MatchaHintTextModule, MatchaIconModule, MatchaInfiniteScrollModule, MatchaInputModule, MatchaMasonryModule, MatchaMenuModule, MatchaModalModule, MatchaOptionModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaRadioButtonModule, MatchaRippleModule, MatchaSelectModule, MatchaSidenavModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaSpinModule, MatchaTableModule, MatchaTabsModule, MatchaTitleModule, MatchaTooltipModule, MatchaTreeModule],
                 }]
         }] });
 
@@ -3874,5 +3839,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOverlayService, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
+export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOptionService, MatchaOverlayService, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
 //# sourceMappingURL=matcha-components.mjs.map