revel-mat-daterange-picker-up2/fesm2022/revel-mat-daterange-picker-up.mjs

[](https://circleci.com/gh/ashishgkwd/ngx-mat-daterange-picker) [](https

import * as i0 from '@angular/core';
import { InjectionToken, Injectable, Inject, EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Output, Input, ViewEncapsulation, NgModule } from '@angular/core';
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, PortalInjector } from '@angular/cdk/portal';
import { takeWhile } from 'rxjs/operators';
import { trigger, state, style, transition, group, animate } from '@angular/animations';
import { Subject } from 'rxjs';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i2 from '@angular/material/datepicker';
import { MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
import * as i5 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';

const pickerOverlayAnimations = {
    /** Transforms the height of the picker overlay content. */
    transformPanel: trigger('transformPickerOverlay', [
        state('void', style({ opacity: 0, transform: 'scale(1, 0)' })),
        state('enter', style({ opacity: 1, transform: 'scale(1, 1)' })),
        transition('void => enter', group([
            animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
        ])),
        transition('* => void', animate('100ms linear', style({ opacity: 0 })))
    ])
};

/* import { DATE } from '../ngx-drp.module'; */
const DATE = new InjectionToken('date');
class RangeStoreService {
    _fromDate;
    _toDate;
    rangeUpdate$ = new Subject();
    constructor(_fromDate, _toDate) {
        this._fromDate = _fromDate;
        this._toDate = _toDate;
    }
    /* set fromDate(fromDate:Date) {
      this._fromDate = fromDate;
    } */
    get fromDate() {
        return this._fromDate;
    }
    /* set toDate(toDate:Date) {
      this._toDate = toDate;
    } */
    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: RangeStoreService, deps: [{ token: DATE }, { token: DATE }], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: RangeStoreService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: RangeStoreService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: Date, decorators: [{
                    type: Inject,
                    args: [DATE]
                }] }, { type: Date, decorators: [{
                    type: Inject,
                    args: [DATE]
                }] }] });

class ConfigStoreService {
    _ngxDrpOptions;
    defaultOptions = {
        excludeWeekends: false,
        animation: true,
        locale: 'en-US',
        fromMinMax: { fromDate: null, toDate: null },
        toMinMax: { fromDate: null, toDate: null }
    };
    constructor() { }
    get ngxDrpOptions() {
        return this._ngxDrpOptions;
    }
    set ngxDrpOptions(options) {
        this._ngxDrpOptions = { ...this.defaultOptions, ...options };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ConfigStoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ConfigStoreService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ConfigStoreService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [] });

