matcha-components 20.207.0 → 20.208.0

package/fesm2022/matcha-components.mjs

@@ -3930,11 +3930,11 @@ class MatchaLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <span *ngIf=\"isRequired\">&nbsp;*</span>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <span *ngIf=\"isRequired\">&nbsp;*</span>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 color-grey\">(Opcional)</span> -->\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-label', standalone: false, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <span *ngIf=\"isRequired\">&nbsp;*</span>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>\n" }]
+            args: [{ selector: 'matcha-label', standalone: false, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <span *ngIf=\"isRequired\">&nbsp;*</span>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 color-grey\">(Opcional)</span> -->\n</label>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { color: [{
                 type: Input
             }] } });
@@ -8891,7 +8891,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 class MatchaTimeComponent {
     constructor() {
-        // Opção para desabilitar a validação quando dias são diferentes
+        this.placeholder = '__:__';
+        this.disabled = false;
+        this.showNativePicker = true;
+        this.displayValue = '';
+        this.value = '';
+        this.isDisabled = false;
+        this.onChange = (_value) => { };
+        this.onTouched = () => { };
+        this.onValidatorChange = () => { };
+    }
+    // ControlValueAccessor methods
+    writeValue(value) {
+        if (value && typeof value === 'string' && /^\d{2}:\d{2}$/.test(value)) {
+            this.displayValue = value;
+            this.value = value;
+        }
+        else {
+            this.displayValue = '';
+            this.value = '';
+        }
+        if (this.textInput?.nativeElement) {
+            this.textInput.nativeElement.value = this.displayValue;
+        }
+        if (this.nativeTimeInput?.nativeElement) {
+            this.nativeTimeInput.nativeElement.value = this.value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.disabled = isDisabled;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    // Validator
+    validate(_control) {
+        if (this.displayValue.length === 5 && !this.isValidTime(this.displayValue)) {
+            return { invalidTime: true };
+        }
+        return null;
+    }
+    // Text input handlers
+    onInputChange(event) {
+        const input = event.target;
+        const masked = this.applyTimeMask(input.value);
+        if (input.value !== masked) {
+            input.value = masked;
+        }
+        this.displayValue = masked;
+        if (masked.length === 5 && this.isValidTime(masked)) {
+            this.value = masked;
+            this.onChange(masked);
+            if (this.nativeTimeInput?.nativeElement) {
+                this.nativeTimeInput.nativeElement.value = masked;
+            }
+        }
+        else {
+            this.value = '';
+            this.onChange(null);
+        }
+        this.onValidatorChange();
+    }
+    onKeyDown(event) {
+        const allowedKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+        const isCtrl = event.ctrlKey || event.metaKey;
+        const isAllowedCtrl = isCtrl && ['a', 'c', 'v', 'x'].includes(event.key.toLowerCase());
+        if (allowedKeys.includes(event.key) || isAllowedCtrl) {
+            return;
+        }
+        if (!/[0-9:]/.test(event.key)) {
+            event.preventDefault();
+        }
+    }
+    onBlur() {
+        this.onTouched();
+        this.onValidatorChange();
+    }
+    // Native time picker handlers
+    onNativeTimeChange(event) {
+        const input = event.target;
+        const value = input.value; // HH:MM from native picker
+        if (value) {
+            this.value = value;
+            this.displayValue = value;
+            if (this.textInput?.nativeElement) {
+                this.textInput.nativeElement.value = value;
+            }
+            this.onChange(value);
+        }
+        else {
+            this.value = '';
+            this.displayValue = '';
+            if (this.textInput?.nativeElement) {
+                this.textInput.nativeElement.value = '';
+            }
+            this.onChange(null);
+        }
+        this.onValidatorChange();
+    }
+    openNativeTimePicker() {
+        if (this.nativeTimeInput?.nativeElement && !this.disabled && !this.isDisabled) {
+            if (typeof this.nativeTimeInput.nativeElement.showPicker === 'function') {
+                this.nativeTimeInput.nativeElement.showPicker();
+            }
+            else {
+                this.nativeTimeInput.nativeElement.focus();
+                this.nativeTimeInput.nativeElement.click();
+            }
+        }
+    }
+    applyTimeMask(value) {
+        const digits = value.replace(/\D/g, '').slice(0, 4);
+        if (digits.length <= 2) {
+            return digits;
+        }
+        return `${digits.slice(0, 2)}:${digits.slice(2)}`;
+    }
+    isValidTime(value) {
+        if (!/^\d{2}:\d{2}$/.test(value)) {
+            return false;
+        }
+        const [hours, minutes] = value.split(':').map(Number);
+        return hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTimeComponent, isStandalone: false, selector: "matcha-time", inputs: { placeholder: "placeholder", disabled: "disabled", showNativePicker: "showNativePicker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MatchaTimeComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MatchaTimeComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "nativeTimeInput", first: true, predicate: ["nativeTimeInput"], descendants: true }], ngImport: i0, template: "<div class=\"matcha-time-container\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"matcha-time-input\"\n    [value]=\"displayValue\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || isDisabled\"\n    maxlength=\"5\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n  />\n\n  <!-- Input nativo de hora (hidden) para usar o timepicker nativo -->\n  <input\n    #nativeTimeInput\n    type=\"time\"\n    class=\"matcha-time-native-input\"\n    [value]=\"value\"\n    [disabled]=\"disabled || isDisabled\"\n    (change)=\"onNativeTimeChange($event)\"\n    tabindex=\"-1\"\n  />\n\n  <!-- Bot\u00E3o para abrir timepicker nativo (opcional) -->\n  <button\n    *ngIf=\"showNativePicker && !disabled && !isDisabled\"\n    type=\"button\"\n    class=\"matcha-time-picker-button mr--12\"\n    (click)=\"openNativeTimePicker()\"\n    [disabled]=\"disabled || isDisabled\"\n    aria-label=\"Abrir seletor de hora\"\n    tabindex=\"0\"\n  >\n    <span class=\"i-matcha-clock-out color-grey\"></span>\n  </button>\n</div>\n", styles: [".matcha-time-container{position:relative;display:flex;align-items:center;width:100%}.matcha-time-input{width:100%}.matcha-time-native-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.matcha-time-picker-button{position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-time', encapsulation: ViewEncapsulation.None, standalone: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MatchaTimeComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MatchaTimeComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"matcha-time-container\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"matcha-time-input\"\n    [value]=\"displayValue\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || isDisabled\"\n    maxlength=\"5\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n  />\n\n  <!-- Input nativo de hora (hidden) para usar o timepicker nativo -->\n  <input\n    #nativeTimeInput\n    type=\"time\"\n    class=\"matcha-time-native-input\"\n    [value]=\"value\"\n    [disabled]=\"disabled || isDisabled\"\n    (change)=\"onNativeTimeChange($event)\"\n    tabindex=\"-1\"\n  />\n\n  <!-- Bot\u00E3o para abrir timepicker nativo (opcional) -->\n  <button\n    *ngIf=\"showNativePicker && !disabled && !isDisabled\"\n    type=\"button\"\n    class=\"matcha-time-picker-button mr--12\"\n    (click)=\"openNativeTimePicker()\"\n    [disabled]=\"disabled || isDisabled\"\n    aria-label=\"Abrir seletor de hora\"\n    tabindex=\"0\"\n  >\n    <span class=\"i-matcha-clock-out color-grey\"></span>\n  </button>\n</div>\n", styles: [".matcha-time-container{position:relative;display:flex;align-items:center;width:100%}.matcha-time-input{width:100%}.matcha-time-native-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.matcha-time-picker-button{position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;z-index:1}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], showNativePicker: [{
+                type: Input
+            }], textInput: [{
+                type: ViewChild,
+                args: ['textInput']
+            }], nativeTimeInput: [{
+                type: ViewChild,
+                args: ['nativeTimeInput']
+            }] } });
+
+class MatchaTimeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, declarations: [MatchaTimeComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule], exports: [MatchaTimeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaTimeComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule
+                    ],
+                    exports: [MatchaTimeComponent]
+                }]
+        }] });
+
+class MatchaTimeRangeComponent {
+    constructor() {
         this.allowCrossDays = false;
         this.startTimeControl = null;
         this.endTimeControl = null;
@@ -8900,12 +9095,10 @@ class MatchaTimeComponent {
         this.subscription = new Subscription();
     }
     ngAfterContentInit() {
-        // Pega os controles projetados no template
         const controlsArray = this.controls.toArray();
         if (controlsArray.length >= 2) {
             this.startTimeControl = controlsArray[0].control;
             this.endTimeControl = controlsArray[1].control;
-            // Tenta encontrar os controles de data no form parent
             if (this.startTimeControl && this.endTimeControl &&
                 this.startDateControlName && this.endDateControlName) {
                 const formGroup = this.startTimeControl.parent;
@@ -8914,12 +9107,10 @@ class MatchaTimeComponent {
                     this.endDateControl = formGroup.get(this.endDateControlName);
                 }
             }
-            // Adiciona validação para os campos de tempo
             if (this.startTimeControl && this.endTimeControl) {
                 this.subscription.add(this.startTimeControl.valueChanges.subscribe(() => this.validateTimeRange()));
                 this.subscription.add(this.endTimeControl.valueChanges.subscribe(() => this.validateTimeRange()));
             }
-            // Adiciona validação para os campos de data, se existirem
             if (this.startDateControl && this.endDateControl) {
                 this.subscription.add(this.startDateControl.valueChanges.subscribe(() => this.validateTimeRange()));
                 this.subscription.add(this.endDateControl.valueChanges.subscribe(() => this.validateTimeRange()));
@@ -8929,9 +9120,6 @@ class MatchaTimeComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    /**
-     * Validação de intervalo de tempo que pode cruzar dias
-     */
     validateTimeRange() {
         if (!this.startTimeControl || !this.endTimeControl)
             return;
@@ -8939,13 +9127,11 @@ class MatchaTimeComponent {
             return;
         let startDateTime;
         let endDateTime;
-        // Se temos controles de data, usamos as datas fornecidas
         if (this.startDateControl?.value && this.endDateControl?.value) {
             const startDate = this.startDateControl.value;
             const endDate = this.endDateControl.value;
             startDateTime = new Date(`${startDate}T${this.startTimeControl.value}`);
             endDateTime = new Date(`${endDate}T${this.endTimeControl.value}`);
-            // Comparação de data + hora
             if (startDateTime > endDateTime) {
                 this.setValidationErrors();
             }
@@ -8953,12 +9139,9 @@ class MatchaTimeComponent {
                 this.clearValidationErrors();
             }
         }
-        // Sem controles de data, ou se allowCrossDays=true, não validamos cruzamento de dias
         else if (this.allowCrossDays) {
-            // Nesse caso, assumimos que o intervalo é válido mesmo se hora final < hora inicial
             this.clearValidationErrors();
         }
-        // Caso tradicional: mesmo dia, validação simples de hora
         else {
             const today = new Date().toISOString().split('T')[0];
             startDateTime = new Date(`${today}T${this.startTimeControl.value}`);
@@ -8971,23 +9154,14 @@ class MatchaTimeComponent {
             }
         }
     }
-    /**
-     * Define erros de validação nos controles
-     */
     setValidationErrors() {
         this.startTimeControl?.setErrors({ ['startAfterEnd']: true });
         this.endTimeControl?.setErrors({ ['endBeforeStart']: true });
     }
-    /**
-     * Remove erros específicos de validação
-     */
     clearValidationErrors() {
         this.removeSpecificError(this.startTimeControl, 'startAfterEnd');
         this.removeSpecificError(this.endTimeControl, 'endBeforeStart');
     }
-    /**
-     * Remove um erro específico sem afetar outros erros
-     */
     removeSpecificError(control, errorName) {
         if (!control)
             return;
@@ -8997,12 +9171,12 @@ class MatchaTimeComponent {
             control.setErrors(Object.keys(errors).length ? errors : null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTimeComponent, isStandalone: false, selector: "matcha-time", inputs: { startDateControlName: "startDateControlName", endDateControlName: "endDateControlName", allowCrossDays: "allowCrossDays" }, queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], ngImport: i0, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTimeRangeComponent, isStandalone: false, selector: "matcha-time-range", inputs: { startDateControlName: "startDateControlName", endDateControlName: "endDateControlName", allowCrossDays: "allowCrossDays" }, queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], ngImport: i0, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-time', standalone: false, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'matcha-time-range', standalone: false, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { controls: [{
                 type: ContentChildren,
                 args: [NgControl, { descendants: true }]
@@ -9014,22 +9188,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }] } });
 
-class MatchaTimeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, declarations: [MatchaTimeComponent], imports: [CommonModule,
-            ReactiveFormsModule], exports: [MatchaTimeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, imports: [CommonModule,
+class MatchaTimeRangeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeRangeModule, declarations: [MatchaTimeRangeComponent], imports: [CommonModule,
+            ReactiveFormsModule], exports: [MatchaTimeRangeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeRangeModule, imports: [CommonModule,
             ReactiveFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeRangeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MatchaTimeComponent],
+                    declarations: [MatchaTimeRangeComponent],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule
                     ],
-                    exports: [MatchaTimeComponent]
+                    exports: [MatchaTimeRangeComponent]
                 }]
         }] });
 
