mat-pick-range-dates/fesm2022/mat-pick-range-dates.mjs

Angular 2 component range date picker.

import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Input, Output, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, Inject, ViewEncapsulation, Injector, NgModule } from '@angular/core';
import * as i3 from '@angular/material/datepicker';
import { MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
import * as i4 from '@angular/common';
import { DatePipe, CommonModule } from '@angular/common';
import * as i3$1 from '@angular/cdk/overlay';
import { OverlayConfig, OverlayRef, OverlayModule } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { takeWhile } from 'rxjs/operators';
import { Subject } from 'rxjs';
import * as i5 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i5$1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i6 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i7 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatNativeDateModule } from '@angular/material/core';

class ConfigStoreService {
    constructor() {
        this.defaultOptions = {
            applyLabel: 'Apply',
            cancelLabel: 'Cancel',
            placeholder: 'Choose a date',
            format: 'mediumDate',
            excludeWeekends: false,
            locale: 'en-US',
            fromMinMax: { fromDate: null, toDate: null },
            toMinMax: { fromDate: null, toDate: null },
            range: { fromDate: new Date(), toDate: new Date() },
            calendarOverlayConfig: {
                panelClass: 'mat-prd-overlay',
                hasBackdrop: true,
                backdropClass: 'mat-prd-overlay-backdrop',
                shouldCloseOnBackdropClick: true,
            },
        };
        this._rdpOptions = this.defaultOptions;
    }
    get options() {
        return this._rdpOptions;
    }
    set options(options) {
        this._rdpOptions = { ...this.defaultOptions, ...options };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfigStoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfigStoreService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfigStoreService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [] });

class CalendarComponent {
    constructor(configStore) {
        this.configStore = configStore;
        this.selectedDateChange = new EventEmitter();
        this.weekendFilter = (d) => true;
        this.dateFormat = configStore.options.format;
        if (configStore.options.excludeWeekends) {
            this.weekendFilter = (d) => {
                const day = d.getDay();
                return day !== 0 && day !== 6;
            };
        }
    }
    ngOnChanges(changes) {
        if (changes && changes['selectedDate'] && this.matCalendar) {
            this.matCalendar.activeDate = changes['selectedDate'].currentValue;
        }
    }
    onSelectedChange(date) {
        this.selectedDateChange.emit(date);
    }
    onYearSelected(e) { }
    onUserSelection(e) { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarComponent, deps: [{ token: ConfigStoreService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: CalendarComponent, isStandalone: false, selector: "calendar", inputs: { selectedDate: "selectedDate", prefixLabel: "prefixLabel", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "matCalendar", first: true, predicate: MatCalendar, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n  <span class=\"mat-prd-label\" *ngIf=\"selectedDate && prefixLabel\">\r\n    <label>{{ prefixLabel }}</label>\r\n    <label class=\"mat-prd-selected-label\">{{ selectedDate | date : dateFormat }}</label>\r\n  </span>\r\n  <mat-calendar\r\n    [startAt]=\"selectedDate\"\r\n    [selected]=\"selectedDate\"\r\n    [minDate]=\"minDate\"\r\n    [maxDate]=\"maxDate\"\r\n    (selectedChange)=\"onSelectedChange($event)\"\r\n    (yearSelected)=\"onYearSelected($event)\"\r\n    (_userSelection)=\"onUserSelection($event)\"\r\n    [dateFilter]=\"weekendFilter\"\r\n  >\r\n  </mat-calendar>\r\n</div>\r\n", styles: [".mat-prd-label{background:#fafafa;margin:15px;padding:4px 2px;width:100%;font-size:14px;font-weight:500}.mat-prd-selected-label{color:#00000061;padding-left:5%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'calendar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div>\r\n  <span class=\"mat-prd-label\" *ngIf=\"selectedDate && prefixLabel\">\r\n    <label>{{ prefixLabel }}</label>\r\n    <label class=\"mat-prd-selected-label\">{{ selectedDate | date : dateFormat }}</label>\r\n  </span>\r\n  <mat-calendar\r\n    [startAt]=\"selectedDate\"\r\n    [selected]=\"selectedDate\"\r\n    [minDate]=\"minDate\"\r\n    [maxDate]=\"maxDate\"\r\n    (selectedChange)=\"onSelectedChange($event)\"\r\n    (yearSelected)=\"onYearSelected($event)\"\r\n    (_userSelection)=\"onUserSelection($event)\"\r\n    [dateFilter]=\"weekendFilter\"\r\n  >\r\n  </mat-calendar>\r\n</div>\r\n", styles: [".mat-prd-label{background:#fafafa;margin:15px;padding:4px 2px;width:100%;font-size:14px;font-weight:500}.mat-prd-selected-label{color:#00000061;padding-left:5%}\n"] }]
        }], ctorParameters: () => [{ type: ConfigStoreService }], propDecorators: { matCalendar: [{
                type: ViewChild,
                args: [MatCalendar, { static: true }]
            }], selectedDateChange: [{
                type: Output
            }], selectedDate: [{
                type: Input
            }], prefixLabel: [{
                type: Input
            }], minDate: [{
                type: Input
            }], maxDate: [{
                type: Input
            }] } });

