@datarailsshared/datarailsshared 1.5.285 → 1.5.287

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -873,7 +873,7 @@ class DrSelectComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DrSelectComponent,
                 multi: true
-            }], queries: [{ propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "optionHeaderTemplate", first: true, predicate: ["optionHeaderTemplate"], descendants: true }, { propertyName: "optionFooterTemplate", first: true, predicate: ["optionFooterTemplate"], descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true, read: NgSelectComponent }], ngImport: i0, template: "<ng-select [(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           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\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 *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=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}: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{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}: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:\"\\ea13\";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{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;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{line-height:20px;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:\"\\ea53\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: DrSpinnerDirective, selector: "[drSpinner]", inputs: ["drSpinner", "drSpinnerSize", "drSpinnerType", "drSpinnerNoOverlay"] }] }); }
+            }], queries: [{ propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "optionHeaderTemplate", first: true, predicate: ["optionHeaderTemplate"], descendants: true }, { propertyName: "optionFooterTemplate", first: true, predicate: ["optionFooterTemplate"], descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true, read: NgSelectComponent }], ngImport: i0, template: "<ng-select [(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           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\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 *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=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}: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{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}: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:\"\\ea13\";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{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;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{line-height:20px;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:\"\\ea55\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: DrSpinnerDirective, selector: "[drSpinner]", inputs: ["drSpinner", "drSpinnerSize", "drSpinnerType", "drSpinnerNoOverlay"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrSelectComponent, decorators: [{
             type: Component,
@@ -881,7 +881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: DrSelectComponent,
                             multi: true