class CalendarWrapperComponent {
    configStore;
    matCalendar;
    selectedDateChange = new EventEmitter();
    dateFormat;
    clearLabel;
    selectedDate;
    prefixLabel;
    minDate;
    maxDate;
    weekendFilter = (d) => true;
    constructor(configStore) {
        this.configStore = configStore;
        this.dateFormat = configStore.ngxDrpOptions.format;
        this.clearLabel = configStore.ngxDrpOptions.clearLabel || 'Clear';
        if (configStore.ngxDrpOptions.excludeWeekends) {
            this.weekendFilter = (d) => {
                const day = d.getDay();
                return day !== 0 && day !== 6;
            };
        }
    }
    ngOnChanges(changes) {
        // Necessary to force view refresh
        if (changes.selectedDate.currentValue) {
            this.matCalendar.activeDate = changes.selectedDate.currentValue;
        }
        this.matCalendar.selected = changes.selectedDate.currentValue;
    }
    onSelectedChange(date) {
        this.selectedDateChange.emit(date);
    }
    onYearSelected(e) { }
    onUserSelection(e) { }
    clear() {
        this.selectedDate = null;
        this.onSelectedChange(this.selectedDate);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CalendarWrapperComponent, deps: [{ token: ConfigStoreService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CalendarWrapperComponent, isStandalone: false, selector: "calendar-wrapper", inputs: { selectedDate: "selectedDate", prefixLabel: "prefixLabel", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "matCalendar", first: true, predicate: MatCalendar, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n\n  <!-- <mat-divider></mat-divider> -->\n  <div class=\"ngx-mat-drp-date-header\">\n    <div>\n      <span class=\"ngx-mat-drp-date-label\">\n        <label>{{prefixLabel}}</label>\n        <label class=\"ngx-mat-drp-selected-date-label\">{{selectedDate | date:dateFormat}}</label>\n      </span>\n    </div>\n    <button mat-button class=\"ngx-mat-drp-date-clear\" (click)=\"clear()\">{{clearLabel}}</button>\n  </div>\n  <!-- <mat-divider></mat-divider> -->\n\n  <mat-calendar\n    [startAt]=\"selectedDate\"\n    [selected]=\"selectedDate\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (selectedChange)=\"onSelectedChange($event)\"\n    (yearSelected)=\"onYearSelected($event)\"\n    (_userSelection)=\"onUserSelection($event)\"\n    [dateFilter]=\"weekendFilter\">\n  </mat-calendar>\n\n</div>\n", styles: [".ngx-mat-drp-date-header{width:100%;display:flex;align-items:center;justify-content:space-between}.ngx-mat-drp-date-clear{padding:0 8px;line-height:25px;min-width:66px}.ngx-mat-drp-date-label{background:#fafafa;margin:15px;padding:4px 2px;width:100%;font-size:14px;font-weight:500;white-space:nowrap}.ngx-mat-drp-date-label label{margin-bottom:0}.ngx-mat-drp-selected-date-label{color:#00000061;padding-left:5%}\n"], dependencies: [{ kind: "component", type: i2.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: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CalendarWrapperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'calendar-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div>\n\n  <!-- <mat-divider></mat-divider> -->\n  <div class=\"ngx-mat-drp-date-header\">\n    <div>\n      <span class=\"ngx-mat-drp-date-label\">\n        <label>{{prefixLabel}}</label>\n        <label class=\"ngx-mat-drp-selected-date-label\">{{selectedDate | date:dateFormat}}</label>\n      </span>\n    </div>\n    <button mat-button class=\"ngx-mat-drp-date-clear\" (click)=\"clear()\">{{clearLabel}}</button>\n  </div>\n  <!-- <mat-divider></mat-divider> -->\n\n  <mat-calendar\n    [startAt]=\"selectedDate\"\n    [selected]=\"selectedDate\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (selectedChange)=\"onSelectedChange($event)\"\n    (yearSelected)=\"onYearSelected($event)\"\n    (_userSelection)=\"onUserSelection($event)\"\n    [dateFilter]=\"weekendFilter\">\n  </mat-calendar>\n\n</div>\n", styles: [".ngx-mat-drp-date-header{width:100%;display:flex;align-items:center;justify-content:space-between}.ngx-mat-drp-date-clear{padding:0 8px;line-height:25px;min-width:66px}.ngx-mat-drp-date-label{background:#fafafa;margin:15px;padding:4px 2px;width:100%;font-size:14px;font-weight:500;white-space:nowrap}.ngx-mat-drp-date-label label{margin-bottom:0}.ngx-mat-drp-selected-date-label{color:#00000061;padding-left:5%}\n"] }]
        }], ctorParameters: () => [{ type: ConfigStoreService }], propDecorators: { matCalendar: [{
                type: ViewChild,
                args: [MatCalendar]
            }], selectedDateChange: [{
                type: Output
            }], selectedDate: [{
                type: Input
            }], prefixLabel: [{
                type: Input
            }], minDate: [{
                type: Input
            }], maxDate: [{
                type: Input
            }] } });

class PresetsComponent {
    presets;
    presetChanged = new EventEmitter();
    constructor() { }
    ngOnInit() { }
    setPresetPeriod(event) {
        this.presetChanged.emit(event);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PresetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: PresetsComponent, isStandalone: false, selector: "mat-drp-presets", inputs: { presets: "presets" }, outputs: { presetChanged: "presetChanged" }, ngImport: i0, template: "<div>\n  <ul class=\"ngx-mat-drp-presets-list\">\n    <li *ngFor=\"let preset of presets\" (click)=\"setPresetPeriod(preset)\"> {{preset.presetLabel}} </li>\n  </ul>\n</div>", styles: [".ngx-mat-drp-presets-list{list-style-type:none;margin:0;padding:0}.ngx-mat-drp-presets-list li{margin:5px 0;padding:4%;cursor:pointer;background:#fafafa;color:#3f51b5;-webkit-user-select:none;user-select:none}.ngx-mat-drp-presets-list li:hover{background:#3f51b5;color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PresetsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mat-drp-presets', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div>\n  <ul class=\"ngx-mat-drp-presets-list\">\n    <li *ngFor=\"let preset of presets\" (click)=\"setPresetPeriod(preset)\"> {{preset.presetLabel}} </li>\n  </ul>\n</div>", styles: [".ngx-mat-drp-presets-list{list-style-type:none;margin:0;padding:0}.ngx-mat-drp-presets-list li{margin:5px 0;padding:4%;cursor:pointer;background:#fafafa;color:#3f51b5;-webkit-user-select:none;user-select:none}.ngx-mat-drp-presets-list li:hover{background:#3f51b5;color:#fff}\n"] }]
        }], ctorParameters: () => [], propDecorators: { presets: [{
                type: Input
            }], presetChanged: [{
                type: Output
            }] } });

