matcha-components 19.103.0 → 19.104.0

package/fesm2022/matcha-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, Renderer2, HostBinding, Inject, HostListener, ContentChild, Directive, forwardRef, ChangeDetectionStrategy, InjectionToken, inject, Injectable, input, output, signal, ViewChild, NgModule, createComponent, Pipe } from '@angular/core';
+import { EventEmitter, Output, Input, Component, ContentChildren, ElementRef, Renderer2, HostBinding, Inject, HostListener, ContentChild, Directive, forwardRef, ChangeDetectionStrategy, InjectionToken, inject, Injectable, input, output, signal, ViewChild, TemplateRef, NgModule, createComponent, Pipe } 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 { DOCUMENT, CommonModule } from '@angular/common';
@@ -6176,6 +6176,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Output
             }] } });
 
+class StepComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: StepComponent, isStandalone: false, selector: "step", inputs: { step: "step" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `<ng-template><ng-content></ng-content></ng-template>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: StepComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'step',
+                    template: `<ng-template><ng-content></ng-content></ng-template>`,
+                    standalone: false
+                }]
+        }], propDecorators: { step: [{
+                type: Input
+            }], template: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
+class MatchaStepperStateService {
+    constructor() {
+        this.steps$ = new BehaviorSubject([]);
+        this.activeStep$ = new BehaviorSubject(0);
+    }
+    setSteps(steps) {
+        this.steps$.next(steps);
+    }
+    setActiveStep(index) {
+        this.activeStep$.next(index);
+    }
+    nextStep() {
+        const steps = this.steps$.value;
+        const current = this.activeStep$.value;
+        if (current < steps.length - 1) {
+            this.activeStep$.next(current + 1);
+        }
+    }
+    prevStep() {
+        const current = this.activeStep$.value;
+        if (current > 0) {
+            this.activeStep$.next(current - 1);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperStateService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperStateService, decorators: [{
+            type: Injectable
+        }] });
+
+class MatchaStepperComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: MatchaStepperComponent, isStandalone: false, selector: "matcha-stepper", providers: [MatchaStepperStateService], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'matcha-stepper',
+                    template: `<ng-content></ng-content>`,
+                    providers: [MatchaStepperStateService],
+                    standalone: false
+                }]
+        }] });
+
+class MatchaStepperContentComponent {
+    constructor(stepperState) {
+        this.stepperState = stepperState;
+        this.stepsArray = [];
+        this.activeStep = 0;
+    }
+    ngAfterContentInit() {
+        this.stepsArray = this.steps.toArray().sort((a, b) => Number(a.step) - Number(b.step));
+        this.stepperState.setSteps(this.stepsArray.map(s => s.step));
+        this.stepperState.activeStep$.subscribe(step => this.activeStep = step);
+    }
+    nextStep() {
+        this.stepperState.nextStep();
+    }
+    prevStep() {
+        this.stepperState.prevStep();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperContentComponent, deps: [{ token: MatchaStepperStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: MatchaStepperContentComponent, isStandalone: false, selector: "matcha-stepper-content", queries: [{ propertyName: "steps", predicate: StepComponent }], ngImport: i0, template: `
+    <ng-container *ngIf="stepsArray.length">
+      <ng-container *ngTemplateOutlet="stepsArray[activeStep]?.template || null"></ng-container>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'matcha-stepper-content',
+                    template: `
+    <ng-container *ngIf="stepsArray.length">
+      <ng-container *ngTemplateOutlet="stepsArray[activeStep]?.template || null"></ng-container>
+    </ng-container>
+  `,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: MatchaStepperStateService }], propDecorators: { steps: [{
+                type: ContentChildren,
+                args: [StepComponent]
+            }] } });
+
+class MatchaStepperControllerComponent {
+    constructor(stepperState) {
+        this.stepperState = stepperState;
+        this.steps = [];
+        this.activeStep = 0;
+    }
+    ngOnInit() {
+        this.stepperState.steps$.subscribe(steps => this.steps = steps);
+        this.stepperState.activeStep$.subscribe(step => this.activeStep = step);
+    }
+    goToStep(index) {
+        if (this.disableNext && this.activeStep < index)
+            return;
+        this.stepperState.setActiveStep(index);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperControllerComponent, deps: [{ token: MatchaStepperStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: MatchaStepperControllerComponent, isStandalone: false, selector: "matcha-stepper-controller", inputs: { disableNext: "disableNext" }, providers: [], ngImport: i0, template: "<div class=\"flex-column flex-align-end gap-16\">\n    <span class=\"fw-900 fs-12 lh-12\">{{steps[activeStep]}}</span>\n    <div class=\"d-flex align-center gap-8\">\n        <ng-container *ngFor=\"let step of steps; let i = index\">\n            <div (click)=\"goToStep(i)\" class=\"cursor-pointer w-32 h-8 radius-8\" [class.background-accent]=\"i <= activeStep\" [class.background-disabled]=\"i > activeStep\"></div>          \n        </ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperControllerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-stepper-controller', providers: [], standalone: false, template: "<div class=\"flex-column flex-align-end gap-16\">\n    <span class=\"fw-900 fs-12 lh-12\">{{steps[activeStep]}}</span>\n    <div class=\"d-flex align-center gap-8\">\n        <ng-container *ngFor=\"let step of steps; let i = index\">\n            <div (click)=\"goToStep(i)\" class=\"cursor-pointer w-32 h-8 radius-8\" [class.background-accent]=\"i <= activeStep\" [class.background-disabled]=\"i > activeStep\"></div>          \n        </ng-container>\n    </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: MatchaStepperStateService }], propDecorators: { disableNext: [{
+                type: Input
+            }] } });
+
 class MatchaTooltipDirective {
     constructor(el, renderer) {
         this.el = el;
@@ -7607,6 +7735,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }] });
 