-                        }], template: "<ng-select [(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           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\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 *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=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}: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{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}: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:\"\\ea13\";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{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;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{line-height:20px;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:\"\\ea53\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"] }]
+                        }], template: "<ng-select [(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           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\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 *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=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}: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{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}: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:\"\\ea13\";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{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;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{line-height:20px;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:\"\\ea55\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { className: [{
                 type: Input
             }], items: [{
@@ -1037,7 +1037,8 @@ class DrDatePickerCustomHeaderComponent {
         this.calendarView = CalendarView;
         _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
         this.datePickerService.format$.pipe(takeUntil(this._destroyed)).subscribe(value => {
-            this.selectedTimeframe = this.timeframeOptions.filter(option => option.format === value)[0].value;
+            const timeframe = this.datePickerService.getTimeframe(value);
+            this.selectedTimeframe = this.timeframeOptions.filter(option => option.timeframe === timeframe)[0].value;
             _calendar.currentView = this.selectedTimeframe;
             this.setPeriodLabels();
             if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
@@ -1259,7 +1260,17 @@ class DrDatePickerComponent {
     }
     ngOnChanges(changes) {
         if (changes.format?.currentValue && changes.format.currentValue !== changes.format.previousValue) {
-            this.datePickerService.updateTimeframeAndFormat(changes.format.currentValue);
+            let timeframe;
+            let format = this.datePickerService.getConfiguredFormat(this.format);
+            if (format) {
+                timeframe = this.format;
+            }
+            else {
+                format = this.datePickerService.normalizeValue(this.format);
+                timeframe = this.datePickerService.getTimeframe(format);
+            }
+            this.datePickerService.timeframe = timeframe;
+            this.datePickerService.format$.next(format);
         }
     }
     /**
@@ -2417,11 +2428,11 @@ class DrButtonComponent {
         this.isActive = false;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrButtonComponent, selector: "dr-button", inputs: { theme: "theme", icon: "icon", iconColor: "iconColor", iconSize: "iconSize", iconAfter: "iconAfter", iconAfterColor: "iconAfterColor", iconAfterSize: "iconAfterSize", disabled: "disabled", isLoading: "isLoading", isActive: "isActive" }, host: { properties: { "class": "this.theme", "class.with-icon": "this.icon", "class.with-icon-after": "this.iconAfter", "class.disabled": "this.disabled", "class.loading": "this.isLoading", "class.active": "this.isActive" } }, ngImport: i0, template: "<button [disabled]=\"disabled\">\n    <i *ngIf=\"icon\"\n       class=\"dr-button__icon\"\n       [class]=\"icon\"\n       [style.font-size]=\"iconSize\"\n       [style.color]=\"iconColor || 'inherit'\">\n    </i>\n    <ng-content></ng-content>\n    <div *ngIf=\"isLoading\"\n         class=\"dr-button__spinner\">\n        <i [style.font-size]=\"iconSize\" class=\"dr-icon-load\"></i>\n    </div>\n    <i *ngIf=\"iconAfter\"\n       class=\"dr-button__icon dr-button__icon--after\"\n       [class]=\"iconAfter\"\n       [style.font-size]=\"iconAfterSize\"\n       [style.color]=\"iconAfterColor || 'inherit'\">\n    </i>\n</button>\n", styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button{position:relative;display:flex;align-items:center;flex-wrap:nowrap;cursor:pointer;font-family:Poppins,sans-serif;font-weight:400;font-size:14px;font-style:normal;line-height:22px;border-radius:16px;padding:4px 16px;height:32px;border:1px solid}:host button .dr-button__spinner{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:inherit;border-radius:inherit}:host button .dr-button__spinner i{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}:host.with-icon button{padding-left:8px}:host.with-icon button i:first-child{margin-right:4px}:host.with-icon-after button{padding-right:8px}:host.with-icon-after button i:last-child{margin-left:4px}:host.split-primary-first button,:host.split-secondary-first button{border-bottom-right-radius:0;border-top-right-radius:0;padding-right:8px}:host.help button{padding:4px 16px 4px 8px;color:#333;height:28px;border:none;min-width:84px}:host.help button i{min-width:4px}:host.split-primary-last button,:host.split-secondary-last button{border-bottom-left-radius:0;border-top-left-radius:0;padding-right:8px;padding-left:4px;border-left:none}:host.split-primary-last button i,:host.split-secondary-last button i{margin:0!important}:host.primary button,:host.split-primary-first button,:host.split-primary-last button{color:#fff;background:#4646ce;border-color:#4646ce}:host.primary button:hover,:host.split-primary-first button:hover,:host.split-primary-last button:hover{background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.primary.active button,:host.primary button:active,:host.split-primary-first.active button,:host.split-primary-first button:active,:host.split-primary-last.active button,:host.split-primary-last button:active{background:#25258c;border-color:#25258c}:host.primary.disabled button,:host.split-primary-first.disabled button,:host.split-primary-last.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.split-primary-first button{border-right-color:#dfe0e3}:host.split-primary-first.disabled button{border-right-color:#aeabac}:host.secondary button,:host.split-secondary-first button,:host.split-secondary-last button{color:#4646ce;background:#fff;border-color:#4646ce}:host.secondary button:hover,:host.split-secondary-first button:hover,:host.split-secondary-last button:hover{background:#f5f5f5;box-shadow:0 4px 14px #0000001a}:host.secondary.active button,:host.secondary button:active,:host.split-secondary-first.active button,:host.split-secondary-first button:active,:host.split-secondary-last.active button,:host.split-secondary-last button:active{background:#eaeaff;box-shadow:none}:host.secondary.disabled button,:host.split-secondary-first.disabled button,:host.split-secondary-last.disabled button{color:#aeabac;border-color:#aeabac}:host.split-secondary-first button{border-right-color:#4646ce}:host.split-secondary-first.disabled button{border-right-color:#aeabac}:host.icon button,:host.icon-primary button,:host.icon-secondary button{width:28px;height:28px;padding:0;justify-content:center}:host.icon button i,:host.icon-primary button i,:host.icon-secondary button i{margin:0!important}:host.icon button{background:transparent;border-color:transparent;color:#6d6e6f}:host.icon button:hover{color:#333;background:#dfe0e3;border-color:#dfe0e3}:host.icon.active button,:host.icon button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.icon.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.icon-primary button{color:#fff;background:#4646ce;border-color:#4646ce}:host.icon-primary button:hover{color:#fff;background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.icon-primary.active button,:host.icon-primary button:active{color:#fff;background:#25258c;border-color:#25258c}:host.icon-primary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.icon-secondary button{color:#4646ce;background:#fff;border-color:#4646ce}:host.icon-secondary button:hover{color:#4646ce;background:#f5f5f5;border-color:#4646ce}:host.icon-secondary.active button,:host.icon-secondary button:active{color:#4646ce;background:#eaeaff;border-color:#4646ce}:host.icon-secondary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.ghost button{border-radius:4px;padding:4px;background:transparent;border-color:transparent;color:#6d6e6f}:host.ghost button .dr-button__spinner{color:#4646ce;background:#fff}:host.ghost button:hover{color:#333;background:#f5f5f5;border-color:#f5f5f5}:host.ghost.active button,:host.ghost button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.ghost.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.selection button{border-radius:6px;padding:4px 8px;background:#fff;border-color:#9ea1aa;color:#6d6e6f}:host.selection button:hover{color:#6d6e6f;background:#f5f5f5;border-color:#4e566c}:host.selection.active button,:host.selection button:active{color:#6d6e6f;background:#eaeaff;border-color:#4646ce}:host.selection.disabled button{color:#aeabac;background:#f0f1f4;border-color:#aeabac}:host.link button{border:none;background:none;color:#4646ce;padding:0 4px}:host.link button:hover,:host.link.active button,:host.link button:active{text-decoration:underline}:host.link.disabled button{color:#aeabac}:host.danger button{color:#fff;background:#bf1d30;border-color:#bf1d30}:host.danger button:hover{background:#981440;border-color:#981440}:host.danger.active button,:host.danger button:active{background:#680325;border-color:#680325}:host.danger.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrButtonComponent, selector: "dr-button", inputs: { theme: "theme", icon: "icon", iconColor: "iconColor", iconSize: "iconSize", iconAfter: "iconAfter", iconAfterColor: "iconAfterColor", iconAfterSize: "iconAfterSize", disabled: "disabled", isLoading: "isLoading", isActive: "isActive" }, host: { properties: { "class": "this.theme", "class.with-icon": "this.icon", "class.with-icon-after": "this.iconAfter", "class.disabled": "this.disabled", "class.loading": "this.isLoading", "class.active": "this.isActive" } }, ngImport: i0, template: "<button [disabled]=\"disabled\">\n    <i *ngIf=\"icon\"\n       class=\"dr-button__icon\"\n       [class]=\"icon\"\n       [style.font-size]=\"iconSize\"\n       [style.color]=\"iconColor || 'inherit'\">\n    </i>\n    <ng-content></ng-content>\n    <div *ngIf=\"isLoading\"\n         class=\"dr-button__spinner\">\n        <i [style.font-size]=\"iconSize\" class=\"dr-icon-load\"></i>\n    </div>\n    <i *ngIf=\"iconAfter\"\n       class=\"dr-button__icon dr-button__icon--after\"\n       [class]=\"iconAfter\"\n       [style.font-size]=\"iconAfterSize\"\n       [style.color]=\"iconAfterColor || 'inherit'\">\n    </i>\n</button>\n", styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button{position:relative;display:flex;align-items:center;flex-wrap:nowrap;cursor:pointer;font-family:Poppins,sans-serif;font-weight:400;font-size:14px;font-style:normal;line-height:22px;border-radius:16px;padding:4px 16px;height:32px;border:1px solid}:host button .dr-button__spinner{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:inherit;border-radius:inherit}:host button .dr-button__spinner i{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}:host.with-icon button{padding-left:8px}:host.with-icon button i:first-child{margin-right:4px}:host.with-icon-after button{padding-right:8px}:host.with-icon-after button i:last-child{margin-left:4px}:host.split-primary-first button,:host.split-secondary-first button{border-bottom-right-radius:0;border-top-right-radius:0;padding-right:8px}:host.help button{padding:4px 16px 4px 8px;color:#333;height:28px;border:none;min-width:84px}:host.help button i{min-width:4px}:host.split-primary-last button,:host.split-secondary-last button{border-bottom-left-radius:0;border-top-left-radius:0;padding-right:8px;padding-left:4px;border-left:none}:host.split-primary-last button i,:host.split-secondary-last button i{margin:0!important}:host.primary button,:host.split-primary-first button,:host.split-primary-last button{color:#fff;background:#4646ce;border-color:#4646ce}:host.primary button:hover,:host.split-primary-first button:hover,:host.split-primary-last button:hover{background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.primary.active button,:host.primary button:active,:host.split-primary-first.active button,:host.split-primary-first button:active,:host.split-primary-last.active button,:host.split-primary-last button:active{background:#25258c;border-color:#25258c}:host.primary.disabled button,:host.split-primary-first.disabled button,:host.split-primary-last.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.split-primary-first button{border-right-color:#dfe0e3}:host.split-primary-first.disabled button{border-right-color:#aeabac}:host.secondary button,:host.split-secondary-first button,:host.split-secondary-last button{color:#4646ce;background:#fff;border-color:#4646ce}:host.secondary button:hover,:host.split-secondary-first button:hover,:host.split-secondary-last button:hover{background:#f5f5f5;box-shadow:0 4px 14px #0000001a}:host.secondary.active button,:host.secondary button:active,:host.split-secondary-first.active button,:host.split-secondary-first button:active,:host.split-secondary-last.active button,:host.split-secondary-last button:active{background:#eaeaff;box-shadow:none}:host.secondary.disabled button,:host.split-secondary-first.disabled button,:host.split-secondary-last.disabled button{color:#aeabac;border-color:#aeabac}:host.split-secondary-first button{border-right-color:#4646ce}:host.split-secondary-first.disabled button{border-right-color:#aeabac}:host.icon button,:host.icon-primary button,:host.icon-secondary button{width:28px;height:28px;padding:0;justify-content:center}:host.icon button i,:host.icon-primary button i,:host.icon-secondary button i{margin:0!important}:host.icon button{background:transparent;border-color:transparent;color:#6d6e6f}:host.icon button:hover{color:#333;background:#dfe0e3;border-color:#dfe0e3}:host.icon.active button,:host.icon button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.icon.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.icon-primary button{color:#fff;background:#4646ce;border-color:#4646ce}:host.icon-primary button:hover{color:#fff;background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.icon-primary.active button,:host.icon-primary button:active{color:#fff;background:#25258c;border-color:#25258c}:host.icon-primary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.icon-secondary button{color:#4646ce;background:#fff;border-color:#4646ce}:host.icon-secondary button:hover{color:#4646ce;background:#f5f5f5;border-color:#4646ce}:host.icon-secondary.active button,:host.icon-secondary button:active{color:#4646ce;background:#eaeaff;border-color:#4646ce}:host.icon-secondary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.ghost button{border-radius:4px;padding:4px;background:transparent;border-color:transparent;color:#6d6e6f}:host.ghost button .dr-button__spinner{color:#4646ce;background:#fff}:host.ghost button:hover{color:#333;background:#f5f5f5;border-color:#f5f5f5}:host.ghost.active button,:host.ghost button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.ghost.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.selection button{border-radius:6px;padding:4px 8px;background:#fff;border-color:#9ea1aa;color:#6d6e6f}:host.selection button:hover{color:#6d6e6f;background:#f5f5f5;border-color:#4e566c}:host.selection.active button,:host.selection button:active{color:#6d6e6f;background:#eaeaff;border-color:#4646ce}:host.selection.disabled button{color:#aeabac;background:#f0f1f4;border-color:#aeabac}:host.highlight button{border:none;background:none;color:#4646ce;padding:0 4px}:host.highlight button:hover,:host.highlight.active button,:host.highlight button:active{text-decoration:underline}:host.highlight.disabled button{color:#aeabac}:host.danger button{color:#fff;background:#bf1d30;border-color:#bf1d30}:host.danger button:hover{background:#981440;border-color:#981440}:host.danger.active button,:host.danger button:active{background:#680325;border-color:#680325}:host.danger.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dr-button', template: "<button [disabled]=\"disabled\">\n    <i *ngIf=\"icon\"\n       class=\"dr-button__icon\"\n       [class]=\"icon\"\n       [style.font-size]=\"iconSize\"\n       [style.color]=\"iconColor || 'inherit'\">\n    </i>\n    <ng-content></ng-content>\n    <div *ngIf=\"isLoading\"\n         class=\"dr-button__spinner\">\n        <i [style.font-size]=\"iconSize\" class=\"dr-icon-load\"></i>\n    </div>\n    <i *ngIf=\"iconAfter\"\n       class=\"dr-button__icon dr-button__icon--after\"\n       [class]=\"iconAfter\"\n       [style.font-size]=\"iconAfterSize\"\n       [style.color]=\"iconAfterColor || 'inherit'\">\n    </i>\n</button>\n", styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button{position:relative;display:flex;align-items:center;flex-wrap:nowrap;cursor:pointer;font-family:Poppins,sans-serif;font-weight:400;font-size:14px;font-style:normal;line-height:22px;border-radius:16px;padding:4px 16px;height:32px;border:1px solid}:host button .dr-button__spinner{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:inherit;border-radius:inherit}:host button .dr-button__spinner i{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}:host.with-icon button{padding-left:8px}:host.with-icon button i:first-child{margin-right:4px}:host.with-icon-after button{padding-right:8px}:host.with-icon-after button i:last-child{margin-left:4px}:host.split-primary-first button,:host.split-secondary-first button{border-bottom-right-radius:0;border-top-right-radius:0;padding-right:8px}:host.help button{padding:4px 16px 4px 8px;color:#333;height:28px;border:none;min-width:84px}:host.help button i{min-width:4px}:host.split-primary-last button,:host.split-secondary-last button{border-bottom-left-radius:0;border-top-left-radius:0;padding-right:8px;padding-left:4px;border-left:none}:host.split-primary-last button i,:host.split-secondary-last button i{margin:0!important}:host.primary button,:host.split-primary-first button,:host.split-primary-last button{color:#fff;background:#4646ce;border-color:#4646ce}:host.primary button:hover,:host.split-primary-first button:hover,:host.split-primary-last button:hover{background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.primary.active button,:host.primary button:active,:host.split-primary-first.active button,:host.split-primary-first button:active,:host.split-primary-last.active button,:host.split-primary-last button:active{background:#25258c;border-color:#25258c}:host.primary.disabled button,:host.split-primary-first.disabled button,:host.split-primary-last.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.split-primary-first button{border-right-color:#dfe0e3}:host.split-primary-first.disabled button{border-right-color:#aeabac}:host.secondary button,:host.split-secondary-first button,:host.split-secondary-last button{color:#4646ce;background:#fff;border-color:#4646ce}:host.secondary button:hover,:host.split-secondary-first button:hover,:host.split-secondary-last button:hover{background:#f5f5f5;box-shadow:0 4px 14px #0000001a}:host.secondary.active button,:host.secondary button:active,:host.split-secondary-first.active button,:host.split-secondary-first button:active,:host.split-secondary-last.active button,:host.split-secondary-last button:active{background:#eaeaff;box-shadow:none}:host.secondary.disabled button,:host.split-secondary-first.disabled button,:host.split-secondary-last.disabled button{color:#aeabac;border-color:#aeabac}:host.split-secondary-first button{border-right-color:#4646ce}:host.split-secondary-first.disabled button{border-right-color:#aeabac}:host.icon button,:host.icon-primary button,:host.icon-secondary button{width:28px;height:28px;padding:0;justify-content:center}:host.icon button i,:host.icon-primary button i,:host.icon-secondary button i{margin:0!important}:host.icon button{background:transparent;border-color:transparent;color:#6d6e6f}:host.icon button:hover{color:#333;background:#dfe0e3;border-color:#dfe0e3}:host.icon.active button,:host.icon button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.icon.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.icon-primary button{color:#fff;background:#4646ce;border-color:#4646ce}:host.icon-primary button:hover{color:#fff;background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.icon-primary.active button,:host.icon-primary button:active{color:#fff;background:#25258c;border-color:#25258c}:host.icon-primary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.icon-secondary button{color:#4646ce;background:#fff;border-color:#4646ce}:host.icon-secondary button:hover{color:#4646ce;background:#f5f5f5;border-color:#4646ce}:host.icon-secondary.active button,:host.icon-secondary button:active{color:#4646ce;background:#eaeaff;border-color:#4646ce}:host.icon-secondary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.ghost button{border-radius:4px;padding:4px;background:transparent;border-color:transparent;color:#6d6e6f}:host.ghost button .dr-button__spinner{color:#4646ce;background:#fff}:host.ghost button:hover{color:#333;background:#f5f5f5;border-color:#f5f5f5}:host.ghost.active button,:host.ghost button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.ghost.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.selection button{border-radius:6px;padding:4px 8px;background:#fff;border-color:#9ea1aa;color:#6d6e6f}:host.selection button:hover{color:#6d6e6f;background:#f5f5f5;border-color:#4e566c}:host.selection.active button,:host.selection button:active{color:#6d6e6f;background:#eaeaff;border-color:#4646ce}:host.selection.disabled button{color:#aeabac;background:#f0f1f4;border-color:#aeabac}:host.link button{border:none;background:none;color:#4646ce;padding:0 4px}:host.link button:hover,:host.link.active button,:host.link button:active{text-decoration:underline}:host.link.disabled button{color:#aeabac}:host.danger button{color:#fff;background:#bf1d30;border-color:#bf1d30}:host.danger button:hover{background:#981440;border-color:#981440}:host.danger.active button,:host.danger button:active{background:#680325;border-color:#680325}:host.danger.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'dr-button', template: "<button [disabled]=\"disabled\">\n    <i *ngIf=\"icon\"\n       class=\"dr-button__icon\"\n       [class]=\"icon\"\n       [style.font-size]=\"iconSize\"\n       [style.color]=\"iconColor || 'inherit'\">\n    </i>\n    <ng-content></ng-content>\n    <div *ngIf=\"isLoading\"\n         class=\"dr-button__spinner\">\n        <i [style.font-size]=\"iconSize\" class=\"dr-icon-load\"></i>\n    </div>\n    <i *ngIf=\"iconAfter\"\n       class=\"dr-button__icon dr-button__icon--after\"\n       [class]=\"iconAfter\"\n       [style.font-size]=\"iconAfterSize\"\n       [style.color]=\"iconAfterColor || 'inherit'\">\n    </i>\n</button>\n", styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button{position:relative;display:flex;align-items:center;flex-wrap:nowrap;cursor:pointer;font-family:Poppins,sans-serif;font-weight:400;font-size:14px;font-style:normal;line-height:22px;border-radius:16px;padding:4px 16px;height:32px;border:1px solid}:host button .dr-button__spinner{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:inherit;border-radius:inherit}:host button .dr-button__spinner i{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}:host.with-icon button{padding-left:8px}:host.with-icon button i:first-child{margin-right:4px}:host.with-icon-after button{padding-right:8px}:host.with-icon-after button i:last-child{margin-left:4px}:host.split-primary-first button,:host.split-secondary-first button{border-bottom-right-radius:0;border-top-right-radius:0;padding-right:8px}:host.help button{padding:4px 16px 4px 8px;color:#333;height:28px;border:none;min-width:84px}:host.help button i{min-width:4px}:host.split-primary-last button,:host.split-secondary-last button{border-bottom-left-radius:0;border-top-left-radius:0;padding-right:8px;padding-left:4px;border-left:none}:host.split-primary-last button i,:host.split-secondary-last button i{margin:0!important}:host.primary button,:host.split-primary-first button,:host.split-primary-last button{color:#fff;background:#4646ce;border-color:#4646ce}:host.primary button:hover,:host.split-primary-first button:hover,:host.split-primary-last button:hover{background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.primary.active button,:host.primary button:active,:host.split-primary-first.active button,:host.split-primary-first button:active,:host.split-primary-last.active button,:host.split-primary-last button:active{background:#25258c;border-color:#25258c}:host.primary.disabled button,:host.split-primary-first.disabled button,:host.split-primary-last.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.split-primary-first button{border-right-color:#dfe0e3}:host.split-primary-first.disabled button{border-right-color:#aeabac}:host.secondary button,:host.split-secondary-first button,:host.split-secondary-last button{color:#4646ce;background:#fff;border-color:#4646ce}:host.secondary button:hover,:host.split-secondary-first button:hover,:host.split-secondary-last button:hover{background:#f5f5f5;box-shadow:0 4px 14px #0000001a}:host.secondary.active button,:host.secondary button:active,:host.split-secondary-first.active button,:host.split-secondary-first button:active,:host.split-secondary-last.active button,:host.split-secondary-last button:active{background:#eaeaff;box-shadow:none}:host.secondary.disabled button,:host.split-secondary-first.disabled button,:host.split-secondary-last.disabled button{color:#aeabac;border-color:#aeabac}:host.split-secondary-first button{border-right-color:#4646ce}:host.split-secondary-first.disabled button{border-right-color:#aeabac}:host.icon button,:host.icon-primary button,:host.icon-secondary button{width:28px;height:28px;padding:0;justify-content:center}:host.icon button i,:host.icon-primary button i,:host.icon-secondary button i{margin:0!important}:host.icon button{background:transparent;border-color:transparent;color:#6d6e6f}:host.icon button:hover{color:#333;background:#dfe0e3;border-color:#dfe0e3}:host.icon.active button,:host.icon button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.icon.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.icon-primary button{color:#fff;background:#4646ce;border-color:#4646ce}:host.icon-primary button:hover{color:#fff;background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.icon-primary.active button,:host.icon-primary button:active{color:#fff;background:#25258c;border-color:#25258c}:host.icon-primary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.icon-secondary button{color:#4646ce;background:#fff;border-color:#4646ce}:host.icon-secondary button:hover{color:#4646ce;background:#f5f5f5;border-color:#4646ce}:host.icon-secondary.active button,:host.icon-secondary button:active{color:#4646ce;background:#eaeaff;border-color:#4646ce}:host.icon-secondary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.ghost button{border-radius:4px;padding:4px;background:transparent;border-color:transparent;color:#6d6e6f}:host.ghost button .dr-button__spinner{color:#4646ce;background:#fff}:host.ghost button:hover{color:#333;background:#f5f5f5;border-color:#f5f5f5}:host.ghost.active button,:host.ghost button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.ghost.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.selection button{border-radius:6px;padding:4px 8px;background:#fff;border-color:#9ea1aa;color:#6d6e6f}:host.selection button:hover{color:#6d6e6f;background:#f5f5f5;border-color:#4e566c}:host.selection.active button,:host.selection button:active{color:#6d6e6f;background:#eaeaff;border-color:#4646ce}:host.selection.disabled button{color:#aeabac;background:#f0f1f4;border-color:#aeabac}:host.highlight button{border:none;background:none;color:#4646ce;padding:0 4px}:host.highlight button:hover,:host.highlight.active button,:host.highlight button:active{text-decoration:underline}:host.highlight.disabled button{color:#aeabac}:host.danger button{color:#fff;background:#bf1d30;border-color:#bf1d30}:host.danger button:hover{background:#981440;border-color:#981440}:host.danger.active button,:host.danger button:active{background:#680325;border-color:#680325}:host.danger.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { theme: [{
                 type: Input
             }, {
@@ -3134,6 +3145,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['checkboxContent']
             }] } });
 
+var LinkTheme;
+(function (LinkTheme) {
+    LinkTheme["DEFAULT"] = "DEFAULT";
+    LinkTheme["DEFAULT_UNDERLINE"] = "DEFAULT_UNDERLINE";
+})(LinkTheme || (LinkTheme = {}));
+const DEFAULT_LINK_FONT_SIZE = '14px';
+const DEFAULT_LINK_FONT_WEIGHT = 400;
+class DrLinkComponent {
+    constructor() {
+        this.fontSize = DEFAULT_LINK_FONT_SIZE;
+        this.fontWeight = DEFAULT_LINK_FONT_WEIGHT;
+        this.theme = LinkTheme.DEFAULT;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrLinkComponent, selector: "dr-link", inputs: { link: "link", fontSize: "fontSize", fontWeight: "fontWeight", theme: "theme" }, ngImport: i0, template: "<a class=\"dr-link\"\n   [class]=\"theme\"\n   [href]=\"link\"\n   [style.font-weight]=\"fontWeight\"\n   [style.font-size]=\"fontSize\">\n    <ng-content></ng-content>\n</a>\n", styles: [".dr-link{font-family:Poppins,sans-serif;font-style:normal;font-size:14px;font-weight:400;line-height:22px;color:#4646ce}.dr-link.DEFAULT{text-decoration:none!important}.dr-link.DEFAULT_UNDERLINE{text-decoration:underline!important}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dr-link', template: "<a class=\"dr-link\"\n   [class]=\"theme\"\n   [href]=\"link\"\n   [style.font-weight]=\"fontWeight\"\n   [style.font-size]=\"fontSize\">\n    <ng-content></ng-content>\n</a>\n", styles: [".dr-link{font-family:Poppins,sans-serif;font-style:normal;font-size:14px;font-weight:400;line-height:22px;color:#4646ce}.dr-link.DEFAULT{text-decoration:none!important}.dr-link.DEFAULT_UNDERLINE{text-decoration:underline!important}\n"] }]
+        }], propDecorators: { link: [{
+                type: Input,
+                args: [{ required: true }]
+            }], fontSize: [{
+                type: Input
+            }], fontWeight: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }] } });
+
 class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
     get isDashboardClassDisplayed() {
         return this.isDashboardDatepicker;
@@ -3225,6 +3266,11 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             });
         }
     }
+    ngOnChanges(changes) {
+        if (changes.format?.currentValue && changes.format.currentValue !== changes.format.previousValue) {
+            this.datePickerService.updateTimeframeAndFormat(changes.format.currentValue);
+        }
+    }
     pagingClicked(forward) {
         if (this.pagingSetup[this.datePickerService.timeframe]) {
             const nextValue = this.pagingSetup[this.datePickerService.timeframe](forward);
@@ -3276,7 +3322,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrDatePickerWithTimeframeComponent, selector: "dr-date-picker-with-timeframe", inputs: { isDashboardDatepicker: "isDashboardDatepicker", dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, host: { properties: { "class.dr-date-picker-on-dashboard": "this.isDashboardClassDisplayed" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
             { provide: DrDatePickerService }
-        ], usesInheritance: true, ngImport: i0, template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n                >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n                >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrDatePickerWithTimeframeComponent, decorators: [{
             type: Component,
@@ -8043,7 +8089,8 @@ const components$2 = [
     DrDatePickerRangeComponent,
     DrModelDebounceChangeDirective,
     DrShowTimeframePipe,
-    DrSelectAddItemComponent
+    DrSelectAddItemComponent,
+    DrLinkComponent
 ];
 class DrInputsModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -8062,7 +8109,8 @@ class DrInputsModule {
             DrDatePickerRangeComponent,
             DrModelDebounceChangeDirective,
             DrShowTimeframePipe,
-            DrSelectAddItemComponent], imports: [FormsModule,
+            DrSelectAddItemComponent,
+            DrLinkComponent], imports: [FormsModule,
             ReactiveFormsModule,
             CommonModule,
             NgSelectModule,
@@ -8084,7 +8132,8 @@ class DrInputsModule {
             DrDatePickerRangeComponent,
             DrModelDebounceChangeDirective,
             DrShowTimeframePipe,
-            DrSelectAddItemComponent] }); }
+            DrSelectAddItemComponent,
+            DrLinkComponent] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrInputsModule, imports: [FormsModule,
             ReactiveFormsModule,
             CommonModule,
@@ -8788,5 +8837,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CodeEditorHintWrapperComponent, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrCodeEditorComponent, DrCodeEditorModule, DrCodemirrorComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShowTimeframePipe, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, FeedbackSentiment, ForecastTagComponent, ICodeEditorHintIcon, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, StepperComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipDefaultComponent, TooltipInfoComponent, TooltipInfoSimpleComponent, TooltipNoBodyComponent, TooltipPosition, TooltipProcessDefaultComponent, TooltipTheme, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
+export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CodeEditorHintWrapperComponent, CustomDateFormat, DEFAULT_LINK_FONT_SIZE, DEFAULT_LINK_FONT_WEIGHT, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrCodeEditorComponent, DrCodeEditorModule, DrCodemirrorComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrLinkComponent, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShowTimeframePipe, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, FeedbackSentiment, ForecastTagComponent, ICodeEditorHintIcon, IMAGE_TYPES, LinkTheme, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, StepperComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipDefaultComponent, TooltipInfoComponent, TooltipInfoSimpleComponent, TooltipNoBodyComponent, TooltipPosition, TooltipProcessDefaultComponent, TooltipTheme, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
 //# sourceMappingURL=datarailsshared-datarailsshared.mjs.map