class PickerOverlayComponent {
    rangeStoreService;
    configStoreService;
    overlayRef;
    fromDate;
    toDate;
    fromMinDate;
    fromMaxDate;
    toMinDate;
    toMaxDate;
    presets = [];
    startDatePrefix;
    endDatePrefix;
    applyLabel;
    cancelLabel;
    shouldAnimate;
    constructor(rangeStoreService, configStoreService, overlayRef) {
        this.rangeStoreService = rangeStoreService;
        this.configStoreService = configStoreService;
        this.overlayRef = overlayRef;
    }
    ngOnInit() {
        this.fromDate = this.rangeStoreService.fromDate;
        this.toDate = this.rangeStoreService.toDate;
        this.startDatePrefix = this.configStoreService.ngxDrpOptions.startDatePrefix || 'FROM:';
        this.endDatePrefix = this.configStoreService.ngxDrpOptions.endDatePrefix || 'TO:';
        this.applyLabel = this.configStoreService.ngxDrpOptions.applyLabel || 'Apply';
        this.cancelLabel = this.configStoreService.ngxDrpOptions.cancelLabel || 'Cancel';
        this.presets = this.configStoreService.ngxDrpOptions.presets;
        this.shouldAnimate = this.configStoreService.ngxDrpOptions.animation
            ? 'enter'
            : 'noop';
        ({
            fromDate: this.fromMinDate,
            toDate: this.fromMaxDate
        } = this.configStoreService.ngxDrpOptions.fromMinMax);
        ({
            fromDate: this.toMinDate,
            toDate: this.toMaxDate
        } = this.configStoreService.ngxDrpOptions.toMinMax);
    }
    updateFromDate(date) {
        this.fromDate = date;
    }
    updateToDate(date) {
        this.toDate = 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.rangeStoreService.updateRange();
        this.disposeOverLay();
    }
    disposeOverLay() {
        this.overlayRef.dispose();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PickerOverlayComponent, deps: [{ token: RangeStoreService }, { token: ConfigStoreService }, { token: i3$1.OverlayRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: PickerOverlayComponent, isStandalone: false, selector: "ngx-mat-drp-picker-overlay", ngImport: i0, template: "<div [@transformPickerOverlay]=\"shouldAnimate\" class=\"ngx-mat-drp-calendar-container\">\n\n  <div class=\"ngx-mat-drp-calendar-item\">\n    <calendar-wrapper \n    [prefixLabel]=\"startDatePrefix\"\n    [selectedDate]=\"fromDate\"\n    [minDate]=\"fromMinDate\"\n    [maxDate]=\"fromMaxDate\"\n    (selectedDateChange)=\"updateFromDate($event)\">\n  </calendar-wrapper>\n  </div>\n  <div class=\"ngx-mat-drp-calendar-item\">\n    <calendar-wrapper \n    [prefixLabel]=\"endDatePrefix\"\n    [selectedDate]=\"toDate\"\n    [minDate]=\"toMinDate\"\n    [maxDate]=\"toMaxDate\" \n    (selectedDateChange)=\"updateToDate($event)\">\n  </calendar-wrapper>\n  </div>\n  <div class=\"ngx-mat-drp-calendar-item\">\n    <div class=\"ngx-mat-drp-menu\">\n      <mat-drp-presets [presets]=\"presets\" (presetChanged)=\"updateRangeByPreset($event)\"></mat-drp-presets>\n      <div class=\"ngx-mat-drp-controls\">\n        <button mat-button color=\"primary\" (click)=\"applyNewDates($event)\">{{applyLabel}}</button>\n        <button mat-button (click)=\"discardNewDates($event)\">{{cancelLabel}}</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".ngx-mat-drp-calendar-container{display:flex;justify-content:space-around}.ngx-mat-drp-calendar-item{flex-basis:33.33%;min-width:210px;padding:1em;font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.ngx-mat-drp-menu{height:100%;display:flex;flex-direction:column;justify-content:space-between}.ngx-mat-drp-controls{display:flex;justify-content:space-around;margin:10% auto}.ngx-mat-drp-overlay{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff;border-radius:2px}.ngx-mat-drp-overlay-backdrop{background-color:#0003;opacity:.2}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: CalendarWrapperComponent, selector: "calendar-wrapper", inputs: ["selectedDate", "prefixLabel", "minDate", "maxDate"], outputs: ["selectedDateChange"] }, { kind: "component", type: PresetsComponent, selector: "mat-drp-presets", inputs: ["presets"], outputs: ["presetChanged"] }], animations: [pickerOverlayAnimations.transformPanel], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PickerOverlayComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-mat-drp-picker-overlay', animations: [pickerOverlayAnimations.transformPanel], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div [@transformPickerOverlay]=\"shouldAnimate\" class=\"ngx-mat-drp-calendar-container\">\n\n  <div class=\"ngx-mat-drp-calendar-item\">\n    <calendar-wrapper \n    [prefixLabel]=\"startDatePrefix\"\n    [selectedDate]=\"fromDate\"\n    [minDate]=\"fromMinDate\"\n    [maxDate]=\"fromMaxDate\"\n    (selectedDateChange)=\"updateFromDate($event)\">\n  </calendar-wrapper>\n  </div>\n  <div class=\"ngx-mat-drp-calendar-item\">\n    <calendar-wrapper \n    [prefixLabel]=\"endDatePrefix\"\n    [selectedDate]=\"toDate\"\n    [minDate]=\"toMinDate\"\n    [maxDate]=\"toMaxDate\" \n    (selectedDateChange)=\"updateToDate($event)\">\n  </calendar-wrapper>\n  </div>\n  <div class=\"ngx-mat-drp-calendar-item\">\n    <div class=\"ngx-mat-drp-menu\">\n      <mat-drp-presets [presets]=\"presets\" (presetChanged)=\"updateRangeByPreset($event)\"></mat-drp-presets>\n      <div class=\"ngx-mat-drp-controls\">\n        <button mat-button color=\"primary\" (click)=\"applyNewDates($event)\">{{applyLabel}}</button>\n        <button mat-button (click)=\"discardNewDates($event)\">{{cancelLabel}}</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".ngx-mat-drp-calendar-container{display:flex;justify-content:space-around}.ngx-mat-drp-calendar-item{flex-basis:33.33%;min-width:210px;padding:1em;font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.ngx-mat-drp-menu{height:100%;display:flex;flex-direction:column;justify-content:space-between}.ngx-mat-drp-controls{display:flex;justify-content:space-around;margin:10% auto}.ngx-mat-drp-overlay{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff;border-radius:2px}.ngx-mat-drp-overlay-backdrop{background-color:#0003;opacity:.2}\n"] }]
        }], ctorParameters: () => [{ type: RangeStoreService }, { type: ConfigStoreService }, { type: i3$1.OverlayRef }] });

const DEFAULT_CONFIG = {
    panelClass: 'ngx-mat-drp-overlay',
    hasBackdrop: true,
    backdropClass: 'ngx-mat-drp-overlay-backdrop',
    shouldCloseOnBackdropClick: true
};
class CalendarOverlayService {
    overlay;
    injector;
    hostElemRef;
    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 injectionTokens = new WeakMap();
        injectionTokens.set(OverlayRef, overlayRef);
        return new PortalInjector(this.injector, injectionTokens);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CalendarOverlayService, deps: [{ token: i3$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CalendarOverlayService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CalendarOverlayService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: i3$1.Overlay }, { type: i0.Injector }] });

class NgxMatDrpComponent {
    changeDetectionRef;
    calendarOverlayService;
    rangeStoreService;
    configStoreService;
    datePipe;
    calendarInput;
    selectedDateRangeChanged = new EventEmitter();
    options;
    rangeUpdate$;
    selectedDateRange = '';
    constructor(changeDetectionRef, calendarOverlayService, rangeStoreService, configStoreService, datePipe) {
        this.changeDetectionRef = changeDetectionRef;
        this.calendarOverlayService = calendarOverlayService;
        this.rangeStoreService = rangeStoreService;
        this.configStoreService = configStoreService;
        this.datePipe = datePipe;
    }
    ngOnInit() {
        this.configStoreService.ngxDrpOptions = this.options;
        this.options.placeholder = this.options.placeholder || 'Choose a date';
        this.rangeUpdate$ = this.rangeStoreService.rangeUpdate$.subscribe(range => {
            const from = this.formatToDateString(range.fromDate, this.options.format);
            const to = this.formatToDateString(range.toDate, this.options.format);
            this.selectedDateRange = (from === '' && to === '') ? '' : `${from} - ${to}`;
            this.selectedDateRangeChanged.emit(range);
        });
        if (!this.options.defaultUnselect) {
            this.rangeStoreService.updateRange(this.options.range.fromDate, this.options.range.toDate);
        }
        this.changeDetectionRef.detectChanges();
    }
    ngOnDestroy() {
        if (this.rangeUpdate$) {
            this.rangeUpdate$.unsubscribe();
        }
    }
    formatToDateString(date, format) {
        return date ? this.datePipe.transform(date, format) : '';
    }
    openCalendar(event) {
        const overlayRef = this.calendarOverlayService.open(this.options.calendarOverlayConfig, this.calendarInput);
    }
    resetDates(range) {
        this.rangeStoreService.updateRange(range.fromDate, range.toDate);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NgxMatDrpComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CalendarOverlayService }, { token: RangeStoreService }, { token: ConfigStoreService }, { token: i4.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NgxMatDrpComponent, isStandalone: false, selector: "ngx-mat-drp", inputs: { options: "options" }, outputs: { selectedDateRangeChanged: "selectedDateRangeChanged" }, providers: [
            CalendarOverlayService,
            RangeStoreService,
            ConfigStoreService,
            DatePipe
        ], viewQueries: [{ propertyName: "calendarInput", first: true, predicate: ["calendarInput"], descendants: true }], ngImport: i0, template: "<div> \n  \n  <mat-form-field class=\"ngx-mat-drp-date-display\">\n    <input class=\"ngx-mat-drp-date-input\"\n          matInput [placeholder]=\"options.placeholder\"\n          [value]=\"selectedDateRange\"\n          [matTooltip]=\"selectedDateRange\"\n          (click)=\"openCalendar($event)\"\n          readonly\n          #calendarInput >\n    <div matSuffix \n          class=\"ngx-mat-drp-calendar\"\n          (click)=\"openCalendar($event)\">\n    </div>\n  </mat-form-field>\n  \n</div>    \n", styles: [".ngx-mat-drp-date-display{min-width:230px}.ngx-mat-drp-date-input{text-overflow:ellipsis;color:#4169e1}.ngx-mat-drp-calendar{background-image:url('data:image/svg+xml,<svg fill=\"#000000\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">    <path d=\"M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z\"/>    <path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>');width:24px;height:24px}\n"], dependencies: [{ kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.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: "19.1.5", ngImport: i0, type: NgxMatDrpComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-mat-drp', providers: [
                        CalendarOverlayService,
                        RangeStoreService,
                        ConfigStoreService,
                        DatePipe
                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div> \n  \n  <mat-form-field class=\"ngx-mat-drp-date-display\">\n    <input class=\"ngx-mat-drp-date-input\"\n          matInput [placeholder]=\"options.placeholder\"\n          [value]=\"selectedDateRange\"\n          [matTooltip]=\"selectedDateRange\"\n          (click)=\"openCalendar($event)\"\n          readonly\n          #calendarInput >\n    <div matSuffix \n          class=\"ngx-mat-drp-calendar\"\n          (click)=\"openCalendar($event)\">\n    </div>\n  </mat-form-field>\n  \n</div>    \n", styles: [".ngx-mat-drp-date-display{min-width:230px}.ngx-mat-drp-date-input{text-overflow:ellipsis;color:#4169e1}.ngx-mat-drp-calendar{background-image:url('data:image/svg+xml,<svg fill=\"#000000\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">    <path d=\"M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z\"/>    <path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>');width:24px;height:24px}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CalendarOverlayService }, { type: RangeStoreService }, { type: ConfigStoreService }, { type: i4.DatePipe }], propDecorators: { calendarInput: [{
                type: ViewChild,
                args: ['calendarInput']
            }], selectedDateRangeChanged: [{
                type: Output
            }], options: [{
                type: Input
            }] } });

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

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

export { CalendarOverlayService, CalendarWrapperComponent, ConfigStoreService, DATE, NgxMatDrpComponent, NgxMatDrpModule, PickerOverlayComponent, PresetsComponent, RangeStoreService };
//# sourceMappingURL=revel-mat-daterange-picker-up.mjs.map