+class PrevStepDirective {
+    constructor(stepper) {
+        this.stepper = stepper;
+    }
+    onClick() {
+        this.stepper?.prevStep();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PrevStepDirective, deps: [{ token: MatchaStepperContentComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: PrevStepDirective, isStandalone: true, selector: "[prevStep]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PrevStepDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[prevStep]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: MatchaStepperContentComponent }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class NextStepDirective {
+    constructor(stepper) {
+        this.stepper = stepper;
+    }
+    onClick() {
+        this.stepper?.nextStep();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NextStepDirective, deps: [{ token: MatchaStepperContentComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: NextStepDirective, isStandalone: true, selector: "[nextStep]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NextStepDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nextStep]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: MatchaStepperContentComponent }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class MatchaStepperModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperModule, declarations: [MatchaStepperControllerComponent,
+            MatchaStepperComponent,
+            MatchaStepperContentComponent,
+            StepComponent], imports: [CommonModule,
+            PrevStepDirective,
+            NextStepDirective], exports: [MatchaStepperControllerComponent,
+            MatchaStepperComponent,
+            MatchaStepperContentComponent,
+            StepComponent,
+            PrevStepDirective,
+            NextStepDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaStepperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaStepperControllerComponent,
+                        MatchaStepperComponent,
+                        MatchaStepperContentComponent,
+                        StepComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PrevStepDirective,
+                        NextStepDirective
+                    ],
+                    exports: [
+                        MatchaStepperControllerComponent,
+                        MatchaStepperComponent,
+                        MatchaStepperContentComponent,
+                        StepComponent,
+                        PrevStepDirective,
+                        NextStepDirective
+                    ],
+                    providers: []
+                }]
+        }] });
+
 class NgxMaskPipe {
     constructor() {
         this.defaultOptions = inject(NGX_MASK_CONFIG);
@@ -7828,6 +8039,7 @@ class MatchaComponentsModule {
             MatchaSnackBarModule,
             MatchaSortHeaderModule,
             MatchaSpinModule,
+            MatchaStepperModule,
             MatchaTableModule,
             MatchaTabsModule,
             MatchaTitleModule,
@@ -7864,6 +8076,7 @@ class MatchaComponentsModule {
             MatchaSnackBarModule,
             MatchaSortHeaderModule,
             MatchaSpinModule,
+            MatchaStepperModule,
             MatchaTableModule,
             MatchaTabsModule,
             MatchaTitleModule,
@@ -7904,6 +8117,7 @@ class MatchaComponentsModule {
             MatchaSnackBarModule,
             MatchaSortHeaderModule,
             MatchaSpinModule,
+            MatchaStepperModule,
             MatchaTableModule,
             MatchaTabsModule,
             MatchaTitleModule,
@@ -7940,6 +8154,7 @@ class MatchaComponentsModule {
             MatchaSnackBarModule,
             MatchaSortHeaderModule,
             MatchaSpinModule,
+            MatchaStepperModule,
             MatchaTableModule,
             MatchaTabsModule,
             MatchaTitleModule,
@@ -7986,6 +8201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         MatchaSnackBarModule,
                         MatchaSortHeaderModule,
                         MatchaSpinModule,
+                        MatchaStepperModule,
                         MatchaTableModule,
                         MatchaTabsModule,
                         MatchaTitleModule,
@@ -8024,6 +8240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         MatchaSnackBarModule,
                         MatchaSortHeaderModule,
                         MatchaSpinModule,
+                        MatchaStepperModule,
                         MatchaTableModule,
                         MatchaTabsModule,
                         MatchaTitleModule,
@@ -8032,6 +8249,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }] });
 
+class StepContentDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: StepContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: StepContentDirective, isStandalone: true, selector: "[step]", inputs: { step: "step" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: StepContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[step]'
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { step: [{
+                type: Input,
+                args: ['step']
+            }] } });
+
 /*
  * Public API Surface of matcha-components
  */
@@ -8046,11 +8280,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 // -----------------------------------------------------------
 // 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, MatchaInputPhoneComponent, MatchaInputPhoneModule, 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, 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, MatchaInputPhoneComponent, MatchaInputPhoneModule, 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, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective };
 //# sourceMappingURL=matcha-components.mjs.map