const DATE = new InjectionToken('date');
class RangeStoreService {
    constructor(_fromDate, _toDate) {
        this._fromDate = _fromDate;
        this._toDate = _toDate;
        this.rangeUpdate$ = new Subject();
    }
    get fromDate() {
        return this._fromDate;
    }
    get toDate() {
        return this._toDate;
    }
    updateRange(fromDate = this._fromDate, toDate = this._toDate) {
        this._fromDate = fromDate;
        this._toDate = toDate;
        this.rangeUpdate$.next({ fromDate: this._fromDate, toDate: this._toDate });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RangeStoreService, deps: [{ token: DATE }, { token: DATE }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RangeStoreService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: RangeStoreService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: Date, decorators: [{
                    type: Inject,
                    args: [DATE]
                }] }, { type: Date, decorators: [{
                    type: Inject,
                    args: [DATE]
                }] }] });

class PickerOverlayComponent {
    constructor(rangeStoreService, configService, overlayRef) {
        this.rangeStoreService = rangeStoreService;
        this.configService = configService;
        this.overlayRef = overlayRef;
    }
    ngOnInit() {
        this.fromDate = this.rangeStoreService.fromDate;
        if (this.fromDate) {
            this.toMinDate = this.fromDate;
        }
        this.toDate = this.rangeStoreService.toDate;
        if (this.toDate) {
            this.toMinDate = this.toDate;
        }
        ({ fromDate: this.fromMinDate, toDate: this.fromMaxDate } = this.configService.options.fromMinMax);
        ({ fromDate: this.toMinDate, toDate: this.toMaxDate } = this.configService.options.toMinMax);
    }
    updateFromDate(date) {
        this.fromDate = date;
        this.toMinDate = date;
    }
    updateToDate(date) {
        this.toDate = date;
        this.fromMaxDate = date;
    }
    updateRangeByPreset(presetItem) {
        this.updateFromDate(presetItem.range.fromDate);
        this.updateToDate(presetItem.range.toDate);
    }
    applyNewDates(e) {
        this.rangeStoreService.updateRange(this.fromDate, this.toDate);
        this.disposeOverLay();
    }
    discardNewDates(e) {
        this.disposeOverLay();
    }
    disposeOverLay() {
        this.overlayRef.dispose();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PickerOverlayComponent, deps: [{ token: RangeStoreService }, { token: ConfigStoreService }, { token: i3$1.OverlayRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PickerOverlayComponent, isStandalone: false, selector: "picker-overlay", ngImport: i0, template: "<div class=\"mat-prd-calendar-container\">\r\n  <div class=\"mat-prd-controls\">\r\n    <button mat-button color=\"primary\" (click)=\"applyNewDates($event)\">\r\n      {{ configService?.options?.applyLabel }}\r\n    </button>\r\n    <button mat-button (click)=\"discardNewDates($event)\">\r\n      {{ configService?.options?.cancelLabel }}\r\n    </button>\r\n  </div>\r\n  <div class=\"mat-prd-calendar-items\">\r\n    <div class=\"mat-prd-calendar-item\">\r\n      <calendar\r\n        [prefixLabel]=\"configService?.options?.startDatePrefix\"\r\n        [selectedDate]=\"fromDate\"\r\n        [minDate]=\"fromMinDate\"\r\n        [maxDate]=\"fromMaxDate\"\r\n        (selectedDateChange)=\"updateFromDate($event)\"\r\n      >\r\n      </calendar>\r\n    </div>\r\n    <div class=\"mat-prd-calendar-item\">\r\n      <calendar\r\n        [prefixLabel]=\"configService?.options?.endDatePrefix\"\r\n        [selectedDate]=\"toDate\"\r\n        [minDate]=\"toMinDate\"\r\n        [maxDate]=\"toMaxDate\"\r\n        (selectedDateChange)=\"updateToDate($event)\"\r\n      >\r\n      </calendar>\r\n    </div>\r\n    <div class=\"mat-prd-calendar-item\" *ngIf=\"configService?.options?.presets && configService?.options?.presets.length > 0\">\r\n      <div class=\"mat-prd-menu\">\r\n        <ul class=\"mat-prd-presets-list\">\r\n          <li *ngFor=\"let preset of configService?.options?.presets\" (click)=\"updateRangeByPreset(preset)\">\r\n            {{ preset.presetLabel }}\r\n          </li>\r\n        </ul>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mat-prd-calendar-container{justify-content:space-around;min-width:450px;background-color:#fff}.mat-prd-calendar-container .mat-prd-controls button{margin:1% 4%;justify-content:space-around;float:right}.mat-prd-calendar-container .mat-prd-calendar-items{display:flex}.mat-prd-calendar-container .mat-prd-calendar-items .mat-prd-calendar-item{flex-basis:33.33%;min-width:210px;padding:1em;font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;margin-top:7%}.mat-prd-calendar-container .mat-prd-calendar-items .mat-prd-calendar-item .mat-prd-menu{height:86%;position:absolute;min-width:30%}.mat-prd-calendar-container .mat-prd-calendar-items .mat-prd-calendar-item .mat-prd-menu .mat-prd-presets-list{list-style-type:none;margin:0;padding:0;overflow-y:auto;max-height:86%;position:relative}.mat-prd-calendar-container .mat-prd-calendar-items .mat-prd-calendar-item .mat-prd-menu .mat-prd-presets-list li{margin:5px 0;padding:4%;cursor:pointer;background:#fafafa;color:#3f51b5;-webkit-user-select:none;user-select:none}.mat-prd-calendar-container .mat-prd-calendar-items .mat-prd-calendar-item .mat-prd-menu .mat-prd-presets-list li:hover{background:#3f51b5;color:#fff}.mat-prd-overlay{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff;border-radius:2px}.mat-prd-overlay-backdrop{background-color:#0003;opacity:.2}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CalendarComponent, selector: "calendar", inputs: ["selectedDate", "prefixLabel", "minDate", "maxDate"], outputs: ["selectedDateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PickerOverlayComponent, decorators: [{
            type: Component,
            args: [{ selector: 'picker-overlay', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"mat-prd-calendar-container\">\r\n  <div class=\"mat-prd-controls\">\r\n    <button mat-button color=\"primary\" (click)=\"applyNewDates($event)\">\r\n      {{ configService?.options?.applyLabel }}\r\n    </button>\r\n    <button mat-button (click)=\"discardNewDates($event)\">\r\n      {{ configService?.options?.cancelLabel }}\r\n    </button>\r\n  </div>\r\n  <div class=\"mat-prd-calendar-items\">\r\n    <div class=\"mat-prd-calendar-item\">\r\n      <calendar\r\n        [prefixLabel]=\"configService?.options?.startDatePrefix\"\r\n        [selectedDate]=\"fromDate\"\r\n        [minDate]=\"fromMinDate\"\r\n        [maxDate]=\"fromMaxDate\"\r\n        (selectedDateChange)=\"updateFromDate($event)\"\r\n      >\r\n      </calendar>\r\n    </div>\r\n    <div class=\"mat-prd-calendar-item\">\r\n      <calendar\r\n        [prefixLabel]=\"configService?.options?.endDatePrefix\"\r\n        [selectedDate]=\"toDate\"\r\n        [minDate]=\"toMinDate\"\r\n        [maxDate]=\"toMaxDate\"\r\n        (selectedDateChange)=\"updateToDate($event)\"\r\n      >\r\n      </calendar>\r\n    </div>\r\n    <div class=\"mat-prd-calendar-item\" *ngIf=\"configService?.options?.presets && configService?.options?.presets.length > 0\">\r\n      <div class=\"mat-prd-menu\">\r\n        <ul class=\"mat-prd-presets-list\">\r\n          <li *ngFor=\"let preset of configService?.options?.presets\" (click)=\"updateRangeByPreset(preset)\">\r\n            {{ preset.presetLabel }}\r\n          </li>\r\n        </ul>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mat-prd-calendar-container{justify-content:space-around;min-width:450px;background-color:#fff}.mat-prd-calendar-container .mat-prd-controls button{margin:1% 4%;justify-content:space-around;float:right}.mat-prd-calendar-container .mat-prd-calendar-items{display:flex}.mat-prd-calendar-container .mat-prd-calendar-items .mat-prd-calendar-item{flex-basis:33.33%;min-width:210px;padding:1em;font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;margin-top:7%}.mat-prd-calendar-container .mat-prd-calendar-items .mat-prd-calendar-item .mat-prd-menu{height:86%;position:absolute;min-width:30%}.mat-prd-calendar-container .mat-prd-calendar-items .mat-prd-calendar-item .mat-prd-menu .mat-prd-presets-list{list-style-type:none;margin:0;padding:0;overflow-y:auto;max-height:86%;position:relative}.mat-prd-calendar-container .mat-prd-calendar-items .mat-prd-calendar-item .mat-prd-menu .mat-prd-presets-list li{margin:5px 0;padding:4%;cursor:pointer;background:#fafafa;color:#3f51b5;-webkit-user-select:none;user-select:none}.mat-prd-calendar-container .mat-prd-calendar-items .mat-prd-calendar-item .mat-prd-menu .mat-prd-presets-list li:hover{background:#3f51b5;color:#fff}.mat-prd-overlay{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff;border-radius:2px}.mat-prd-overlay-backdrop{background-color:#0003;opacity:.2}\n"] }]
        }], ctorParameters: () => [{ type: RangeStoreService }, { type: ConfigStoreService }, { type: i3$1.OverlayRef }] });

const DEFAULT_CONFIG = {
    panelClass: 'mat-prd-overlay',
    hasBackdrop: true,
    backdropClass: 'mat-prd-overlay-backdrop',
    shouldCloseOnBackdropClick: true,
};
class CalendarOverlayService {
    constructor(overlay, injector) {
        this.overlay = overlay;
        this.injector = injector;
    }
    open(config = {}, hostElemRef) {
        this.hostElemRef = hostElemRef;
        const overlayConfig = { ...DEFAULT_CONFIG, ...config };
        const overlayRef = this.createOverlay(overlayConfig);
        const portalInjector = this.createInjector(overlayRef);
        const calendarPortal = new ComponentPortal(PickerOverlayComponent, null, portalInjector);
        overlayRef.attach(calendarPortal);
        overlayRef
            .backdropClick()
            .pipe(takeWhile(() => overlayConfig?.shouldCloseOnBackdropClick))
            .subscribe(() => overlayRef.dispose());
        return overlayRef;
    }
    createOverlay(config) {
        const overlayConfig = this.getOverlayConfig(config);
        return this.overlay.create(overlayConfig);
    }
    getOverlayConfig(config) {
        const positionStrategy = this.overlay
            .position()
            .flexibleConnectedTo(this.hostElemRef)
            .withFlexibleDimensions(false)
            .withViewportMargin(8)
            .withDefaultOffsetY(12)
            .withPositions([
            {
                originX: 'start',
                originY: 'bottom',
                overlayX: 'start',
                overlayY: 'top',
            },
            {
                originX: 'start',
                originY: 'top',
                overlayX: 'start',
                overlayY: 'bottom',
            },
            {
                originX: 'end',
                originY: 'bottom',
                overlayX: 'end',
                overlayY: 'top',
            },
            {
                originX: 'end',
                originY: 'top',
                overlayX: 'end',
                overlayY: 'bottom',
            },
        ]);
        const overlayConfig = new OverlayConfig({
            hasBackdrop: config.hasBackdrop,
            backdropClass: config.backdropClass,
            panelClass: config.panelClass,
            scrollStrategy: this.overlay.scrollStrategies.block(),
            positionStrategy,
        });
        return overlayConfig;
    }
    createInjector(overlayRef) {
        const options = { providers: [{ provide: OverlayRef, useValue: overlayRef }], parent: this.injector };
        return Injector.create(options);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarOverlayService, deps: [{ token: i3$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarOverlayService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarOverlayService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: i3$1.Overlay }, { type: i0.Injector }] });

class MatPickRangeComponent {
    constructor(changeDetectionRef, calendarOverlayService, rangeStoreService, confStore, datePipe) {
        this.changeDetectionRef = changeDetectionRef;
        this.calendarOverlayService = calendarOverlayService;
        this.rangeStoreService = rangeStoreService;
        this.confStore = confStore;
        this.datePipe = datePipe;
        this.selectedDateRangeChanged = new EventEmitter();
        this.selectedDateRange = '';
    }
    ngOnInit() {
        this.confStore.options = this.options;
        this.rangeUpdate$ = this.rangeStoreService.rangeUpdate$.subscribe((range) => {
            const from = this.formatToDateString(range.fromDate, this.confStore.options.format);
            const to = this.formatToDateString(range.toDate, this.confStore.options.format);
            this.selectedDateRange = `${from} - ${to}`;
            this.selectedDateRangeChanged.emit(range);
        });
        this.rangeStoreService.updateRange(this.confStore.options.range.fromDate, this.confStore.options.range.toDate);
        this.changeDetectionRef.detectChanges();
    }
    formatToDateString(date, format) {
        return this.datePipe.transform(date, format);
    }
    openCalendar(event) {
        const overlayRef = this.calendarOverlayService.open(this.confStore.options.calendarOverlayConfig, this.calendarInput);
    }
    resetDates(range) {
        this.rangeStoreService.updateRange(range.fromDate, range.toDate);
    }
    ngOnDestroy() {
        if (this.rangeUpdate$) {
            this.rangeUpdate$.unsubscribe();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MatPickRangeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CalendarOverlayService }, { token: RangeStoreService }, { token: ConfigStoreService }, { token: i4.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: MatPickRangeComponent, isStandalone: false, selector: "mat-pick-range", inputs: { options: "options" }, outputs: { selectedDateRangeChanged: "selectedDateRangeChanged" }, providers: [CalendarOverlayService, RangeStoreService, ConfigStoreService, DatePipe], viewQueries: [{ propertyName: "calendarInput", first: true, predicate: ["calendarInput"], descendants: true, static: true }], ngImport: i0, template: "<div>\r\n  <mat-form-field class=\"mat-prd-display\">\r\n    <mat-label *ngIf=\"options?.matLabel\">{{ options.matLabel }}</mat-label>\r\n    <input\r\n      class=\"mat-prd-input\"\r\n      matInput\r\n      [placeholder]=\"options?.placeholder\"\r\n      [value]=\"selectedDateRange\"\r\n      [matTooltip]=\"selectedDateRange\"\r\n      (click)=\"openCalendar($event)\"\r\n      readonly\r\n      #calendarInput\r\n    />\r\n    <div matSuffix class=\"mat-prd-calendar\" (click)=\"openCalendar($event)\"></div>\r\n  </mat-form-field>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MatPickRangeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mat-pick-range', providers: [CalendarOverlayService, RangeStoreService, ConfigStoreService, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div>\r\n  <mat-form-field class=\"mat-prd-display\">\r\n    <mat-label *ngIf=\"options?.matLabel\">{{ options.matLabel }}</mat-label>\r\n    <input\r\n      class=\"mat-prd-input\"\r\n      matInput\r\n      [placeholder]=\"options?.placeholder\"\r\n      [value]=\"selectedDateRange\"\r\n      [matTooltip]=\"selectedDateRange\"\r\n      (click)=\"openCalendar($event)\"\r\n      readonly\r\n      #calendarInput\r\n    />\r\n    <div matSuffix class=\"mat-prd-calendar\" (click)=\"openCalendar($event)\"></div>\r\n  </mat-form-field>\r\n</div>\r\n" }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CalendarOverlayService }, { type: RangeStoreService }, { type: ConfigStoreService }, { type: i4.DatePipe }], propDecorators: { calendarInput: [{
                type: ViewChild,
                args: ['calendarInput', { static: true }]
            }], selectedDateRangeChanged: [{
                type: Output
            }], options: [{
                type: Input
            }] } });

class MatPickRangeModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MatPickRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: MatPickRangeModule, declarations: [MatPickRangeComponent, CalendarComponent, PickerOverlayComponent], imports: [CommonModule, MatFormFieldModule, MatDatepickerModule, MatNativeDateModule, MatInputModule, MatButtonModule, MatTooltipModule, OverlayModule], exports: [MatPickRangeComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MatPickRangeModule, providers: [{ provide: DATE, useValue: new Date() }], imports: [CommonModule, MatFormFieldModule, MatDatepickerModule, MatNativeDateModule, MatInputModule, MatButtonModule, MatTooltipModule, OverlayModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MatPickRangeModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [MatPickRangeComponent, CalendarComponent, PickerOverlayComponent],
                    imports: [CommonModule, MatFormFieldModule, MatDatepickerModule, MatNativeDateModule, MatInputModule, MatButtonModule, MatTooltipModule, OverlayModule],
                    providers: [{ provide: DATE, useValue: new Date() }],
                    exports: [MatPickRangeComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { CalendarComponent, CalendarOverlayService, ConfigStoreService, MatPickRangeComponent, MatPickRangeModule, PickerOverlayComponent, RangeStoreService };
//# sourceMappingURL=mat-pick-range-dates.mjs.map