@datarailsshared/datarailsshared 1.6.183 → 1.6.187

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.
@@ -383,6 +383,7 @@ class DrDatePickerService {
383
383
  };
384
384
  this.fiscalYearMonthsModifier = 0;
385
385
  this.fiscalYearBack = false;
386
+ this.selectCurrentQuarter = false;
386
387
  this._innerValue$ = new BehaviorSubject(null);
387
388
  this.innerValue$ = this._innerValue$.asObservable();
388
389
  }
@@ -1721,13 +1722,13 @@ class DrSelectComponent {
1721
1722
  i0.ɵɵattribute("id", ctx.hostId);
1722
1723
  i0.ɵɵclassMap(ctx.type);
1723
1724
  i0.ɵɵclassProp("textView", ctx.asTextView);
1724
- } }, inputs: { type: "type", clearInputTextAfterSelection: "clearInputTextAfterSelection", className: "className", items: "items", addTag: "addTag", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", clearable: "clearable", searchable: "searchable", isDisplayingSearchInHeader: "isDisplayingSearchInHeader", minItemsToDisplaySearchInHeader: "minItemsToDisplaySearchInHeader", searchFn: "searchFn", multiple: "multiple", multipleHeightIncreased: "multipleHeightIncreased", hideSelected: "hideSelected", maxSelectedItems: "maxSelectedItems", placeholder: "placeholder", loading: "loading", loadingText: "loadingText", readonly: "readonly", disabled: "disabled", groupBy: "groupBy", optionWithDescription: "optionWithDescription", id: "id", keyDownFn: "keyDownFn", selectedItem: "selectedItem", dropdownClass: "dropdownClass", closeOnSelect: "closeOnSelect", textView: "textView", autofocus: "autofocus", isOpen: "isOpen", noValuePadding: "noValuePadding", selectOnTabKeyPress: "selectOnTabKeyPress", virtualScroll: "virtualScroll", typeahead: "typeahead" }, outputs: { search: "search", scrollToEnd: "scrollToEnd", change: "change", open: "open", closeUp: "closeUp" }, features: [i0.ɵɵProvidersFeature([
1725
+ } }, inputs: { type: "type", clearInputTextAfterSelection: "clearInputTextAfterSelection", className: "className", items: "items", addTag: "addTag", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", clearable: "clearable", compareWith: "compareWith", searchable: "searchable", isDisplayingSearchInHeader: "isDisplayingSearchInHeader", minItemsToDisplaySearchInHeader: "minItemsToDisplaySearchInHeader", searchFn: "searchFn", multiple: "multiple", multipleHeightIncreased: "multipleHeightIncreased", hideSelected: "hideSelected", maxSelectedItems: "maxSelectedItems", placeholder: "placeholder", loading: "loading", loadingText: "loadingText", readonly: "readonly", disabled: "disabled", groupBy: "groupBy", optionWithDescription: "optionWithDescription", id: "id", keyDownFn: "keyDownFn", selectedItem: "selectedItem", dropdownClass: "dropdownClass", closeOnSelect: "closeOnSelect", textView: "textView", autofocus: "autofocus", isOpen: "isOpen", noValuePadding: "noValuePadding", selectOnTabKeyPress: "selectOnTabKeyPress", virtualScroll: "virtualScroll", typeahead: "typeahead" }, outputs: { search: "search", scrollToEnd: "scrollToEnd", change: "change", open: "open", closeUp: "closeUp" }, features: [i0.ɵɵProvidersFeature([
1725
1726
  {
1726
1727
  provide: NG_VALUE_ACCESSOR,
1727
1728
  useExisting: DrSelectComponent,
1728
1729
  multi: true,
1729
1730
  },
1730
- ])], decls: 12, vars: 39, consts: [[1, "dr-select", 3, "ngModel", "items", "bindLabel", "bindValue", "multiple", "addTag", "appendTo", "clearable", "searchable", "hideSelected", "placeholder", "loading", "loadingText", "readonly", "closeOnSelect", "disabled", "labelForId", "maxSelectedItems", "keyDownFn", "searchFn", "isOpen", "groupBy", "selectOnTab", "virtualScroll", "typeahead", "ngModelChange", "search", "scrollToEnd", "keydown.tab", "change", "open", "close"], ["selectComponent", ""], [4, "ngIf"], ["ng-loadingspinner-tmp", ""], ["class", "search-icon dr-icon-search", 4, "ngIf"], ["ng-header-tmp", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "search", 1, "dr-select__search", 3, "ngModel", "ngModelChange"], ["ng-label-tmp", ""], ["ng-multi-label-tmp", ""], ["ng-option-tmp", ""], [1, "dr-select__option-with-desc__wrapper"], [1, "dr-select__option-with-desc__description"], ["ng-footer-tmp", ""], ["ng-optgroup-tmp", ""], ["class", "dr-select__loading", 3, "drSpinner", "drSpinnerType", "drSpinnerSize", "drSpinnerNoOverlay", 4, "ngIf"], [1, "dr-select__loading", 3, "drSpinner", "drSpinnerType", "drSpinnerSize", "drSpinnerNoOverlay"], [1, "search-icon", "dr-icon-search"]], template: function DrSelectComponent_Template(rf, ctx) { if (rf & 1) {
1731
+ ])], decls: 12, vars: 40, consts: [[1, "dr-select", 3, "ngModel", "items", "bindLabel", "bindValue", "multiple", "addTag", "appendTo", "clearable", "searchable", "hideSelected", "placeholder", "loading", "loadingText", "readonly", "closeOnSelect", "disabled", "labelForId", "maxSelectedItems", "keyDownFn", "searchFn", "isOpen", "groupBy", "selectOnTab", "virtualScroll", "typeahead", "compareWith", "ngModelChange", "search", "scrollToEnd", "keydown.tab", "change", "open", "close"], ["selectComponent", ""], [4, "ngIf"], ["ng-loadingspinner-tmp", ""], ["class", "search-icon dr-icon-search", 4, "ngIf"], ["ng-header-tmp", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "search", 1, "dr-select__search", 3, "ngModel", "ngModelChange"], ["ng-label-tmp", ""], ["ng-multi-label-tmp", ""], ["ng-option-tmp", ""], [1, "dr-select__option-with-desc__wrapper"], [1, "dr-select__option-with-desc__description"], ["ng-footer-tmp", ""], ["ng-optgroup-tmp", ""], ["class", "dr-select__loading", 3, "drSpinner", "drSpinnerType", "drSpinnerSize", "drSpinnerNoOverlay", 4, "ngIf"], [1, "dr-select__loading", 3, "drSpinner", "drSpinnerType", "drSpinnerSize", "drSpinnerNoOverlay"], [1, "search-icon", "dr-icon-search"]], template: function DrSelectComponent_Template(rf, ctx) { if (rf & 1) {
1731
1732
  i0.ɵɵelementStart(0, "ng-select", 0, 1);
1732
1733
  i0.ɵɵlistener("ngModelChange", function DrSelectComponent_Template_ng_select_ngModelChange_0_listener($event) { return ctx.selectedItem = $event; })("search", function DrSelectComponent_Template_ng_select_search_0_listener($event) { return ctx.search.emit($event); })("scrollToEnd", function DrSelectComponent_Template_ng_select_scrollToEnd_0_listener($event) { return ctx.scrollToEnd.emit($event); })("keydown.tab", function DrSelectComponent_Template_ng_select_keydown_tab_0_listener($event) { return ctx.onTabKeypress($event); })("change", function DrSelectComponent_Template_ng_select_change_0_listener() { return ctx.onValueSelected(ctx.selectedItem); })("open", function DrSelectComponent_Template_ng_select_open_0_listener($event) { ctx.open.emit($event); return ctx.onDropdownOpen(); })("close", function DrSelectComponent_Template_ng_select_close_0_listener($event) { return ctx.onClose($event); });
1733
1734
  i0.ɵɵtemplate(2, DrSelectComponent_2_Template, 1, 0, null, 2);
@@ -1744,7 +1745,7 @@ class DrSelectComponent {
1744
1745
  } if (rf & 2) {
1745
1746
  const _r0 = i0.ɵɵreference(1);
1746
1747
  i0.ɵɵclassProp("ng-select--no-value-padding", ctx.noValuePadding)("ng-select--multiple-height-increased", ctx.multipleHeightIncreased);
1747
- i0.ɵɵproperty("ngModel", ctx.selectedItem)("items", ctx.items)("bindLabel", ctx.bindLabel)("bindValue", ctx.bindValue)("multiple", ctx.multiple)("addTag", ctx.addTag)("appendTo", ctx.appendTo)("clearable", ctx.clearable)("searchable", ctx.searchable)("hideSelected", ctx.hideSelected)("placeholder", ctx.placeholder)("loading", ctx.loading)("loadingText", ctx.loadingText)("readonly", ctx.readonly)("closeOnSelect", ctx.closeOnSelect)("disabled", ctx.disabled)("labelForId", ctx.id)("maxSelectedItems", ctx.maxSelectedItems)("keyDownFn", ctx.keyDownFn)("searchFn", ctx.searchFn)("isOpen", (ctx.type !== "search-input" || !!(_r0.searchTerm == null ? null : _r0.searchTerm.length)) && ctx.isOpen)("groupBy", ctx.groupBy)("selectOnTab", ctx.selectOnTabKeyPress)("virtualScroll", ctx.virtualScroll)("typeahead", ctx.typeahead);
1748
+ i0.ɵɵproperty("ngModel", ctx.selectedItem)("items", ctx.items)("bindLabel", ctx.bindLabel)("bindValue", ctx.bindValue)("multiple", ctx.multiple)("addTag", ctx.addTag)("appendTo", ctx.appendTo)("clearable", ctx.clearable)("searchable", ctx.searchable)("hideSelected", ctx.hideSelected)("placeholder", ctx.placeholder)("loading", ctx.loading)("loadingText", ctx.loadingText)("readonly", ctx.readonly)("closeOnSelect", ctx.closeOnSelect)("disabled", ctx.disabled)("labelForId", ctx.id)("maxSelectedItems", ctx.maxSelectedItems)("keyDownFn", ctx.keyDownFn)("searchFn", ctx.searchFn)("isOpen", (ctx.type !== "search-input" || !!(_r0.searchTerm == null ? null : _r0.searchTerm.length)) && ctx.isOpen)("groupBy", ctx.groupBy)("selectOnTab", ctx.selectOnTabKeyPress)("virtualScroll", ctx.virtualScroll)("typeahead", ctx.typeahead)("compareWith", ctx.compareWith);
1748
1749
  i0.ɵɵattribute("autofocus", ctx.autofocus);
1749
1750
  i0.ɵɵadvance(2);
1750
1751
  i0.ɵɵproperty("ngIf", ctx.optionHeaderTemplate);
@@ -1774,7 +1775,7 @@ class DrSelectComponent {
1774
1775
  useExisting: DrSelectComponent,
1775
1776
  multi: true,
1776
1777
  },
1777
- ], template: "<ng-select\n [(ngModel)]=\"selectedItem\"\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [multiple]=\"multiple\"\n [addTag]=\"addTag\"\n [appendTo]=\"appendTo\"\n [clearable]=\"clearable\"\n [searchable]=\"searchable\"\n [hideSelected]=\"hideSelected\"\n [placeholder]=\"placeholder\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText\"\n [readonly]=\"readonly\"\n [closeOnSelect]=\"closeOnSelect\"\n [disabled]=\"disabled\"\n [labelForId]=\"id\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [keyDownFn]=\"keyDownFn\"\n [searchFn]=\"searchFn\"\n [isOpen]=\"(type !== 'search-input' || !!selectComponent.searchTerm?.length) && isOpen\"\n [groupBy]=\"groupBy\"\n [attr.autofocus]=\"autofocus\"\n [selectOnTab]=\"selectOnTabKeyPress\"\n [virtualScroll]=\"virtualScroll\"\n [typeahead]=\"typeahead\"\n (search)=\"search.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit($event)\"\n (keydown.tab)=\"onTabKeypress($event)\"\n (change)=\"onValueSelected(selectedItem)\"\n (open)=\"open.emit($event); onDropdownOpen()\"\n (close)=\"onClose($event)\"\n class=\"dr-select\"\n [class.ng-select--no-value-padding]=\"noValuePadding\"\n [class.ng-select--multiple-height-increased]=\"multipleHeightIncreased\"\n #selectComponent>\n <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n </ng-template>\n <ng-template\n ng-header-tmp\n *ngIf=\"!optionHeaderTemplate && isDisplayingSearchInHeader && items?.length >= minItemsToDisplaySearchInHeader\"\n let-item=\"item\">\n <dr-input\n class=\"dr-select__search\"\n [ngModel]=\"selectComponent.searchTerm\"\n (ngModelChange)=\"selectComponent.itemsList.filter($event + '')\"\n type=\"search\">\n </dr-input>\n </ng-template>\n <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"multiLabelTemplate\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-container [ngTemplateOutlet]=\"multiLabelTemplate\" [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ item: item, item$: item$ }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"optionWithDescription\" ng-option-tmp let-item=\"item\">\n <div class=\"dr-select__option-with-desc__wrapper\">\n <div>{{ item.name }}</div>\n <div class=\"dr-select__option-with-desc__description\">{{ item?.description }}</div>\n </div>\n </ng-template>\n <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n <ng-container\n [ngTemplateOutlet]=\"optionFooterTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, close: selectComponent.close.bind(selectComponent) }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"groupBy\" ng-optgroup-tmp let-item=\"item\">\n {{ item[groupBy] }}\n </ng-template>\n <ng-template ng-loadingspinner-tmp>\n <div\n *ngIf=\"loading\"\n class=\"dr-select__loading\"\n [drSpinner]=\"loading\"\n [drSpinnerType]=\"'circle'\"\n [drSpinnerSize]=\"'small'\"\n [drSpinnerNoOverlay]=\"true\"></div>\n </ng-template>\n</ng-select>\n<i *ngIf=\"type === 'search-input'\" class=\"search-icon dr-icon-search\"></i>\n", styles: [":host{width:100%;height:32px;font-family:Poppins,sans-serif}:host.textView::ng-deep{width:auto}:host.textView::ng-deep ng-select.ng-select .ng-select-container{border:none!important;cursor:pointer}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0;color:#4646ce}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container:hover{text-decoration-line:underline}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#fff!important;border:none!important;cursor:default}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-value-container:hover{text-decoration-line:none}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9ea1aa;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{font-size:14px;line-height:24px;font-weight:400;top:0!important;padding:0 50px 0 8px!important;color:#333}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:12px;line-height:16px;font-weight:400;color:#333;height:24px;padding:2px 16px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea75\";font-size:20px;color:#333}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#f0f1f4!important;border:1px solid #aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow:before{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#bf1d30}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container{max-height:88px}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container .ng-value-container{max-height:88px}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value{padding:0}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value .ng-select-user-label,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-select-user-label{height:100%}:host.ng-invalid.ng-touched::ng-deep ng-select.ng-select .ng-select-container{border-color:#bf1d30}:host .dr-select__loading{position:relative;height:32px;width:24px}:host.search-input{position:relative}:host.search-input .search-icon{position:absolute;top:4px;right:16px;color:#6d6e6f;z-index:1001}:host.search-input::ng-deep ng-select.ng-select .ng-select-container{border-radius:16px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none!important}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper{display:flex;justify-content:center;align-items:center;right:40px;top:1px;width:24px;height:24px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper .ng-clear{font-size:24px;font-weight:300;color:#6d6e6f}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 16px!important;width:calc(100% - 63px)}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container input{height:100%}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{font-family:Poppins,sans-serif;border:1px solid #dfe0e3;border-radius:4px!important;margin:8px 0;box-shadow:0 4px 8px 1px #00000040;background-color:#fff;overflow:hidden;padding:8px 0}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.textView{width:auto!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px;background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f5f5f5}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#eaeaff;color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:400!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div.dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]{font-size:14px;line-height:22px;color:#aeabac;cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:not(:first-of-type){border-top:1px solid #dfe0e3}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:hover{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper{color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:-moz-fit-content;max-width:fit-content;word-break:break-word;white-space:normal;color:#6d6e6f;font-weight:400;font-size:12px;line-height:20px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#6d6e6f}::ng-deep .ng-dropdown-panel--with-search .ng-dropdown-header{border-bottom:none}.custom-backdrop{position:fixed;inset:0;overflow:hidden;pointer-events:none}\n"] }]
1778
+ ], template: "<ng-select\n [(ngModel)]=\"selectedItem\"\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [multiple]=\"multiple\"\n [addTag]=\"addTag\"\n [appendTo]=\"appendTo\"\n [clearable]=\"clearable\"\n [searchable]=\"searchable\"\n [hideSelected]=\"hideSelected\"\n [placeholder]=\"placeholder\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText\"\n [readonly]=\"readonly\"\n [closeOnSelect]=\"closeOnSelect\"\n [disabled]=\"disabled\"\n [labelForId]=\"id\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [keyDownFn]=\"keyDownFn\"\n [searchFn]=\"searchFn\"\n [isOpen]=\"(type !== 'search-input' || !!selectComponent.searchTerm?.length) && isOpen\"\n [groupBy]=\"groupBy\"\n [attr.autofocus]=\"autofocus\"\n [selectOnTab]=\"selectOnTabKeyPress\"\n [virtualScroll]=\"virtualScroll\"\n [typeahead]=\"typeahead\"\n (search)=\"search.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit($event)\"\n (keydown.tab)=\"onTabKeypress($event)\"\n [compareWith]=\"compareWith\"\n (change)=\"onValueSelected(selectedItem)\"\n (open)=\"open.emit($event); onDropdownOpen()\"\n (close)=\"onClose($event)\"\n class=\"dr-select\"\n [class.ng-select--no-value-padding]=\"noValuePadding\"\n [class.ng-select--multiple-height-increased]=\"multipleHeightIncreased\"\n #selectComponent>\n <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n </ng-template>\n <ng-template\n ng-header-tmp\n *ngIf=\"!optionHeaderTemplate && isDisplayingSearchInHeader && items?.length >= minItemsToDisplaySearchInHeader\"\n let-item=\"item\">\n <dr-input\n class=\"dr-select__search\"\n [ngModel]=\"selectComponent.searchTerm\"\n (ngModelChange)=\"selectComponent.itemsList.filter($event + '')\"\n type=\"search\">\n </dr-input>\n </ng-template>\n <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"multiLabelTemplate\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-container [ngTemplateOutlet]=\"multiLabelTemplate\" [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ item: item, item$: item$ }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"optionWithDescription\" ng-option-tmp let-item=\"item\">\n <div class=\"dr-select__option-with-desc__wrapper\">\n <div>{{ item.name }}</div>\n <div class=\"dr-select__option-with-desc__description\">{{ item?.description }}</div>\n </div>\n </ng-template>\n <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n <ng-container\n [ngTemplateOutlet]=\"optionFooterTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, close: selectComponent.close.bind(selectComponent) }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"groupBy\" ng-optgroup-tmp let-item=\"item\">\n {{ item[groupBy] }}\n </ng-template>\n <ng-template ng-loadingspinner-tmp>\n <div\n *ngIf=\"loading\"\n class=\"dr-select__loading\"\n [drSpinner]=\"loading\"\n [drSpinnerType]=\"'circle'\"\n [drSpinnerSize]=\"'small'\"\n [drSpinnerNoOverlay]=\"true\"></div>\n </ng-template>\n</ng-select>\n<i *ngIf=\"type === 'search-input'\" class=\"search-icon dr-icon-search\"></i>\n", styles: [":host{width:100%;height:32px;font-family:Poppins,sans-serif}:host.textView::ng-deep{width:auto}:host.textView::ng-deep ng-select.ng-select .ng-select-container{border:none!important;cursor:pointer}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0;color:#4646ce}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container:hover{text-decoration-line:underline}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#fff!important;border:none!important;cursor:default}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-value-container:hover{text-decoration-line:none}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9ea1aa;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{font-size:14px;line-height:24px;font-weight:400;top:0!important;padding:0 50px 0 8px!important;color:#333}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:12px;line-height:16px;font-weight:400;color:#333;height:24px;padding:2px 16px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea75\";font-size:20px;color:#333}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#f0f1f4!important;border:1px solid #aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow:before{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#bf1d30}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container{max-height:88px}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container .ng-value-container{max-height:88px}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value{padding:0}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value .ng-select-user-label,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-select-user-label{height:100%}:host.ng-invalid.ng-touched::ng-deep ng-select.ng-select .ng-select-container{border-color:#bf1d30}:host .dr-select__loading{position:relative;height:32px;width:24px}:host.search-input{position:relative}:host.search-input .search-icon{position:absolute;top:4px;right:16px;color:#6d6e6f;z-index:1001}:host.search-input::ng-deep ng-select.ng-select .ng-select-container{border-radius:16px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none!important}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper{display:flex;justify-content:center;align-items:center;right:40px;top:1px;width:24px;height:24px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper .ng-clear{font-size:24px;font-weight:300;color:#6d6e6f}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 16px!important;width:calc(100% - 63px)}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container input{height:100%}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{font-family:Poppins,sans-serif;border:1px solid #dfe0e3;border-radius:4px!important;margin:8px 0;box-shadow:0 4px 8px 1px #00000040;background-color:#fff;overflow:hidden;padding:8px 0}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.textView{width:auto!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px;background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f5f5f5}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#eaeaff;color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:400!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div.dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]{font-size:14px;line-height:22px;color:#aeabac;cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:not(:first-of-type){border-top:1px solid #dfe0e3}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:hover{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper{color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:-moz-fit-content;max-width:fit-content;word-break:break-word;white-space:normal;color:#6d6e6f;font-weight:400;font-size:12px;line-height:20px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#6d6e6f}::ng-deep .ng-dropdown-panel--with-search .ng-dropdown-header{border-bottom:none}.custom-backdrop{position:fixed;inset:0;overflow:hidden;pointer-events:none}\n"] }]
1778
1779
  }], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, { type: [{
1779
1780
  type: Input
1780
1781
  }, {
@@ -1796,6 +1797,8 @@ class DrSelectComponent {
1796
1797
  type: Input
1797
1798
  }], clearable: [{
1798
1799
  type: Input
1800
+ }], compareWith: [{
1801
+ type: Input
1799
1802
  }], searchable: [{
1800
1803
  type: Input
1801
1804
  }], isDisplayingSearchInHeader: [{
@@ -1959,13 +1962,13 @@ function DrDatePickerCustomHeaderComponent_div_11_div_2_Template(rf, ctx) { if (
1959
1962
  const quarter_r12 = ctx.$implicit;
1960
1963
  const ctx_r11 = i0.ɵɵnextContext(2);
1961
1964
  i0.ɵɵclassMap(quarter_r12 === ctx_r11.selectedQuarter ? "selected" : "");
1962
- i0.ɵɵclassProp("quarter-selector--disabled", ctx_r11.isQuarterDisabled(quarter_r12));
1965
+ i0.ɵɵclassProp("quarter-selector--disabled", ctx_r11.isQuarterDisabled(quarter_r12))("quarter-selector--select-current-quarter", ctx_r11.datePickerService.selectCurrentQuarter);
1963
1966
  i0.ɵɵadvance(1);
1964
1967
  i0.ɵɵtextInterpolate1(" Q", quarter_r12, " ");
1965
1968
  } }
1966
1969
  function DrDatePickerCustomHeaderComponent_div_11_Template(rf, ctx) { if (rf & 1) {
1967
1970
  i0.ɵɵelementStart(0, "div", 16, 17);
1968
- i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_11_div_2_Template, 2, 5, "div", 18);
1971
+ i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_11_div_2_Template, 2, 7, "div", 18);
1969
1972
  i0.ɵɵelementEnd();
1970
1973
  } if (rf & 2) {
1971
1974
  const ctx_r1 = i0.ɵɵnextContext();
@@ -2048,7 +2051,10 @@ class DrDatePickerCustomHeaderComponent {
2048
2051
  _calendar.currentView = this.selectedTimeframe;
2049
2052
  this.setPeriodLabels();
2050
2053
  if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
2051
- this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
2054
+ const date = this.datePickerService.selectCurrentQuarter
2055
+ ? this._calendar.selected ?? this._calendar.activeDate
2056
+ : this._calendar.activeDate;
2057
+ this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(date);
2052
2058
  }
2053
2059
  });
2054
2060
  this.listenToCalendarViewChanges();
@@ -2103,7 +2109,10 @@ class DrDatePickerCustomHeaderComponent {
2103
2109
  const chosenTimeframeOption = this.timeframeOptions.filter((option) => option.value === this.selectedTimeframe)[0];
2104
2110
  this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
2105
2111
  if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
2106
- this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
2112
+ const date = this.datePickerService.selectCurrentQuarter
2113
+ ? this._calendar.selected ?? this._calendar.activeDate
2114
+ : this._calendar.activeDate;
2115
+ this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(date);
2107
2116
  }
2108
2117
  }
2109
2118
  get currentViewIsQuarter() {
@@ -2185,7 +2194,7 @@ class DrDatePickerCustomHeaderComponent {
2185
2194
  calendar.insertBefore(selector.location.nativeElement, calendar.firstChild);
2186
2195
  }
2187
2196
  /** @nocollapse */ static { this.ɵfac = function DrDatePickerCustomHeaderComponent_Factory(t) { return new (t || DrDatePickerCustomHeaderComponent)(i0.ɵɵdirectiveInject(i6.MatCalendar), i0.ɵɵdirectiveInject(i1$4.DateAdapter), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
2188
- /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerCustomHeaderComponent, selectors: [["dr-date-picker_custom-header", 8, "component"]], attrs: _c0$J, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrDatePickerCustomHeaderComponent_Template(rf, ctx) { if (rf & 1) {
2197
+ /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerCustomHeaderComponent, selectors: [["dr-date-picker_custom-header", 8, "component"]], attrs: _c0$J, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "quarter-selector--select-current-quarter", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrDatePickerCustomHeaderComponent_Template(rf, ctx) { if (rf & 1) {
2189
2198
  i0.ɵɵtemplate(0, DrDatePickerCustomHeaderComponent_div_0_Template, 3, 2, "div", 0);
2190
2199
  i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
2191
2200
  i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_Template_div_click_2_listener() { return ctx.pagingClicked(false); });
@@ -2212,11 +2221,11 @@ class DrDatePickerCustomHeaderComponent {
2212
2221
  i0.ɵɵtextInterpolate(ctx.periodYearLabel);
2213
2222
  i0.ɵɵadvance(3);
2214
2223
  i0.ɵɵproperty("ngIf", ctx.currentViewIsQuarter);
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 }); }
2224
+ } }, 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}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector--select-current-quarter.quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:#673ab7;opacity:.4;color:#f2f2fb;font-weight:400}"], changeDetection: 0 }); }
2216
2225
  }
2217
2226
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerCustomHeaderComponent, [{
2218
2227
  type: Component,
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"] }]
2228
+ 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\n 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 [class.quarter-selector--select-current-quarter]=\"datePickerService.selectCurrentQuarter\">\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}.dr-quarterly-datepicker .quarter-selector--select-current-quarter.quarter-selector--disabled.selected{pointer-events:none;background-color:#673ab7;opacity:.4;color:#f2f2fb;font-weight:400}\n"] }]
2220
2229
  }], function () { return [{ type: i6.MatCalendar }, { type: i1$4.DateAdapter }, { type: CustomDateFormat, decorators: [{
2221
2230
  type: Inject,
2222
2231
  args: [MAT_DATE_FORMATS]
@@ -2525,8 +2534,7 @@ class DrDatePickerComponent {
2525
2534
  this.placeholder = 'Select...';
2526
2535
  this.fiscalYearMonthsModifier = 0;
2527
2536
  this.fiscalYearBack = false;
2528
- // TODO: Added as temp solution instead of FF, will remove once stable - https://datarailsteam.atlassian.net/browse/DR-35394
2529
- this.fixForNormalizedValueWithMaxDate = false;
2537
+ this.selectCurrentQuarter = false;
2530
2538
  this.destroyed$ = new Subject();
2531
2539
  this.calendarViewsTimeframeMapping = {
2532
2540
  year: 'multi-year',
@@ -2585,6 +2593,7 @@ class DrDatePickerComponent {
2585
2593
  this.datePickerService.fiscalYearMonthsModifier = this.fiscalYearMonthsModifier;
2586
2594
  this.datePickerService.fiscalYearBack = this.fiscalYearBack;
2587
2595
  this.datePickerService.datepickerFilter = this.dateFilter;
2596
+ this.datePickerService.selectCurrentQuarter = this.selectCurrentQuarter;
2588
2597
  }
2589
2598
  ngOnDestroy() {
2590
2599
  this.destroyed$.next();
@@ -2600,6 +2609,9 @@ class DrDatePickerComponent {
2600
2609
  if (changes.fiscalYearBack) {
2601
2610
  this.datePickerService.fiscalYearBack = this.fiscalYearBack;
2602
2611
  }
2612
+ if (changes.selectCurrentQuarter) {
2613
+ this.datePickerService.selectCurrentQuarter = this.selectCurrentQuarter;
2614
+ }
2603
2615
  }
2604
2616
  /**
2605
2617
  * Updating component inner value according to datepicker timeframe (day, month etc.)
@@ -2607,7 +2619,7 @@ class DrDatePickerComponent {
2607
2619
  */
2608
2620
  tryToNormalizeTimeframe() {
2609
2621
  const timeframe = this.datePickerService.timeframe;
2610
- let normalizedValue = this.innerValue.clone();
2622
+ const normalizedValue = this.innerValue.clone();
2611
2623
  const unit = timeframe === TimeframeOption.WEEK ? 'isoWeek' : timeframe;
2612
2624
  switch (this.periodPosition) {
2613
2625
  case DatePickerPeriodPosition.START_OF_PERIOD:
@@ -2655,10 +2667,6 @@ class DrDatePickerComponent {
2655
2667
  normalizedValue.startOf(unit).set('hours', 12);
2656
2668
  break;
2657
2669
  }
2658
- if (this.fixForNormalizedValueWithMaxDate) {
2659
- const minUnix = Math.min(normalizedValue.unix(), this._max.unix());
2660
- normalizedValue = moment__default.unix(minUnix).utc();
2661
- }
2662
2670
  this.datePickerService.innerValue = normalizedValue;
2663
2671
  }
2664
2672
  chosenPeriodHandler(chosenDate, timeframe, picker) {
@@ -2776,7 +2784,7 @@ class DrDatePickerComponent {
2776
2784
  } }, hostVars: 7, hostBindings: function DrDatePickerComponent_HostBindings(rf, ctx) { if (rf & 2) {
2777
2785
  i0.ɵɵattribute("id", ctx.hostId);
2778
2786
  i0.ɵɵclassProp("use-button-picker", ctx.useButton)("disabled", ctx.disabled)("active", ctx.active);
2779
- } }, inputs: { id: "id", useButton: "useButton", buttonLabel: "buttonLabel", iconAfterButton: "iconAfterButton", useDarkTheme: "useDarkTheme", format: "format", min: "min", max: "max", startAt: "startAt", periodPosition: "periodPosition", placeholder: "placeholder", disabled: "disabled", fiscalYearMonthsModifier: "fiscalYearMonthsModifier", fiscalYearBack: "fiscalYearBack", datepickerFilter: "datepickerFilter", fixForNormalizedValueWithMaxDate: "fixForNormalizedValueWithMaxDate" }, features: [i0.ɵɵProvidersFeature([
2787
+ } }, inputs: { id: "id", useButton: "useButton", buttonLabel: "buttonLabel", iconAfterButton: "iconAfterButton", useDarkTheme: "useDarkTheme", format: "format", min: "min", max: "max", startAt: "startAt", periodPosition: "periodPosition", placeholder: "placeholder", disabled: "disabled", fiscalYearMonthsModifier: "fiscalYearMonthsModifier", fiscalYearBack: "fiscalYearBack", datepickerFilter: "datepickerFilter", selectCurrentQuarter: "selectCurrentQuarter" }, features: [i0.ɵɵProvidersFeature([
2780
2788
  { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
2781
2789
  { provide: DateAdapter, useClass: CustomDateAdapter },
2782
2790
  { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: WeekSelectionStrategy },
@@ -2842,7 +2850,7 @@ class DrDatePickerComponent {
2842
2850
  type: Input
2843
2851
  }], datepickerFilter: [{
2844
2852
  type: Input
2845
- }], fixForNormalizedValueWithMaxDate: [{
2853
+ }], selectCurrentQuarter: [{
2846
2854
  type: Input
2847
2855
  }], datePicker: [{
2848
2856
  type: ViewChild,
@@ -5039,13 +5047,13 @@ function DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template(rf, ctx) { i
5039
5047
  const quarter_r12 = ctx.$implicit;
5040
5048
  const ctx_r11 = i0.ɵɵnextContext(2);
5041
5049
  i0.ɵɵclassMap(quarter_r12 === ctx_r11.selectedQuarter ? "selected" : "");
5042
- i0.ɵɵclassProp("quarter-selector--disabled", ctx_r11.isQuarterDisabled(quarter_r12));
5050
+ i0.ɵɵclassProp("quarter-selector--disabled", ctx_r11.isQuarterDisabled(quarter_r12))("quarter-selector--select-current-quarter", ctx_r11.datePickerService.selectCurrentQuarter);
5043
5051
  i0.ɵɵadvance(1);
5044
5052
  i0.ɵɵtextInterpolate1(" Q", quarter_r12, " ");
5045
5053
  } }
5046
5054
  function DrFiscalMonthCalendarHeaderComponent_div_11_Template(rf, ctx) { if (rf & 1) {
5047
5055
  i0.ɵɵelementStart(0, "div", 16, 17);
5048
- i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template, 2, 5, "div", 18);
5056
+ i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template, 2, 7, "div", 18);
5049
5057
  i0.ɵɵelementEnd();
5050
5058
  } if (rf & 2) {
5051
5059
  const ctx_r1 = i0.ɵɵnextContext();
@@ -5083,7 +5091,7 @@ class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderCompo
5083
5091
  });
5084
5092
  }
5085
5093
  /** @nocollapse */ static { this.ɵfac = /** @pureOrBreakMyCode */ function () { let ɵDrFiscalMonthCalendarHeaderComponent_BaseFactory; return function DrFiscalMonthCalendarHeaderComponent_Factory(t) { return (ɵDrFiscalMonthCalendarHeaderComponent_BaseFactory || (ɵDrFiscalMonthCalendarHeaderComponent_BaseFactory = i0.ɵɵgetInheritedFactory(DrFiscalMonthCalendarHeaderComponent)))(t || DrFiscalMonthCalendarHeaderComponent); }; }(); }
5086
- /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrFiscalMonthCalendarHeaderComponent, selectors: [["dr-fiscal-month-calendar-header", 8, "component"]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$B, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrFiscalMonthCalendarHeaderComponent_Template(rf, ctx) { if (rf & 1) {
5094
+ /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrFiscalMonthCalendarHeaderComponent, selectors: [["dr-fiscal-month-calendar-header", 8, "component"]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$B, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "quarter-selector--select-current-quarter", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrFiscalMonthCalendarHeaderComponent_Template(rf, ctx) { if (rf & 1) {
5087
5095
  i0.ɵɵtemplate(0, DrFiscalMonthCalendarHeaderComponent_div_0_Template, 3, 2, "div", 0);
5088
5096
  i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
5089
5097
  i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_Template_div_click_2_listener() { return ctx.pagingClicked(false); });
@@ -5110,11 +5118,11 @@ class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderCompo
5110
5118
  i0.ɵɵtextInterpolate(ctx.periodYearLabel);
5111
5119
  i0.ɵɵadvance(3);
5112
5120
  i0.ɵɵproperty("ngIf", ctx.currentViewIsQuarter);
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 }); }
5121
+ } }, 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}.dr-quarterly-datepicker[_ngcontent-%COMP%] .quarter-selector--select-current-quarter.quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:#673ab7;opacity:.4;color:#f2f2fb;font-weight:400}"], changeDetection: 0 }); }
5114
5122
  }
5115
5123
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrFiscalMonthCalendarHeaderComponent, [{
5116
5124
  type: Component,
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"] }]
5125
+ 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\n 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 [class.quarter-selector--select-current-quarter]=\"datePickerService.selectCurrentQuarter\">\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}.dr-quarterly-datepicker .quarter-selector--select-current-quarter.quarter-selector--disabled.selected{pointer-events:none;background-color:#673ab7;opacity:.4;color:#f2f2fb;font-weight:400}\n"] }]
5118
5126
  }], null, null); })();
5119
5127
 
5120
5128
  function DrFiscalMonthCalendarPickerComponent_i_0_Template(rf, ctx) { if (rf & 1) {