@datarailsshared/datarailsshared 1.6.155 → 1.6.159
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/datarailsshared-datarailsshared-1.6.159.tgz +0 -0
- package/esm2022/lib/dr-inputs/date-pickers/dr-date-picker/dr-date-picker.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/date-pickers/dr-date-picker-with-timeframe/dr-date-picker-with-timeframe.component.mjs +29 -44
- package/esm2022/lib/dr-inputs/date-pickers/dr-fiscal-month-calendar-picker/dr-fiscal-month-calendar-picker.component.mjs +2 -2
- package/fesm2022/datarailsshared-datarailsshared.mjs +31 -46
- package/fesm2022/datarailsshared-datarailsshared.mjs.map +1 -1
- package/lib/dr-inputs/date-pickers/dr-date-picker-with-timeframe/dr-date-picker-with-timeframe.component.d.ts +1 -3
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.6.155.tgz +0 -0
|
@@ -2730,7 +2730,7 @@ class DrDatePickerComponent {
|
|
|
2730
2730
|
i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 3, ctx.datePickerService.timeframe$) === "week");
|
|
2731
2731
|
i0.ɵɵadvance(2);
|
|
2732
2732
|
i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 5, ctx.datePickerService.timeframe$) !== "week");
|
|
2733
|
-
} }, dependencies: [DrButtonComponent, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.NgModel, i1$2.FormGroupDirective, i1$2.FormControlName, i1.NgIf, i6.MatDatepicker, i6.MatDatepickerInput, i6.MatDateRangeInput, i6.MatStartDate, i6.MatEndDate, i6.MatDateRangePicker, DrDatePickerFormatDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}[_nghost-%COMP%]
|
|
2733
|
+
} }, dependencies: [DrButtonComponent, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.NgModel, i1$2.FormGroupDirective, i1$2.FormControlName, i1.NgIf, i6.MatDatepicker, i6.MatDatepickerInput, i6.MatDateRangeInput, i6.MatStartDate, i6.MatEndDate, i6.MatDateRangePicker, DrDatePickerFormatDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}.use-button-picker[_nghost-%COMP%]{border:none}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}.use-button-picker[_nghost-%COMP%]:after{display:none}[_nghost-%COMP%]:not(.use-button-picker):after, [_nghost-%COMP%]:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:not(.use-button-picker):after{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%] i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%] input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%] input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%] input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%] input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%] input.hidden-calendar-input[_ngcontent-%COMP%]{width:0;height:0;padding:0}[_nghost-%COMP%] .datepicker-button[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%] .range-input[_ngcontent-%COMP%]{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1} .mat-datepicker-popup .dr-week-datepicker{width:386px!important} .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important} .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected, .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important} .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important} .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit} .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit} .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff} .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600} .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600} .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none} .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5} .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)} .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)} .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333} .mat-datepicker-popup .mat-calendar-table-header-divider{display:none} .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0} .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none} .mat-datepicker-popup .mat-calendar-content{display:flex} .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0} .mat-datepicker-popup .mat-calendar-content mat-month-view, .mat-datepicker-popup .mat-calendar-content mat-multi-year-view, .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}", ".mat-datepicker-popup .dr-datepicker-dark-theme{background-color:#0c142b;color:#fff;border-radius:12px} .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-label{visibility:hidden} .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell-content, .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-table-header th{color:#fff} .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#373c4c} .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border:none;background-color:#1d1d6d;color:#fff} .mat-datepicker-popup .dr-datepicker-dark-theme .dr-quarterly-datepicker .quarter-selector:hover{background:#373c4c!important;color:#fff!important} .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#373c4c;color:#fff} .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks__container{color:#fff} .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected, .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background-color:#4646ce!important;color:#fff!important} .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks .btn:hover{background:#373c4c!important;color:#fff!important} .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-selected{background-color:#4646ce;color:#fff} .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:#aeabac} .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging:hover{background-color:transparent} .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right, .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left{color:#aeabac} .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right:hover, .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left:hover{background:#373c4c;border-radius:12px;cursor:pointer}"], changeDetection: 0 }); }
|
|
2734
2734
|
}
|
|
2735
2735
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerComponent, [{
|
|
2736
2736
|
type: Component,
|
|
@@ -2739,7 +2739,7 @@ class DrDatePickerComponent {
|
|
|
2739
2739
|
{ provide: DateAdapter, useClass: CustomDateAdapter },
|
|
2740
2740
|
{ provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: WeekSelectionStrategy },
|
|
2741
2741
|
DrDatePickerService,
|
|
2742
|
-
], template: "<i *ngIf=\"!useButton\" class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === 'week'\">\n <input\n [attr.id]=\"id\"\n [ngModel]=\"input.value\"\n (click)=\"datePicker.open()\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\" />\n\n <mat-date-range-input [formGroup]=\"rangeForm\" [rangePicker]=\"datePicker\" [dateFilter]=\"dateFilter\" class=\"range-input\">\n <input\n matStartDate\n #input\n [drDatePickerFormat]=\"datePickerService.format$ | async\"\n formControlName=\"start\"\n (dateChange)=\"valueChangedInCalendar(rangeForm.value.start)\" />\n <input matEndDate [drDatePickerFormat]=\"datePickerService.format$ | async\" formControlName=\"end\" />\n </mat-date-range-input>\n\n <mat-date-range-picker\n #datePicker\n [startAt]=\"_startAt\"\n [panelClass]=\"'dr-week-datepicker' + (panelClass ? ' ' + panelClass : '')\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\">\n </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== 'week'\">\n <input\n [attr.id]=\"id\"\n [ngModel]=\"displayValue$ | async\"\n (ngModelChange)=\"valueChangedInCalendar($event)\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"dateFilter\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [drDatePickerFormat]=\"datePickerService.format$ | async\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n [class.hidden-calendar-input]=\"useButton\" />\n\n <dr-button\n *ngIf=\"useButton\"\n [icon]=\"'dr-icon-date'\"\n [iconAfter]=\"iconAfterButton\"\n (click)=\"datePicker.open()\"\n class=\"datepicker-button\">\n {{ buttonLabel || 'Select Date' }}\n </dr-button>\n\n <mat-datepicker\n #datePicker\n [panelClass]=\"panelClass\"\n [startAt]=\"_startAt\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\">\n </mat-datepicker>\n</ng-container>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:not(.use-button-picker){border:1px solid #9ea1aa}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{width:386px!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}\n", "::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme{background-color:#0c142b;color:#fff;border-radius:12px}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-label{visibility:hidden}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell-content,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-table-header th{color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#373c4c}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border:none;background-color:#1d1d6d;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .dr-quarterly-datepicker .quarter-selector:hover{background:#373c4c!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#373c4c;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks__container{color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background-color:#4646ce!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks .btn:hover{background:#373c4c!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-selected{background-color:#4646ce;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:#aeabac}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging:hover{background-color:transparent}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left{color:#aeabac}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right:hover,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left:hover{background:#373c4c;border-radius:12px;cursor:pointer}\n"] }]
|
|
2742
|
+
], template: "<i *ngIf=\"!useButton\" class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === 'week'\">\n <input\n [attr.id]=\"id\"\n [ngModel]=\"input.value\"\n (click)=\"datePicker.open()\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\" />\n\n <mat-date-range-input [formGroup]=\"rangeForm\" [rangePicker]=\"datePicker\" [dateFilter]=\"dateFilter\" class=\"range-input\">\n <input\n matStartDate\n #input\n [drDatePickerFormat]=\"datePickerService.format$ | async\"\n formControlName=\"start\"\n (dateChange)=\"valueChangedInCalendar(rangeForm.value.start)\" />\n <input matEndDate [drDatePickerFormat]=\"datePickerService.format$ | async\" formControlName=\"end\" />\n </mat-date-range-input>\n\n <mat-date-range-picker\n #datePicker\n [startAt]=\"_startAt\"\n [panelClass]=\"'dr-week-datepicker' + (panelClass ? ' ' + panelClass : '')\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\">\n </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== 'week'\">\n <input\n [attr.id]=\"id\"\n [ngModel]=\"displayValue$ | async\"\n (ngModelChange)=\"valueChangedInCalendar($event)\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"dateFilter\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [drDatePickerFormat]=\"datePickerService.format$ | async\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n [class.hidden-calendar-input]=\"useButton\" />\n\n <dr-button\n *ngIf=\"useButton\"\n [icon]=\"'dr-icon-date'\"\n [iconAfter]=\"iconAfterButton\"\n (click)=\"datePicker.open()\"\n class=\"datepicker-button\">\n {{ buttonLabel || 'Select Date' }}\n </dr-button>\n\n <mat-datepicker\n #datePicker\n [panelClass]=\"panelClass\"\n [startAt]=\"_startAt\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\">\n </mat-datepicker>\n</ng-container>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host.use-button-picker{border:none}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{width:386px!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}\n", "::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme{background-color:#0c142b;color:#fff;border-radius:12px}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-label{visibility:hidden}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell-content,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-table-header th{color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#373c4c}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border:none;background-color:#1d1d6d;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .dr-quarterly-datepicker .quarter-selector:hover{background:#373c4c!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#373c4c;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks__container{color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background-color:#4646ce!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks .btn:hover{background:#373c4c!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-selected{background-color:#4646ce;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:#aeabac}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging:hover{background-color:transparent}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left{color:#aeabac}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right:hover,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left:hover{background:#373c4c;border-radius:12px;cursor:pointer}\n"] }]
|
|
2743
2743
|
}], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, { id: [{
|
|
2744
2744
|
type: Input
|
|
2745
2745
|
}], hostId: [{
|
|
@@ -5190,7 +5190,7 @@ class DrFiscalMonthCalendarPickerComponent extends DrDatePickerComponent {
|
|
|
5190
5190
|
i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 3, ctx.datePickerService.timeframe$) === "week");
|
|
5191
5191
|
i0.ɵɵadvance(2);
|
|
5192
5192
|
i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 5, ctx.datePickerService.timeframe$) !== "week");
|
|
5193
|
-
} }, dependencies: [DrButtonComponent, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.NgModel, i1$2.FormGroupDirective, i1$2.FormControlName, i1.NgIf, i6.MatDatepicker, i6.MatDatepickerInput, i6.MatDateRangeInput, i6.MatStartDate, i6.MatEndDate, i6.MatDateRangePicker, DrDatePickerFormatDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}[_nghost-%COMP%]
|
|
5193
|
+
} }, dependencies: [DrButtonComponent, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.NgModel, i1$2.FormGroupDirective, i1$2.FormControlName, i1.NgIf, i6.MatDatepicker, i6.MatDatepickerInput, i6.MatDateRangeInput, i6.MatStartDate, i6.MatEndDate, i6.MatDateRangePicker, DrDatePickerFormatDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}.use-button-picker[_nghost-%COMP%]{border:none}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}.use-button-picker[_nghost-%COMP%]:after{display:none}[_nghost-%COMP%]:not(.use-button-picker):after, [_nghost-%COMP%]:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:not(.use-button-picker):after{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%] i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%] input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%] input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%] input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%] input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%] input.hidden-calendar-input[_ngcontent-%COMP%]{width:0;height:0;padding:0}[_nghost-%COMP%] .datepicker-button[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%] .range-input[_ngcontent-%COMP%]{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1} .mat-datepicker-popup .dr-week-datepicker{width:386px!important} .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important} .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected, .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important} .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important} .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit} .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit} .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff} .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600} .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600} .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none} .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5} .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)} .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)} .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333} .mat-datepicker-popup .mat-calendar-table-header-divider{display:none} .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0} .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none} .mat-datepicker-popup .mat-calendar-content{display:flex} .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0} .mat-datepicker-popup .mat-calendar-content mat-month-view, .mat-datepicker-popup .mat-calendar-content mat-multi-year-view, .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}"], changeDetection: 0 }); }
|
|
5194
5194
|
}
|
|
5195
5195
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrFiscalMonthCalendarPickerComponent, [{
|
|
5196
5196
|
type: Component,
|
|
@@ -5198,7 +5198,7 @@ class DrFiscalMonthCalendarPickerComponent extends DrDatePickerComponent {
|
|
|
5198
5198
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrFiscalMonthCalendarPickerComponent, multi: true },
|
|
5199
5199
|
{ provide: DateAdapter, useClass: FiscalMonthAdapter },
|
|
5200
5200
|
DrDatePickerService,
|
|
5201
|
-
], template: "<i *ngIf=\"!useButton\" class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === 'week'\">\n <input\n [attr.id]=\"id\"\n [ngModel]=\"input.value\"\n (click)=\"datePicker.open()\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\" />\n\n <mat-date-range-input [formGroup]=\"rangeForm\" [rangePicker]=\"datePicker\" [dateFilter]=\"dateFilter\" class=\"range-input\">\n <input\n matStartDate\n #input\n [drDatePickerFormat]=\"datePickerService.format$ | async\"\n formControlName=\"start\"\n (dateChange)=\"valueChangedInCalendar(rangeForm.value.start)\" />\n <input matEndDate [drDatePickerFormat]=\"datePickerService.format$ | async\" formControlName=\"end\" />\n </mat-date-range-input>\n\n <mat-date-range-picker\n #datePicker\n [startAt]=\"_startAt\"\n [panelClass]=\"'dr-week-datepicker' + (panelClass ? ' ' + panelClass : '')\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\">\n </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== 'week'\">\n <input\n [attr.id]=\"id\"\n [ngModel]=\"displayValue$ | async\"\n (ngModelChange)=\"valueChangedInCalendar($event)\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"dateFilter\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [drDatePickerFormat]=\"datePickerService.format$ | async\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n [class.hidden-calendar-input]=\"useButton\" />\n\n <dr-button\n *ngIf=\"useButton\"\n [icon]=\"'dr-icon-date'\"\n [iconAfter]=\"iconAfterButton\"\n (click)=\"datePicker.open()\"\n class=\"datepicker-button\">\n {{ buttonLabel || 'Select Date' }}\n </dr-button>\n\n <mat-datepicker\n #datePicker\n [panelClass]=\"panelClass\"\n [startAt]=\"_startAt\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\">\n </mat-datepicker>\n</ng-container>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host
|
|
5201
|
+
], template: "<i *ngIf=\"!useButton\" class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === 'week'\">\n <input\n [attr.id]=\"id\"\n [ngModel]=\"input.value\"\n (click)=\"datePicker.open()\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\" />\n\n <mat-date-range-input [formGroup]=\"rangeForm\" [rangePicker]=\"datePicker\" [dateFilter]=\"dateFilter\" class=\"range-input\">\n <input\n matStartDate\n #input\n [drDatePickerFormat]=\"datePickerService.format$ | async\"\n formControlName=\"start\"\n (dateChange)=\"valueChangedInCalendar(rangeForm.value.start)\" />\n <input matEndDate [drDatePickerFormat]=\"datePickerService.format$ | async\" formControlName=\"end\" />\n </mat-date-range-input>\n\n <mat-date-range-picker\n #datePicker\n [startAt]=\"_startAt\"\n [panelClass]=\"'dr-week-datepicker' + (panelClass ? ' ' + panelClass : '')\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\">\n </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== 'week'\">\n <input\n [attr.id]=\"id\"\n [ngModel]=\"displayValue$ | async\"\n (ngModelChange)=\"valueChangedInCalendar($event)\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"dateFilter\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [drDatePickerFormat]=\"datePickerService.format$ | async\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n [class.hidden-calendar-input]=\"useButton\" />\n\n <dr-button\n *ngIf=\"useButton\"\n [icon]=\"'dr-icon-date'\"\n [iconAfter]=\"iconAfterButton\"\n (click)=\"datePicker.open()\"\n class=\"datepicker-button\">\n {{ buttonLabel || 'Select Date' }}\n </dr-button>\n\n <mat-datepicker\n #datePicker\n [panelClass]=\"panelClass\"\n [startAt]=\"_startAt\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\">\n </mat-datepicker>\n</ng-container>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host.use-button-picker{border:none}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{width:386px!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}\n"] }]
|
|
5202
5202
|
}], null, null); })();
|
|
5203
5203
|
|
|
5204
5204
|
var TooltipPosition;
|
|
@@ -5218,41 +5218,35 @@ var TooltipPosition;
|
|
|
5218
5218
|
})(TooltipPosition || (TooltipPosition = {}));
|
|
5219
5219
|
|
|
5220
5220
|
function DrDatePickerWithTimeframeComponent_dr_button_0_Template(rf, ctx) { if (rf & 1) {
|
|
5221
|
-
const
|
|
5221
|
+
const _r7 = i0.ɵɵgetCurrentView();
|
|
5222
5222
|
i0.ɵɵelementStart(0, "dr-button", 11);
|
|
5223
|
-
i0.ɵɵlistener("click", function DrDatePickerWithTimeframeComponent_dr_button_0_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
5223
|
+
i0.ɵɵlistener("click", function DrDatePickerWithTimeframeComponent_dr_button_0_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.pagingClicked(false)); });
|
|
5224
5224
|
i0.ɵɵelementEnd();
|
|
5225
5225
|
} if (rf & 2) {
|
|
5226
5226
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
5227
5227
|
i0.ɵɵproperty("disabled", ctx_r0.isPrevDateDisabled);
|
|
5228
5228
|
} }
|
|
5229
|
-
function DrDatePickerWithTimeframeComponent_i_2_Template(rf, ctx) { if (rf & 1) {
|
|
5230
|
-
i0.ɵɵelement(0, "i", 12);
|
|
5231
|
-
} }
|
|
5232
5229
|
function DrDatePickerWithTimeframeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
|
|
5233
5230
|
i0.ɵɵelementStart(0, "span");
|
|
5234
5231
|
i0.ɵɵtext(1);
|
|
5235
5232
|
i0.ɵɵelementEnd();
|
|
5236
5233
|
} if (rf & 2) {
|
|
5237
|
-
const
|
|
5238
|
-
const
|
|
5234
|
+
const value_r8 = ctx.formattedValue;
|
|
5235
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
5239
5236
|
i0.ɵɵadvance(1);
|
|
5240
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
5237
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r2.datePickerService.isUsingDateTagPresets && !!ctx_r2.presetTagSelected ? ctx_r2.presetTagSelected + " (" + value_r8 + ")" : value_r8, " ");
|
|
5241
5238
|
} }
|
|
5242
5239
|
function DrDatePickerWithTimeframeComponent_dr_button_11_Template(rf, ctx) { if (rf & 1) {
|
|
5243
|
-
const
|
|
5244
|
-
i0.ɵɵelementStart(0, "dr-button",
|
|
5245
|
-
i0.ɵɵlistener("click", function DrDatePickerWithTimeframeComponent_dr_button_11_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(
|
|
5240
|
+
const _r10 = i0.ɵɵgetCurrentView();
|
|
5241
|
+
i0.ɵɵelementStart(0, "dr-button", 12);
|
|
5242
|
+
i0.ɵɵlistener("click", function DrDatePickerWithTimeframeComponent_dr_button_11_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.pagingClicked(true)); });
|
|
5246
5243
|
i0.ɵɵelementEnd();
|
|
5247
5244
|
} if (rf & 2) {
|
|
5248
|
-
const
|
|
5249
|
-
i0.ɵɵproperty("disabled",
|
|
5245
|
+
const ctx_r4 = i0.ɵɵnextContext();
|
|
5246
|
+
i0.ɵɵproperty("disabled", ctx_r4.isNextDateDisabled);
|
|
5250
5247
|
} }
|
|
5251
5248
|
const _c0$z = function (a0) { return { formattedValue: a0 }; };
|
|
5252
5249
|
class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
5253
|
-
get isDashboardClassDisplayed() {
|
|
5254
|
-
return this.isDashboardDatepicker;
|
|
5255
|
-
}
|
|
5256
5250
|
set dateFormatConfig(value) {
|
|
5257
5251
|
if (value) {
|
|
5258
5252
|
this.datePickerService.formatConfig = { ...this.datePickerService.formatConfig, ...value };
|
|
@@ -5275,7 +5269,6 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
5275
5269
|
this.cdr = cdr;
|
|
5276
5270
|
this.dateAdapter = dateAdapter;
|
|
5277
5271
|
this.datePickerService = datePickerService;
|
|
5278
|
-
this.isDashboardDatepicker = false;
|
|
5279
5272
|
this.canSelectTimeframe = true;
|
|
5280
5273
|
this.datepickerTooltipPosition = TooltipPosition.TOP;
|
|
5281
5274
|
this.datepickerTooltipTimeout = 0;
|
|
@@ -5398,48 +5391,45 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
5398
5391
|
}
|
|
5399
5392
|
}
|
|
5400
5393
|
/** @nocollapse */ static { this.ɵfac = function DrDatePickerWithTimeframeComponent_Factory(t) { return new (t || DrDatePickerWithTimeframeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$4.DateAdapter), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
|
|
5401
|
-
/** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerWithTimeframeComponent, selectors: [["dr-date-picker-with-timeframe"]],
|
|
5402
|
-
i0.ɵɵclassProp("dr-date-picker-on-dashboard", ctx.isDashboardClassDisplayed);
|
|
5403
|
-
} }, inputs: { isDashboardDatepicker: "isDashboardDatepicker", dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag", datepickerTooltip: "datepickerTooltip", datepickerTooltipPosition: "datepickerTooltipPosition", datepickerTooltipTimeout: "datepickerTooltipTimeout", isOpen: "isOpen" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, features: [i0.ɵɵProvidersFeature([
|
|
5394
|
+
/** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerWithTimeframeComponent, selectors: [["dr-date-picker-with-timeframe"]], inputs: { dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag", datepickerTooltip: "datepickerTooltip", datepickerTooltipPosition: "datepickerTooltipPosition", datepickerTooltipTimeout: "datepickerTooltipTimeout", isOpen: "isOpen" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, features: [i0.ɵɵProvidersFeature([
|
|
5404
5395
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
|
|
5405
5396
|
{ provide: DateAdapter, useClass: CustomDateAdapter },
|
|
5406
5397
|
{ provide: DrDatePickerService },
|
|
5407
|
-
]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 14, vars:
|
|
5408
|
-
const
|
|
5398
|
+
]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 14, vars: 20, consts: [["theme", "icon", "icon", "dr-icon-arrow-left", 3, "disabled", "click", 4, "ngIf"], [1, "dr-datepicker-input-container", 3, "drTooltip", "drTooltipPosition", "drTooltipMousleaveTimeout"], [1, "dr-icon-date", 3, "click"], [1, "dr-datepicker-input-container__formatted-value-display", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["formattedValueTmpl", ""], [3, "ngModel", "matDatepicker", "readonly", "min", "max", "ngModelChange", "click"], ["datepickerInput", ""], ["theme", "icon", "icon", "dr-icon-arrow-right", 3, "disabled", "click", 4, "ngIf"], [1, "dr-timeframe-datepicker", 3, "calendarHeaderComponent", "panelClass", "yearSelected", "monthSelected", "opened", "closed"], ["datePicker", ""], ["theme", "icon", "icon", "dr-icon-arrow-left", 3, "disabled", "click"], ["theme", "icon", "icon", "dr-icon-arrow-right", 3, "disabled", "click"]], template: function DrDatePickerWithTimeframeComponent_Template(rf, ctx) { if (rf & 1) {
|
|
5399
|
+
const _r11 = i0.ɵɵgetCurrentView();
|
|
5409
5400
|
i0.ɵɵtemplate(0, DrDatePickerWithTimeframeComponent_dr_button_0_Template, 1, 1, "dr-button", 0);
|
|
5410
|
-
i0.ɵɵelementStart(1, "div", 1);
|
|
5411
|
-
i0.ɵɵ
|
|
5401
|
+
i0.ɵɵelementStart(1, "div", 1)(2, "i", 2);
|
|
5402
|
+
i0.ɵɵlistener("click", function DrDatePickerWithTimeframeComponent_Template_i_click_2_listener() { i0.ɵɵrestoreView(_r11); const _r3 = i0.ɵɵreference(9); return i0.ɵɵresetView(_r3.click()); });
|
|
5403
|
+
i0.ɵɵelementEnd();
|
|
5412
5404
|
i0.ɵɵelementStart(3, "div", 3);
|
|
5413
|
-
i0.ɵɵlistener("click", function DrDatePickerWithTimeframeComponent_Template_div_click_3_listener() { i0.ɵɵrestoreView(
|
|
5405
|
+
i0.ɵɵlistener("click", function DrDatePickerWithTimeframeComponent_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r11); const _r3 = i0.ɵɵreference(9); return i0.ɵɵresetView(_r3.click()); });
|
|
5414
5406
|
i0.ɵɵelementContainer(4, 4);
|
|
5415
5407
|
i0.ɵɵpipe(5, "async");
|
|
5416
5408
|
i0.ɵɵtemplate(6, DrDatePickerWithTimeframeComponent_ng_template_6_Template, 2, 1, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
|
|
5417
5409
|
i0.ɵɵelementEnd();
|
|
5418
5410
|
i0.ɵɵelementStart(8, "input", 6, 7);
|
|
5419
|
-
i0.ɵɵlistener("ngModelChange", function DrDatePickerWithTimeframeComponent_Template_input_ngModelChange_8_listener($event) { return ctx.valueChangedInCalendar($event); })("click", function DrDatePickerWithTimeframeComponent_Template_input_click_8_listener() { i0.ɵɵrestoreView(
|
|
5411
|
+
i0.ɵɵlistener("ngModelChange", function DrDatePickerWithTimeframeComponent_Template_input_ngModelChange_8_listener($event) { return ctx.valueChangedInCalendar($event); })("click", function DrDatePickerWithTimeframeComponent_Template_input_click_8_listener() { i0.ɵɵrestoreView(_r11); const _r5 = i0.ɵɵreference(13); return i0.ɵɵresetView(_r5.open()); });
|
|
5420
5412
|
i0.ɵɵpipe(10, "async");
|
|
5421
5413
|
i0.ɵɵelementEnd()();
|
|
5422
5414
|
i0.ɵɵtemplate(11, DrDatePickerWithTimeframeComponent_dr_button_11_Template, 1, 1, "dr-button", 8);
|
|
5423
5415
|
i0.ɵɵelementStart(12, "mat-datepicker", 9, 10);
|
|
5424
|
-
i0.ɵɵlistener("yearSelected", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_yearSelected_12_listener($event) { i0.ɵɵrestoreView(
|
|
5416
|
+
i0.ɵɵlistener("yearSelected", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_yearSelected_12_listener($event) { i0.ɵɵrestoreView(_r11); const _r5 = i0.ɵɵreference(13); return i0.ɵɵresetView(ctx.chosenPeriodHandler($event, ctx.timeframeOption.YEAR, _r5)); })("monthSelected", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_monthSelected_12_listener($event) { i0.ɵɵrestoreView(_r11); const _r5 = i0.ɵɵreference(13); return i0.ɵɵresetView(ctx.chosenPeriodHandler($event, ctx.timeframeOption.MONTH, _r5)); })("opened", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_opened_12_listener() { return ctx.onOpen(); })("closed", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_closed_12_listener() { return ctx.onCLose(); });
|
|
5425
5417
|
i0.ɵɵelementEnd();
|
|
5426
5418
|
} if (rf & 2) {
|
|
5427
|
-
const
|
|
5428
|
-
const
|
|
5419
|
+
const _r1 = i0.ɵɵreference(7);
|
|
5420
|
+
const _r5 = i0.ɵɵreference(13);
|
|
5429
5421
|
i0.ɵɵproperty("ngIf", !ctx.disabled);
|
|
5430
5422
|
i0.ɵɵadvance(1);
|
|
5431
5423
|
i0.ɵɵproperty("drTooltip", ctx.datepickerTooltip)("drTooltipPosition", ctx.datepickerTooltipPosition)("drTooltipMousleaveTimeout", ctx.datepickerTooltipTimeout);
|
|
5432
|
-
i0.ɵɵadvance(
|
|
5433
|
-
i0.ɵɵproperty("
|
|
5434
|
-
i0.ɵɵadvance(2);
|
|
5435
|
-
i0.ɵɵproperty("ngTemplateOutlet", _r2)("ngTemplateOutletContext", i0.ɵɵpureFunction1(19, _c0$z, i0.ɵɵpipeBind1(5, 15, ctx.displayedFormattedValue$)));
|
|
5424
|
+
i0.ɵɵadvance(3);
|
|
5425
|
+
i0.ɵɵproperty("ngTemplateOutlet", _r1)("ngTemplateOutletContext", i0.ɵɵpureFunction1(18, _c0$z, i0.ɵɵpipeBind1(5, 14, ctx.displayedFormattedValue$)));
|
|
5436
5426
|
i0.ɵɵadvance(4);
|
|
5437
|
-
i0.ɵɵproperty("ngModel", i0.ɵɵpipeBind1(10,
|
|
5427
|
+
i0.ɵɵproperty("ngModel", i0.ɵɵpipeBind1(10, 16, ctx.displayValue$))("matDatepicker", _r5)("readonly", ctx.readonly)("min", ctx._min)("max", ctx._max);
|
|
5438
5428
|
i0.ɵɵadvance(3);
|
|
5439
5429
|
i0.ɵɵproperty("ngIf", !ctx.disabled);
|
|
5440
5430
|
i0.ɵɵadvance(1);
|
|
5441
5431
|
i0.ɵɵproperty("calendarHeaderComponent", ctx.customHeader)("panelClass", ctx.datePickerService.isUsingDateTagPresets ? "date-picker-preset-tag" : "dr-timeframe-datepicker");
|
|
5442
|
-
} }, dependencies: [DrButtonComponent, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i6.MatDatepicker, i6.MatDatepickerInput, DrTooltipDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}[_nghost-%COMP%]
|
|
5432
|
+
} }, dependencies: [DrButtonComponent, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i6.MatDatepicker, i6.MatDatepickerInput, DrTooltipDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}.use-button-picker[_nghost-%COMP%]{border:none}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}.use-button-picker[_nghost-%COMP%]:after{display:none}[_nghost-%COMP%]:not(.use-button-picker):after, [_nghost-%COMP%]:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:not(.use-button-picker):after{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%] i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%] input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%] input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%] input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%] input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%] input.hidden-calendar-input[_ngcontent-%COMP%]{width:0;height:0;padding:0}[_nghost-%COMP%] .datepicker-button[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%] .range-input[_ngcontent-%COMP%]{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1} .mat-datepicker-popup .dr-week-datepicker{width:386px!important} .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important} .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected, .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important} .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important} .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit} .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit} .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff} .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600} .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600} .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none} .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5} .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)} .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)} .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333} .mat-datepicker-popup .mat-calendar-table-header-divider{display:none} .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0} .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none} .mat-datepicker-popup .mat-calendar-content{display:flex} .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0} .mat-datepicker-popup .mat-calendar-content mat-month-view, .mat-datepicker-popup .mat-calendar-content mat-multi-year-view, .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}[_nghost-%COMP%]{border:none;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;background:transparent}[_nghost-%COMP%]:after{visibility:hidden}.disabled[_nghost-%COMP%]{border:none;padding:0 28px;background:transparent}.disabled[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%]{cursor:default;color:#aeabac}.disabled[_nghost-%COMP%] .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{text-decoration:none}[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%]{display:flex;align-items:center;gap:4px;cursor:pointer;color:#6d6e6f;padding-right:4px}[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%]:hover, [_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%]:hover .dr-icon-date[_ngcontent-%COMP%]{color:#333}[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{visibility:hidden;position:absolute;width:100%}[_nghost-%COMP%] .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{font-size:14px;line-height:24px;font-weight:400;width:auto;text-decoration-line:underline}[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%] .dr-icon-date[_ngcontent-%COMP%]{display:block;position:relative;left:unset} .date-picker-preset-tag{width:386px!important} .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}@media screen and (max-width: 410px){.mat-datepicker-input[_ngcontent-%COMP%]{width:100vw!important} .date-picker-preset-tag{width:calc(100vw - 16px)!important} .date-picker-preset-tag .dr-datepicker-preset-date__tags{justify-content:center;margin-left:-32px;margin-right:-32px}}"], changeDetection: 0 }); }
|
|
5443
5433
|
}
|
|
5444
5434
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerWithTimeframeComponent, [{
|
|
5445
5435
|
type: Component,
|
|
@@ -5447,13 +5437,8 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
5447
5437
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
|
|
5448
5438
|
{ provide: DateAdapter, useClass: CustomDateAdapter },
|
|
5449
5439
|
{ provide: DrDatePickerService },
|
|
5450
|
-
], template: "<dr-button\n [disabled]=\"isPrevDateDisabled\"\n *ngIf=\"!disabled\"\n theme=\"icon\"\n icon=\"dr-icon-arrow-left\"\n (click)=\"pagingClicked(false)\"></dr-button>\n<div\n [drTooltip]=\"datepickerTooltip\"\n [drTooltipPosition]=\"datepickerTooltipPosition\"\n [drTooltipMousleaveTimeout]=\"datepickerTooltipTimeout\"\n class=\"dr-datepicker-input-container\">\n <i
|
|
5451
|
-
}], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, {
|
|
5452
|
-
type: HostBinding,
|
|
5453
|
-
args: ['class.dr-date-picker-on-dashboard']
|
|
5454
|
-
}], isDashboardDatepicker: [{
|
|
5455
|
-
type: Input
|
|
5456
|
-
}], dateFormatConfig: [{
|
|
5440
|
+
], template: "<dr-button\n [disabled]=\"isPrevDateDisabled\"\n *ngIf=\"!disabled\"\n theme=\"icon\"\n icon=\"dr-icon-arrow-left\"\n (click)=\"pagingClicked(false)\"></dr-button>\n<div\n [drTooltip]=\"datepickerTooltip\"\n [drTooltipPosition]=\"datepickerTooltipPosition\"\n [drTooltipMousleaveTimeout]=\"datepickerTooltipTimeout\"\n class=\"dr-datepicker-input-container\">\n <i class=\"dr-icon-date\" (click)=\"datepickerInput.click()\"></i>\n\n <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n <ng-container\n [ngTemplateOutlet]=\"formattedValueTmpl\"\n [ngTemplateOutletContext]=\"{\n formattedValue: displayedFormattedValue$ | async,\n }\">\n </ng-container>\n <ng-template #formattedValueTmpl let-value=\"formattedValue\">\n <span>\n {{\n datePickerService.isUsingDateTagPresets && !!presetTagSelected\n ? presetTagSelected + ' (' + value + ')'\n : value\n }}\n </span>\n </ng-template>\n </div>\n <input\n #datepickerInput\n [ngModel]=\"displayValue$ | async\"\n (ngModelChange)=\"valueChangedInCalendar($event)\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\" />\n</div>\n<dr-button\n [disabled]=\"isNextDateDisabled\"\n *ngIf=\"!disabled\"\n theme=\"icon\"\n icon=\"dr-icon-arrow-right\"\n (click)=\"pagingClicked(true)\"></dr-button>\n\n<mat-datepicker\n #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\">\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host.use-button-picker{border:none}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{width:386px!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}:host{border:none;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;background:transparent}:host:after{visibility:hidden}:host.disabled{border:none;padding:0 28px;background:transparent}:host.disabled .dr-datepicker-input-container{cursor:default;color:#aeabac}:host.disabled .dr-datepicker-input-container__formatted-value-display{text-decoration:none}:host .dr-datepicker-input-container{display:flex;align-items:center;gap:4px;cursor:pointer;color:#6d6e6f;padding-right:4px}:host .dr-datepicker-input-container:hover,:host .dr-datepicker-input-container:hover .dr-icon-date{color:#333}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{font-size:14px;line-height:24px;font-weight:400;width:auto;text-decoration-line:underline}:host .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;left:unset}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}@media screen and (max-width: 410px){.mat-datepicker-input{width:100vw!important}::ng-deep .date-picker-preset-tag{width:calc(100vw - 16px)!important}::ng-deep .date-picker-preset-tag .dr-datepicker-preset-date__tags{justify-content:center;margin-left:-32px;margin-right:-32px}}\n"] }]
|
|
5441
|
+
}], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, { dateFormatConfig: [{
|
|
5457
5442
|
type: Input
|
|
5458
5443
|
}], canSelectTimeframe: [{
|
|
5459
5444
|
type: Input
|