@@ -14337,6 +14511,7 @@ class MatchaComponentsModule {
             MatchaTooltipModule,
             MatchaDateRangeModule,
             MatchaTimeModule,
+            MatchaTimeRangeModule,
             MatchaDropListModule,
             MatchaPageLayoutModule,
             MatchaDrawerModule,
@@ -14378,6 +14553,7 @@ class MatchaComponentsModule {
             MatchaTooltipModule,
             MatchaDateRangeModule,
             MatchaTimeModule,
+            MatchaTimeRangeModule,
             MatchaDropListModule,
             MatchaPageLayoutModule,
             MatchaAvatarModule,
@@ -14424,6 +14600,7 @@ class MatchaComponentsModule {
             MatchaTooltipModule,
             MatchaDateRangeModule,
             MatchaTimeModule,
+            MatchaTimeRangeModule,
             MatchaDropListModule,
             MatchaPageLayoutModule,
             MatchaDrawerModule,
@@ -14465,6 +14642,7 @@ class MatchaComponentsModule {
             MatchaTooltipModule,
             MatchaDateRangeModule,
             MatchaTimeModule,
+            MatchaTimeRangeModule,
             MatchaDropListModule,
             MatchaPageLayoutModule,
             MatchaAvatarModule,
@@ -14517,6 +14695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatchaTooltipModule,
                         MatchaDateRangeModule,
                         MatchaTimeModule,
+                        MatchaTimeRangeModule,
                         MatchaDropListModule,
                         MatchaPageLayoutModule,
                         MatchaDrawerModule,
@@ -14560,6 +14739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatchaTooltipModule,
                         MatchaDateRangeModule,
                         MatchaTimeModule,
+                        MatchaTimeRangeModule,
                         MatchaDropListModule,
                         MatchaPageLayoutModule,
                         MatchaAvatarModule,
@@ -15183,5 +15363,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
+export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map