matcha-components 19.96.0 → 19.101.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([
@@ -1887,6 +1888,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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.14", ngImport: i0, type: MatchaOptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaOptionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaOptionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+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.14", 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.14", 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.14", 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 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.14", 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.14", 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.14", 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 MatchaSlideToggleComponent {
     set checked(value) {
         const newCheckedState = value === '' ? true : !!value;
@@ -3817,6 +3959,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+class MatchaOptionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: MatchaOptionModule, declarations: [MatchaOptionComponent], imports: [CommonModule], exports: [MatchaOptionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaOptionModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaOptionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaOptionComponent],
+                    imports: [CommonModule],
+                    exports: [MatchaOptionComponent],
+                }]
+        }] });
+
+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.matchaOptionService = matchaOptionService;
+    }
+    ngOnInit() {
+        this.matchaOptionService.selectedOption$.subscribe((option) => {
+            this._updateInputValue(option);
+        });
+    }
+    _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.14", 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.14", 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.14", ngImport: i0, type: MatchaAutocompleteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matchaAutocomplete]',
+                    standalone: false,
+                }]
+        }], 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.14", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", 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.14", ngImport: i0, type: MatchaAutocompleteModule, imports: [CommonModule, FormsModule, MatchaOptionModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaAutocompleteComponent, MatchaAutocompleteDirective],
+                    imports: [CommonModule, FormsModule, MatchaOptionModule],
+                    exports: [MatchaAutocompleteComponent, MatchaAutocompleteDirective],
+                }]
+        }] });
+
 /*
  * Public API Surface of matcha-components
  */
@@ -3831,11 +4068,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 // -----------------------------------------------------------
 // COMPONENTS
 // -----------------------------------------------------------
-//export * from './lib/matcha-autocomplete/matcha-autocomplete.directive';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, 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, MatchaToolbarCustomButtonComponent, 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, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
 //# sourceMappingURL=matcha-components.mjs.map