@datarailsshared/datarailsshared 1.6.169 → 1.6.173
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.173.tgz +0 -0
- package/esm2022/lib/dr-inputs/date-pickers/dr-date-picker_custom-header/dr-date-picker_custom-header.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/date-pickers/dr-fiscal-month-calendar-picker/dr-fiscal-month-calendar-header.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/date-pickers/services/dr-date-picker.service.mjs +37 -1
- package/esm2022/lib/dr-progress-bar/dr-progress-bar.component.mjs +13 -5
- package/esm2022/lib/models/datePicker.mjs +5 -1
- package/esm2022/lib/utils/dr-shared-utils.mjs +13 -1
- package/fesm2022/datarailsshared-datarailsshared.mjs +67 -7
- package/fesm2022/datarailsshared-datarailsshared.mjs.map +1 -1
- package/lib/dr-inputs/date-pickers/services/dr-date-picker.service.d.ts +2 -0
- package/lib/dr-progress-bar/dr-progress-bar.component.d.ts +3 -1
- package/lib/models/datePicker.d.ts +5 -1
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.6.169.tgz +0 -0
|
@@ -152,6 +152,10 @@ var DateTags;
|
|
|
152
152
|
DateTags["YESTERDAY"] = "yesterday";
|
|
153
153
|
DateTags["THIS_MONTH"] = "this_month";
|
|
154
154
|
DateTags["PREV_MONTH"] = "prev_month";
|
|
155
|
+
DateTags["THIS_QUARTER"] = "this_quarter";
|
|
156
|
+
DateTags["PREV_QUARTER"] = "prev_quarter";
|
|
157
|
+
DateTags["THIS_YEAR"] = "this_year";
|
|
158
|
+
DateTags["PREV_YEAR"] = "prev_year";
|
|
155
159
|
})(DateTags || (DateTags = {}));
|
|
156
160
|
|
|
157
161
|
class DrSharedUtils {
|
|
@@ -196,6 +200,18 @@ class DrSharedUtils {
|
|
|
196
200
|
case DateTags.PREV_MONTH:
|
|
197
201
|
todayDate.subtract(1, 'months').endOf('month');
|
|
198
202
|
return todayDate;
|
|
203
|
+
case DateTags.THIS_QUARTER:
|
|
204
|
+
todayDate.endOf('quarter');
|
|
205
|
+
return todayDate;
|
|
206
|
+
case DateTags.PREV_QUARTER:
|
|
207
|
+
todayDate.subtract(1, 'quarters').endOf('quarter');
|
|
208
|
+
return todayDate;
|
|
209
|
+
case DateTags.THIS_YEAR:
|
|
210
|
+
todayDate.endOf('year');
|
|
211
|
+
return todayDate;
|
|
212
|
+
case DateTags.PREV_YEAR:
|
|
213
|
+
todayDate.subtract(1, 'years').endOf('year');
|
|
214
|
+
return todayDate;
|
|
199
215
|
}
|
|
200
216
|
}
|
|
201
217
|
static { this.fromResizeObserver = (target) => new Observable((observer) => {
|
|
@@ -523,6 +539,22 @@ class DrDatePickerService {
|
|
|
523
539
|
this.updateTimeframeAndFormat(DateFromats.MONTH_YEAR_FORMAT);
|
|
524
540
|
this.selectDateInCalendarMonthView(date, calender);
|
|
525
541
|
break;
|
|
542
|
+
case DateTags.THIS_QUARTER:
|
|
543
|
+
this.updateTimeframeAndFormat(DateFromats.QUARTER_FORMAT);
|
|
544
|
+
this.selectDateInCalendarQuarterView(date, calender);
|
|
545
|
+
break;
|
|
546
|
+
case DateTags.PREV_QUARTER:
|
|
547
|
+
this.updateTimeframeAndFormat(DateFromats.QUARTER_FORMAT);
|
|
548
|
+
this.selectDateInCalendarQuarterView(date, calender);
|
|
549
|
+
break;
|
|
550
|
+
case DateTags.THIS_YEAR:
|
|
551
|
+
this.updateTimeframeAndFormat(DateFromats.YEAR_FORMAT);
|
|
552
|
+
this.selectDateInCalendarYearView(date, calender);
|
|
553
|
+
break;
|
|
554
|
+
case DateTags.PREV_YEAR:
|
|
555
|
+
this.updateTimeframeAndFormat(DateFromats.YEAR_FORMAT);
|
|
556
|
+
this.selectDateInCalendarYearView(date, calender);
|
|
557
|
+
break;
|
|
526
558
|
}
|
|
527
559
|
}
|
|
528
560
|
this.presetTag$.next(tag);
|
|
@@ -538,6 +570,26 @@ class DrDatePickerService {
|
|
|
538
570
|
}
|
|
539
571
|
});
|
|
540
572
|
}
|
|
573
|
+
selectDateInCalendarQuarterView(date, calender) {
|
|
574
|
+
setTimeout(() => {
|
|
575
|
+
const yearView = calender.yearView;
|
|
576
|
+
if (yearView) {
|
|
577
|
+
yearView._activeDate = date;
|
|
578
|
+
yearView._selected = date;
|
|
579
|
+
yearView._init();
|
|
580
|
+
}
|
|
581
|
+
});
|
|
582
|
+
}
|
|
583
|
+
selectDateInCalendarYearView(date, calender) {
|
|
584
|
+
setTimeout(() => {
|
|
585
|
+
const multiYearView = calender.multiYearView;
|
|
586
|
+
if (multiYearView) {
|
|
587
|
+
multiYearView._activeDate = date;
|
|
588
|
+
multiYearView._selectedYear = date.year();
|
|
589
|
+
multiYearView._init();
|
|
590
|
+
}
|
|
591
|
+
});
|
|
592
|
+
}
|
|
541
593
|
resetPresetTag() {
|
|
542
594
|
if (!this.keepPresetTag) {
|
|
543
595
|
this.presetTag$.next(null);
|
|
@@ -2160,11 +2212,11 @@ class DrDatePickerCustomHeaderComponent {
|
|
|
2160
2212
|
i0.ɵɵtextInterpolate(ctx.periodYearLabel);
|
|
2161
2213
|
i0.ɵɵadvance(3);
|
|
2162
2214
|
i0.ɵɵproperty("ngIf", ctx.currentViewIsQuarter);
|
|
2163
|
-
} }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrTooltipDirective, DrSelectComponent, DrShowTimeframePipe], styles: ["[_nghost-%COMP%]{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper[_ngcontent-%COMP%]{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date[_ngcontent-%COMP%]{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags[_ngcontent-%COMP%]{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%] .dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected[_ngcontent-%COMP%]{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label[_ngcontent-%COMP%]{cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector[_ngcontent-%COMP%]{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector[_ngcontent-%COMP%]:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector.selected[_ngcontent-%COMP%]{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector--disabled[_ngcontent-%COMP%], .dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}"], changeDetection: 0 }); }
|
|
2215
|
+
} }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrTooltipDirective, DrSelectComponent, DrShowTimeframePipe], styles: ["[_nghost-%COMP%]{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper[_ngcontent-%COMP%]{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date[_ngcontent-%COMP%]{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%] .dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected[_ngcontent-%COMP%]{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label[_ngcontent-%COMP%]{cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector[_ngcontent-%COMP%]{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector[_ngcontent-%COMP%]:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector.selected[_ngcontent-%COMP%]{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector--disabled[_ngcontent-%COMP%], .dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}"], changeDetection: 0 }); }
|
|
2164
2216
|
}
|
|
2165
2217
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerCustomHeaderComponent, [{
|
|
2166
2218
|
type: Component,
|
|
2167
|
-
args: [{ selector: 'dr-date-picker_custom-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n <div class=\"dr-datepicker-preset-date__tags\"\n [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': !datePickerService.isUsingTimeFrameSelect }\">\n <div\n *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n id=\"preset_tag\"\n class=\"dr-datepicker-preset-date__tags__tag\"\n (click)=\"onSelectPresetTag(tag)\"\n [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n [drTooltipPosition]=\"'top'\">\n {{ tag.label }}\n </div>\n </div>\n </div>\n <dr-select\n *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n class=\"dr-datepicker__timeframe-select\"\n [ngModel]=\"selectedTimeframe\"\n [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n bindLabel=\"title\"\n bindValue=\"value\"\n (ngModelChange)=\"setTimeframe($event)\">\n </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(false)\">\n <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n </div>\n <span class=\"example-header-label\">\n <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n </span>\n <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(true)\">\n <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n <div\n *ngFor=\"let quarter of quarters\"\n class=\"quarter-selector\"\n (click)=\"onSelectQuarter(quarter)\"\n [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n Q{{ quarter }}\n </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
|
|
2219
|
+
args: [{ selector: 'dr-date-picker_custom-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n <div class=\"dr-datepicker-preset-date__tags\"\n [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': !datePickerService.isUsingTimeFrameSelect }\">\n <div\n *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n id=\"preset_tag\"\n class=\"dr-datepicker-preset-date__tags__tag\"\n (click)=\"onSelectPresetTag(tag)\"\n [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n [drTooltipPosition]=\"'top'\">\n {{ tag.label }}\n </div>\n </div>\n </div>\n <dr-select\n *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n class=\"dr-datepicker__timeframe-select\"\n [ngModel]=\"selectedTimeframe\"\n [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n bindLabel=\"title\"\n bindValue=\"value\"\n (ngModelChange)=\"setTimeframe($event)\">\n </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(false)\">\n <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n </div>\n <span class=\"example-header-label\">\n <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n </span>\n <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(true)\">\n <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n <div\n *ngFor=\"let quarter of quarters\"\n class=\"quarter-selector\"\n (click)=\"onSelectQuarter(quarter)\"\n [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n Q{{ quarter }}\n </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
|
|
2168
2220
|
}], function () { return [{ type: i6.MatCalendar }, { type: i1$4.DateAdapter }, { type: CustomDateFormat, decorators: [{
|
|
2169
2221
|
type: Inject,
|
|
2170
2222
|
args: [MAT_DATE_FORMATS]
|
|
@@ -5058,11 +5110,11 @@ class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderCompo
|
|
|
5058
5110
|
i0.ɵɵtextInterpolate(ctx.periodYearLabel);
|
|
5059
5111
|
i0.ɵɵadvance(3);
|
|
5060
5112
|
i0.ɵɵproperty("ngIf", ctx.currentViewIsQuarter);
|
|
5061
|
-
} }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrTooltipDirective, DrSelectComponent, DrShowTimeframePipe], styles: ["[_nghost-%COMP%]{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper[_ngcontent-%COMP%]{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date[_ngcontent-%COMP%]{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags[_ngcontent-%COMP%]{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%] .dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected[_ngcontent-%COMP%]{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label[_ngcontent-%COMP%]{cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector[_ngcontent-%COMP%]{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector[_ngcontent-%COMP%]:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector.selected[_ngcontent-%COMP%]{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector--disabled[_ngcontent-%COMP%], .dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}"], changeDetection: 0 }); }
|
|
5113
|
+
} }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrTooltipDirective, DrSelectComponent, DrShowTimeframePipe], styles: ["[_nghost-%COMP%]{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper[_ngcontent-%COMP%]{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date[_ngcontent-%COMP%]{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%] .dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected[_ngcontent-%COMP%]{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label[_ngcontent-%COMP%]{cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector[_ngcontent-%COMP%]{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector[_ngcontent-%COMP%]:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector.selected[_ngcontent-%COMP%]{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector--disabled[_ngcontent-%COMP%], .dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}"], changeDetection: 0 }); }
|
|
5062
5114
|
}
|
|
5063
5115
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrFiscalMonthCalendarHeaderComponent, [{
|
|
5064
5116
|
type: Component,
|
|
5065
|
-
args: [{ selector: 'dr-fiscal-month-calendar-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n <div class=\"dr-datepicker-preset-date__tags\"\n [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': !datePickerService.isUsingTimeFrameSelect }\">\n <div\n *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n id=\"preset_tag\"\n class=\"dr-datepicker-preset-date__tags__tag\"\n (click)=\"onSelectPresetTag(tag)\"\n [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n [drTooltipPosition]=\"'top'\">\n {{ tag.label }}\n </div>\n </div>\n </div>\n <dr-select\n *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n class=\"dr-datepicker__timeframe-select\"\n [ngModel]=\"selectedTimeframe\"\n [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n bindLabel=\"title\"\n bindValue=\"value\"\n (ngModelChange)=\"setTimeframe($event)\">\n </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(false)\">\n <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n </div>\n <span class=\"example-header-label\">\n <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n </span>\n <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(true)\">\n <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n <div\n *ngFor=\"let quarter of quarters\"\n class=\"quarter-selector\"\n (click)=\"onSelectQuarter(quarter)\"\n [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n Q{{ quarter }}\n </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
|
|
5117
|
+
args: [{ selector: 'dr-fiscal-month-calendar-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n <div class=\"dr-datepicker-preset-date__tags\"\n [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': !datePickerService.isUsingTimeFrameSelect }\">\n <div\n *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n id=\"preset_tag\"\n class=\"dr-datepicker-preset-date__tags__tag\"\n (click)=\"onSelectPresetTag(tag)\"\n [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n [drTooltipPosition]=\"'top'\">\n {{ tag.label }}\n </div>\n </div>\n </div>\n <dr-select\n *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n class=\"dr-datepicker__timeframe-select\"\n [ngModel]=\"selectedTimeframe\"\n [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n bindLabel=\"title\"\n bindValue=\"value\"\n (ngModelChange)=\"setTimeframe($event)\">\n </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(false)\">\n <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n </div>\n <span class=\"example-header-label\">\n <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n </span>\n <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(true)\">\n <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n <div\n *ngFor=\"let quarter of quarters\"\n class=\"quarter-selector\"\n (click)=\"onSelectQuarter(quarter)\"\n [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n Q{{ quarter }}\n </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
|
|
5066
5118
|
}], null, null); })();
|
|
5067
5119
|
|
|
5068
5120
|
function DrFiscalMonthCalendarPickerComponent_i_0_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -14540,9 +14592,12 @@ class DrProgressBarComponent {
|
|
|
14540
14592
|
* @description Option to hide value label
|
|
14541
14593
|
*/
|
|
14542
14594
|
this.showValue = true;
|
|
14595
|
+
this.theme = 'light';
|
|
14543
14596
|
}
|
|
14544
14597
|
/** @nocollapse */ static { this.ɵfac = function DrProgressBarComponent_Factory(t) { return new (t || DrProgressBarComponent)(); }; }
|
|
14545
|
-
/** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrProgressBarComponent, selectors: [["dr-progress-bar"]],
|
|
14598
|
+
/** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrProgressBarComponent, selectors: [["dr-progress-bar"]], hostVars: 2, hostBindings: function DrProgressBarComponent_HostBindings(rf, ctx) { if (rf & 2) {
|
|
14599
|
+
i0.ɵɵclassMap(ctx.theme);
|
|
14600
|
+
} }, inputs: { progress: "progress", showValue: "showValue", theme: "theme" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$5, decls: 5, vars: 3, consts: [[1, "progress-bar__background"], [1, "progress-bar__background__fill"], [1, "progress-bar__value"], [4, "ngIf"]], template: function DrProgressBarComponent_Template(rf, ctx) { if (rf & 1) {
|
|
14546
14601
|
i0.ɵɵprojectionDef();
|
|
14547
14602
|
i0.ɵɵelementStart(0, "div", 0);
|
|
14548
14603
|
i0.ɵɵelement(1, "div", 1);
|
|
@@ -14556,16 +14611,21 @@ class DrProgressBarComponent {
|
|
|
14556
14611
|
i0.ɵɵstyleProp("width", (ctx.progress || 0) + "%");
|
|
14557
14612
|
i0.ɵɵadvance(3);
|
|
14558
14613
|
i0.ɵɵproperty("ngIf", ctx.showValue);
|
|
14559
|
-
} }, dependencies: [CommonModule, i1.NgIf], styles: ["[_nghost-%COMP%], .progress-bar[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;gap:
|
|
14614
|
+
} }, dependencies: [CommonModule, i1.NgIf], styles: ["[_nghost-%COMP%], .progress-bar[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;gap:16px}__value[_nghost-%COMP%], .progress-bar__value[_ngcontent-%COMP%]{display:flex;align-items:center;color:#333;font-size:14px;line-height:24px;font-weight:400}__background[_nghost-%COMP%], .progress-bar__background[_ngcontent-%COMP%]{display:flex;flex-grow:1;position:relative;height:6px;background:#dfe0e3;border-radius:20px}__background__fill[_nghost-%COMP%], .progress-bar__background__fill[_ngcontent-%COMP%]{transition:all .5s;position:absolute;left:0;top:0;width:0;height:100%;background:#4646ce;border-radius:20px}.dark[_nghost-%COMP%] .progress-bar__value[_ngcontent-%COMP%], .progress-bar.dark[_ngcontent-%COMP%] .progress-bar__value[_ngcontent-%COMP%]{color:#fff}"] }); }
|
|
14560
14615
|
}
|
|
14561
14616
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrProgressBarComponent, [{
|
|
14562
14617
|
type: Component,
|
|
14563
|
-
args: [{ selector: 'dr-progress-bar', standalone: true, imports: [CommonModule], template: "<div class=\"progress-bar__background\">\n <div class=\"progress-bar__background__fill\" [style.width]=\"(progress || 0) + '%'\"></div>\n</div>\n<span class=\"progress-bar__value\">\n <ng-content></ng-content>\n <ng-container *ngIf=\"showValue\">{{ progress || 0 }}%</ng-container>\n</span>\n", styles: [":host,.progress-bar{display:flex;align-items:center;width:100%;gap:
|
|
14618
|
+
args: [{ selector: 'dr-progress-bar', standalone: true, imports: [CommonModule], template: "<div class=\"progress-bar__background\">\n <div class=\"progress-bar__background__fill\" [style.width]=\"(progress || 0) + '%'\"></div>\n</div>\n<span class=\"progress-bar__value\">\n <ng-content></ng-content>\n <ng-container *ngIf=\"showValue\">{{ progress || 0 }}%</ng-container>\n</span>\n", styles: [":host,.progress-bar{display:flex;align-items:center;width:100%;gap:16px}:host__value,.progress-bar__value{display:flex;align-items:center;color:#333;font-size:14px;line-height:24px;font-weight:400}:host__background,.progress-bar__background{display:flex;flex-grow:1;position:relative;height:6px;background:#dfe0e3;border-radius:20px}:host__background__fill,.progress-bar__background__fill{transition:all .5s;position:absolute;left:0;top:0;width:0;height:100%;background:#4646ce;border-radius:20px}:host.dark .progress-bar__value,.progress-bar.dark .progress-bar__value{color:#fff}\n"] }]
|
|
14564
14619
|
}], null, { progress: [{
|
|
14565
14620
|
type: Input,
|
|
14566
14621
|
args: [{ required: true }]
|
|
14567
14622
|
}], showValue: [{
|
|
14568
14623
|
type: Input
|
|
14624
|
+
}], theme: [{
|
|
14625
|
+
type: Input
|
|
14626
|
+
}, {
|
|
14627
|
+
type: HostBinding,
|
|
14628
|
+
args: ['class']
|
|
14569
14629
|
}] }); })();
|
|
14570
14630
|
|
|
14571
14631
|
const _c0$4 = ["*"];
|