@datarailsshared/datarailsshared 1.5.222-rocket → 1.5.224

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -10,7 +10,7 @@ import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BehaviorSubject, Subject, noop as noop$1, from, merge as merge$1, fromEvent } from 'rxjs';
 import * as _ from 'lodash';
-import { find, reduce, isObject, isNil, map, isNumber, merge, forEach, some, orderBy, cloneDeep, filter as filter$1, indexOf, includes, pull, concat, isString, isBoolean } from 'lodash';
+import { find, reduce, isObject, isNil, map, isNumber, merge, forEach, some, orderBy, cloneDeep, filter as filter$1, includes, indexOf, pull, concat, isString, isBoolean } from 'lodash';
 import { skip, takeUntil, debounceTime, distinctUntilChanged, startWith, switchMap, filter, first, catchError } from 'rxjs/operators';
 import * as i1$3 from '@angular/material/datepicker';
 import { MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
@@ -739,7 +739,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           [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-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:\"\\ea12\";font-size:24px;color:#000}: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:#0c142b;font-size:14px;font-weight:400}: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:\"\\ea12\";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:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#e5e6ea;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 0 0 9px!important;color:#51566f;font-size:16px;font-weight:700}: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-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}::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}::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{background:#ffffff}::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:#0c142b;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 #bcbcbc}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option-disabled[role=group]:hover{background:#ffffff}::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:#4e566c;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:#0c142b}\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]" }] }); }
+            }], 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           [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-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{content:\"\\e959\";font-family:DataRails;font-size:24px;color:#000}: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:#0c142b;font-size:14px;font-weight:400}: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{content:\"\\e9b6\";font-family:DataRails;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:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#e5e6ea;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 0 0 9px!important;color:#51566f;font-size:16px;font-weight:700}: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-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}::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}::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{background:#ffffff}::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:#0c142b;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 #bcbcbc}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option-disabled[role=group]:hover{background:#ffffff}::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:#4e566c;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:#0c142b}\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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrSelectComponent, decorators: [{
             type: Component,
@@ -747,7 +747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                             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           [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-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:\"\\ea12\";font-size:24px;color:#000}: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:#0c142b;font-size:14px;font-weight:400}: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:\"\\ea12\";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:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#e5e6ea;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 0 0 9px!important;color:#51566f;font-size:16px;font-weight:700}: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-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}::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}::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{background:#ffffff}::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:#0c142b;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 #bcbcbc}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option-disabled[role=group]:hover{background:#ffffff}::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:#4e566c;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:#0c142b}\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           [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-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{content:\"\\e959\";font-family:DataRails;font-size:24px;color:#000}: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:#0c142b;font-size:14px;font-weight:400}: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{content:\"\\e9b6\";font-family:DataRails;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:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#e5e6ea;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 0 0 9px!important;color:#51566f;font-size:16px;font-weight:700}: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-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}::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}::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{background:#ffffff}::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:#0c142b;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 #bcbcbc}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option-disabled[role=group]:hover{background:#ffffff}::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:#4e566c;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:#0c142b}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { className: [{
                 type: Input
             }], items: [{
@@ -1239,14 +1239,14 @@ class DrDatePickerComponent {
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: DrDatePickerComponent, selector: "dr-date-picker", inputs: { format: "format", min: "min", max: "max", periodPosition: "periodPosition", placeholder: "placeholder", disabled: "disabled", fiscalYearMonthsModifier: "fiscalYearMonthsModifier", datepickerFilter: "datepickerFilter" }, host: { properties: { "class.disabled": "this.disabled" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
             DrDatePickerService
-        ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<i class=\"dr-icon-date\"></i>\n<input [(ngModel)]=\"value\"\n       (click)=\"datePicker.open()\"\n       [matDatepicker]=\"datePicker\"\n       [matDatepickerFilter]=\"dateFilter\"\n       [disabled]=\"disabled\"\n       [placeholder]=\"placeholder\"\n       [drDatePickerFormat]=\"datePickerService.format$ | async\"\n       [readonly]=\"readonly\"\n       [min]=\"_min\"\n       [max]=\"_max\"/>\n<mat-datepicker #datePicker\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\">\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:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{font-family:DataRails!important;content:\"\\ea12\";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:#999;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}::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 .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:#f3f7ff}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;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:#19181a}::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}\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: "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: "directive", type: DrDatePickerFormatDirective, selector: "[drDatePickerFormat]", inputs: ["configDateParse", "configDateDisplay", "drDatePickerFormat"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<i class=\"dr-icon-date\"></i>\n<input [(ngModel)]=\"value\"\n       (click)=\"datePicker.open()\"\n       [matDatepicker]=\"datePicker\"\n       [matDatepickerFilter]=\"dateFilter\"\n       [disabled]=\"disabled\"\n       [placeholder]=\"placeholder\"\n       [drDatePickerFormat]=\"datePickerService.format$ | async\"\n       [readonly]=\"readonly\"\n       [min]=\"_min\"\n       [max]=\"_max\"/>\n<mat-datepicker #datePicker\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\">\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:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\\e9b6\";font-family:DataRails;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:#999;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}::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 .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:#f3f7ff}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;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:#19181a}::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}\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: "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: "directive", type: DrDatePickerFormatDirective, selector: "[drDatePickerFormat]", inputs: ["configDateParse", "configDateDisplay", "drDatePickerFormat"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dr-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
                         DrDatePickerService
-                    ], template: "<i class=\"dr-icon-date\"></i>\n<input [(ngModel)]=\"value\"\n       (click)=\"datePicker.open()\"\n       [matDatepicker]=\"datePicker\"\n       [matDatepickerFilter]=\"dateFilter\"\n       [disabled]=\"disabled\"\n       [placeholder]=\"placeholder\"\n       [drDatePickerFormat]=\"datePickerService.format$ | async\"\n       [readonly]=\"readonly\"\n       [min]=\"_min\"\n       [max]=\"_max\"/>\n<mat-datepicker #datePicker\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\">\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:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{font-family:DataRails!important;content:\"\\ea12\";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:#999;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}::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 .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:#f3f7ff}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;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:#19181a}::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}\n"] }]
+                    ], template: "<i class=\"dr-icon-date\"></i>\n<input [(ngModel)]=\"value\"\n       (click)=\"datePicker.open()\"\n       [matDatepicker]=\"datePicker\"\n       [matDatepickerFilter]=\"dateFilter\"\n       [disabled]=\"disabled\"\n       [placeholder]=\"placeholder\"\n       [drDatePickerFormat]=\"datePickerService.format$ | async\"\n       [readonly]=\"readonly\"\n       [min]=\"_min\"\n       [max]=\"_max\"/>\n<mat-datepicker #datePicker\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\">\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:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\\e9b6\";font-family:DataRails;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:#999;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}::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 .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:#f3f7ff}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;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:#19181a}::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}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, propDecorators: { format: [{
                 type: Input
             }], min: [{
@@ -2951,7 +2951,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
     set dateFormatConfig(value) {
         if (value) {
             this.datePickerService.formatConfig = { ...this.datePickerService.formatConfig, ...value };
-            this.datePickerService.updateTimeframeAndFormat(this.datePickerService.format$.getValue());
+            // this.datePickerService.updateTimeframeAndFormat(this.datePickerService.format$.getValue());
             this.cdr.markForCheck();
         }
     }
@@ -3086,14 +3086,14 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{font-family:DataRails!important;content:\"\\ea12\";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:#999;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}::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 .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:#f3f7ff}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;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:#19181a}::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:inherit}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#6d6e6f;font-weight:400}: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"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\\e9b6\";font-family:DataRails;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:#999;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}::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 .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:#f3f7ff}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;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:#19181a}::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:inherit}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#6d6e6f;font-weight:400}: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"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrDatePickerWithTimeframeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dr-date-picker-with-timeframe', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
                         { provide: DrDatePickerService }
-                    ], 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:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{font-family:DataRails!important;content:\"\\ea12\";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:#999;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}::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 .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:#f3f7ff}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;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:#19181a}::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:inherit}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#6d6e6f;font-weight:400}: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"] }]
+                    ], 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:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\\e9b6\";font-family:DataRails;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:#999;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}::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 .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:#f3f7ff}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;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:#19181a}::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:inherit}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#6d6e6f;font-weight:400}: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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, propDecorators: { isDashboardClassDisplayed: [{
                 type: HostBinding,
                 args: ['class.dr-date-picker-on-dashboard']
@@ -4265,7 +4265,7 @@ function getScenarioTagDataConfig(isMultipleDimension) {
         [Scenario.BUDGET]: {
             [TagsConfigSubType.BUDGET_CYCLE]: {
                 toggle: true,
-                acceptableDateTags: [TagsConfigSubType.YEAR],
+                acceptableSubTags: [TagsConfigSubType.YEAR],
                 hidden: !isMultipleDimension,
             },
             [TagsConfigSubType.PLAN]: {
@@ -4337,7 +4337,7 @@ class ScenarioService {
             const tag = tagWithSubTags || this.prepareScenarioTag(scenarioTagsConfig, scenarioTag, scenario, isTagWithSubTags);
             if (isTagWithSubTags) {
                 this.updateScenarioSubTags(tag, scenarioTag);
-                tag.subTags = this.sortedScenarioSubTags(tag);
+                tag.subTags = ScenarioService.sortedSubTags(tag);
             }
             if (tagWithSubTags)
                 return;
@@ -4350,18 +4350,45 @@ class ScenarioService {
         if (isTagNotSupportingDates) {
             this.turnOffDateTag(scenarioTagsUi);
         }
-        const tagWithSpecificDateTags = find(scenarioTagsUi, (tag) => tag.toggle && !!tag.acceptableDateTags?.length);
+        const tagWithSpecificDateTags = find(scenarioTagsUi, (tag) => tag.toggle && !!tag.acceptableSubTags?.length);
         if (tagWithSpecificDateTags) {
             this.hideNotAvailableTags(tagWithSpecificDateTags, scenarioTagsUi);
         }
         return this.sortScenarioTags(scenarioTagsUi);
     }
+    tagNotSupportingDatesHandler(tag, tagNotSupportingDates, dateTag) {
+        if (!tagNotSupportingDates || !tag.toggle)
+            return;
+        if (tag.type === TagTypes.DATE) {
+            tagNotSupportingDates.toggle = false;
+        }
+        if (tag === tagNotSupportingDates) {
+            if (dateTag) {
+                dateTag.toggle = false;
+            }
+        }
+    }
+    tagAcceptableSubTagsHandler(tag, dateTag) {
+        if (!tag.acceptableSubTags?.length)
+            return;
+        if (!dateTag)
+            return;
+        dateTag.subTags = map(dateTag.subTags, (subTag) => {
+            subTag.hidden = tag.toggle && !includes(tag.acceptableSubTags, subTag.subType);
+            return subTag;
+        });
+        dateTag.selectedTagSubType = tag.acceptableSubTags[0];
+    }
     sortScenarioTags(scenarioTagsUi) {
         return orderBy(scenarioTagsUi, [
             (tag) => (tag.type === TagTypes.DATE ? 0 : 1),
             (tag) => (tag.name === 'File Status')
         ]);
     }
+    static sortedSubTags(tag) {
+        const SUB_TAGS_ORDER = [TagsConfigSubType.DAY, TagsConfigSubType.WEEK, TagsConfigSubType.MONTH, TagsConfigSubType.QUARTER, TagsConfigSubType.YEAR];
+        return orderBy(tag.subTags, (subTag) => indexOf(SUB_TAGS_ORDER, subTag.subType));
+    }
     initExistingTagsConfig(scenario, scenarioTagsUi) {
         forEach(this.currentTagsConfig, (tagConfig) => {
             const tagSubType = tagConfig?.options?.sub_type;
@@ -4372,8 +4399,10 @@ class ScenarioService {
             const scenarioTagUi = tagConfig.type === TagTypes.DATE
                 ? find(scenarioTagsUi, { type: tagConfig.type })
                 : find(scenarioTagsUi, { selectedTagSubType: tagSubType });
-            scenarioTagUi.toggle = true;
-            scenarioTagUi.selectedTagSubType = tagSubType;
+            if (scenarioTagUi) {
+                scenarioTagUi.toggle = true;
+                scenarioTagUi.selectedTagSubType = tagSubType;
+            }
         });
     }
     prepareScenarioTag(scenarioTagsConfig, scenarioTag, scenario, isDateTag) {
@@ -4393,15 +4422,11 @@ class ScenarioService {
         if (scenarioTag.scenarioData.turnOffDateTags) {
             tag.turnOffDateTags = scenarioTag.scenarioData.turnOffDateTags;
         }
-        if (scenarioTag.scenarioData.acceptableDateTags) {
-            tag.acceptableDateTags = scenarioTag.scenarioData.acceptableDateTags;
+        if (scenarioTag.scenarioData.acceptableSubTags) {
+            tag.acceptableSubTags = scenarioTag.scenarioData.acceptableSubTags;
         }
         return tag;
     }
-    sortedScenarioSubTags(tag) {
-        const SUB_TAGS_ORDER = [TagsConfigSubType.DAY, TagsConfigSubType.WEEK, TagsConfigSubType.MONTH, TagsConfigSubType.QUARTER, TagsConfigSubType.YEAR];
-        return orderBy(tag.subTags, (subTag) => indexOf(SUB_TAGS_ORDER, subTag.subType));
-    }
     updateScenarioSubTags(tag, scenarioTag) {
         if (!tag.subTags) {
             tag.subTags = [];
@@ -4423,14 +4448,14 @@ class ScenarioService {
         if (!subTags.length)
             return;
         forEach(scenarioTags, (tag) => {
-            if (!tag.acceptableDateTags?.length)
+            if (!tag.acceptableSubTags?.length)
                 return;
             if (tag !== tagWithSpecificDateTags) {
                 tag.toggle = false;
             }
         });
         forEach(subTags, (subTag) => {
-            subTag.hidden = !tagWithSpecificDateTags.acceptableDateTags.includes(subTag.subType);
+            subTag.hidden = !tagWithSpecificDateTags.acceptableSubTags.includes(subTag.subType);
         });
     }
     getScenarioSelectedDateTag(scenario, dateTags) {
@@ -4466,6 +4491,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             type: Injectable
         }] });
 
+class TagsConstructorService {
+    constructor() {
+        this.tagsNotSupportingDatesTag = [TagsConfigSubType.PLAN];
+        this.tagsAcceptableSubTags = {
+            [TagsConfigSubType.BUDGET_CYCLE]: [TagsConfigSubType.YEAR],
+        };
+    }
+    buildTags(tagsConfigToDisplay, selectedTagsConfig) {
+        return reduce(tagsConfigToDisplay, (acc, tagConfig) => {
+            const isTagWithSubTags = tagConfig.type === TagTypes.DATE;
+            const tagWithSubTags = isTagWithSubTags && find(acc, { type: tagConfig.type });
+            const tag = tagWithSubTags || this.prepareTag(tagConfig, selectedTagsConfig, isTagWithSubTags);
+            if (isTagWithSubTags) {
+                this.updateSubTags(tag, tagConfig, selectedTagsConfig);
+                tag.subTags = ScenarioService.sortedSubTags(tag);
+            }
+            if (tagWithSubTags)
+                return acc;
+            acc.push(tag);
+            return acc;
+        }, []);
+    }
+    updateSubTags(tag, tagConfig, selectedTagsConfig) {
+        const tagSubType = tagConfig.options.sub_type;
+        if (tagSubType === TagsConfigSubType.FORECAST_NEW)
+            return;
+        if (!tag.subTags) {
+            tag.subTags = [];
+        }
+        tag.name = 'Date';
+        const enabledTagSubType = find(selectedTagsConfig, (_tagConfig) => _tagConfig.options.sub_type === tagSubType)?.options?.sub_type;
+        tag.toggle = !!enabledTagSubType || tag.toggle;
+        if (tag.toggle && enabledTagSubType) {
+            tag.selectedTagSubType = tagSubType;
+        }
+        tag.subTags.push({
+            subType: tagSubType,
+            name: tagConfig.name,
+        });
+    }
+    prepareTag(tagConfig, selectedTagsConfig, isTagWithSubTags) {
+        const selectedTagSubType = isTagWithSubTags ? TagsConfigSubType.MONTH : tagConfig.options.sub_type;
+        const toggleStatus = some(selectedTagsConfig, (_tagConfig) => _tagConfig.options.sub_type === selectedTagSubType);
+        const tag = {
+            toggle: toggleStatus,
+            name: tagConfig.name,
+            description: tagConfig.description,
+            type: tagConfig.type,
+            selectedTagSubType,
+        };
+        if (this.tagsNotSupportingDatesTag.includes(selectedTagSubType)) {
+            tag.turnOffDateTags = true;
+        }
+        if (this.tagsAcceptableSubTags[selectedTagSubType]) {
+            tag.acceptableSubTags = this.tagsAcceptableSubTags[selectedTagSubType];
+        }
+        return tag;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TagsConstructorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TagsConstructorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TagsConstructorService, decorators: [{
+            type: Injectable
+        }] });
+
+class DrTagsConstructorComponent {
+    get currentTags() {
+        return this.scenarioTagsConfig || this.tagsUi;
+    }
+    get isScenarioFlow() {
+        return !!this.scenarioTagsConfig;
+    }
+    get tagsWithSubTags() {
+        return reduce(this.tagsUi, (acc, curr) => {
+            if (curr?.subTags?.length) {
+                acc.push(curr);
+            }
+            return acc;
+        }, []);
+    }
+    get tagsNotSupportingDateTag() {
+        return reduce(this.tagsUi, (acc, curr) => {
+            if (curr?.turnOffDateTags) {
+                acc.push(curr);
+            }
+            return acc;
+        }, []);
+    }
+    constructor(scenarioService, tagsConstructor) {
+        this.scenarioService = scenarioService;
+        this.tagsConstructor = tagsConstructor;
+        this.toggleButtonMode = ToggleButtonMode;
+        /*
+        * Used for display provided tagsConfig
+        * (for scenario flow, use this input to get tagsConfig data on stateChange emit)
+        * */
+        this.tagsConfigToDisplay = [];
+        /*
+        * Used for toggle on provided tagsConfig
+        * (not related to scenario flow)
+        * */
+        this.selectedTagsConfig = [];
+        this.tagChange = new EventEmitter();
+        this.tagToggle = new EventEmitter();
+        this.stateChange = new EventEmitter();
+        this.tagsUi = [];
+    }
+    ngOnInit() {
+        if (!this.isScenarioFlow) {
+            this.buildTags();
+        }
+    }
+    onSubTagChange(tag) {
+        this.onStateChange();
+        const tagToEmit = this.isScenarioFlow ? tag : this.getTagsConfig([tag])?.[0];
+        this.tagChange.emit(tagToEmit);
+    }
+    onTagToggle(tag) {
+        if (!this.isScenarioFlow) {
+            this.updateTagsState(tag);
+        }
+        this.onStateChange();
+        const tagToEmit = this.isScenarioFlow ? tag : this.getTagsConfig([tag])?.[0];
+        this.tagToggle.emit(tagToEmit);
+    }
+    onStateChange() {
+        const tagsConfig = this.getTagsConfig(this.currentTags);
+        this.stateChange.emit(tagsConfig);
+    }
+    buildTags() {
+        this.tagsUi = this.tagsConstructor.buildTags(this.tagsConfigToDisplay, this.selectedTagsConfig);
+    }
+    getTagsConfig(currentTags) {
+        return filter$1(this.tagsConfigToDisplay, (tagConfig) => some(currentTags, (tag) => tag.toggle && tag.selectedTagSubType === tagConfig.options.sub_type));
+    }
+    updateTagsState(tag) {
+        forEach(this.tagsWithSubTags, (tagWithSubTag) => this.scenarioService.tagAcceptableSubTagsHandler(tag, tagWithSubTag));
+        forEach(this.tagsNotSupportingDateTag, (tagNotSupportingDate) => {
+            forEach(this.tagsWithSubTags, (tagWithSubTag) => this.scenarioService.tagNotSupportingDatesHandler(tag, tagNotSupportingDate, tagWithSubTag));
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrTagsConstructorComponent, deps: [{ token: ScenarioService }, { token: TagsConstructorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: DrTagsConstructorComponent, selector: "dr-tags-constructor", inputs: { scenarioTagsConfig: "scenarioTagsConfig", tagsConfigToDisplay: "tagsConfigToDisplay", selectedTagsConfig: "selectedTagsConfig" }, outputs: { tagChange: "tagChange", tagToggle: "tagToggle", stateChange: "stateChange" }, ngImport: i0, template: "<div class=\"tags-constructor\">\n    <p class=\"tags-constructor__title--extra tags-constructor__tags__title\">Tags</p>\n    <div class=\"tags-constructor__tag\" *ngFor=\"let tag of currentTags\">\n        <div class=\"tags-constructor__tag__header\">\n            <p class=\"tags-constructor__title\">{{ tag.name }}</p>\n            <dr-toggle [(ngModel)]=\"tag.toggle\"\n                       (ngModelChange)=\"onTagToggle(tag)\"></dr-toggle>\n        </div>\n        <div class=\"tags-constructor__tag__description\">\n            <p class=\"tags-constructor__text\">{{ tag.description }}</p>\n        </div>\n        <div *ngIf=\"tag.toggle\" class=\"tags-constructor__tag__body\">\n            <div *ngIf=\"tag.subTags?.length\" class=\"tags-constructor__sub-tag\">\n                <dr-toggle-button [(ngModel)]=\"tag.selectedTagSubType\"\n                                  bindHidden=\"hidden\"\n                                  bindLabel=\"name\"\n                                  bindValue=\"subType\"\n                                  [items]=\"tag.subTags\"\n                                  [mode]=\"toggleButtonMode.DOTTED\"\n                                  (ngModelChange)=\"onSubTagChange(tag)\"></dr-toggle-button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".tags-constructor__text{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px}.tags-constructor__title{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px;font-weight:600}.tags-constructor__title--extra{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px;font-weight:700}.tags-constructor__tags__title{margin-bottom:16px}.tags-constructor__tag{margin-bottom:24px;padding-top:16px;border-top:1px solid #dfe0e3}.tags-constructor__tag:last-child{margin-bottom:0}.tags-constructor__tag__description{margin-top:5px}.tags-constructor__tag__header{display:flex;justify-content:space-between}.tags-constructor__sub-tag{margin-top:8px}:host::ng-deep .toggle-container__item{padding:2px 8px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DrToggleComponent, selector: "dr-toggle", inputs: ["toggleTitle", "toggleTitleRight", "successType", "checkedStatus", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: DrToggleButtonComponent, selector: "dr-toggle-button", inputs: ["items", "bindLabel", "bindValue", "bindHidden", "mode", "selectedValue", "disabled"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrTagsConstructorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dr-tags-constructor', template: "<div class=\"tags-constructor\">\n    <p class=\"tags-constructor__title--extra tags-constructor__tags__title\">Tags</p>\n    <div class=\"tags-constructor__tag\" *ngFor=\"let tag of currentTags\">\n        <div class=\"tags-constructor__tag__header\">\n            <p class=\"tags-constructor__title\">{{ tag.name }}</p>\n            <dr-toggle [(ngModel)]=\"tag.toggle\"\n                       (ngModelChange)=\"onTagToggle(tag)\"></dr-toggle>\n        </div>\n        <div class=\"tags-constructor__tag__description\">\n            <p class=\"tags-constructor__text\">{{ tag.description }}</p>\n        </div>\n        <div *ngIf=\"tag.toggle\" class=\"tags-constructor__tag__body\">\n            <div *ngIf=\"tag.subTags?.length\" class=\"tags-constructor__sub-tag\">\n                <dr-toggle-button [(ngModel)]=\"tag.selectedTagSubType\"\n                                  bindHidden=\"hidden\"\n                                  bindLabel=\"name\"\n                                  bindValue=\"subType\"\n                                  [items]=\"tag.subTags\"\n                                  [mode]=\"toggleButtonMode.DOTTED\"\n                                  (ngModelChange)=\"onSubTagChange(tag)\"></dr-toggle-button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".tags-constructor__text{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px}.tags-constructor__title{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px;font-weight:600}.tags-constructor__title--extra{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px;font-weight:700}.tags-constructor__tags__title{margin-bottom:16px}.tags-constructor__tag{margin-bottom:24px;padding-top:16px;border-top:1px solid #dfe0e3}.tags-constructor__tag:last-child{margin-bottom:0}.tags-constructor__tag__description{margin-top:5px}.tags-constructor__tag__header{display:flex;justify-content:space-between}.tags-constructor__sub-tag{margin-top:8px}:host::ng-deep .toggle-container__item{padding:2px 8px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: ScenarioService }, { type: TagsConstructorService }]; }, propDecorators: { scenarioTagsConfig: [{
+                type: Input
+            }], tagsConfigToDisplay: [{
+                type: Input
+            }], selectedTagsConfig: [{
+                type: Input
+            }], tagChange: [{
+                type: Output
+            }], tagToggle: [{
+                type: Output
+            }], stateChange: [{
+                type: Output
+            }] } });
+
 class DrScenarioConfigurationComponent {
     set selectedScenario(scenario) {
         if (!Object.values(Scenario).includes(scenario)) {
@@ -4489,7 +4675,6 @@ class DrScenarioConfigurationComponent {
     }
     constructor(scenarioService) {
         this.scenarioService = scenarioService;
-        this.toggleButtonMode = ToggleButtonMode;
         this._scenarioTags = [];
         this.wholeTagsConfig = [];
         this.isMultipleDimension = false;
@@ -4505,8 +4690,8 @@ class DrScenarioConfigurationComponent {
         this.onScenarioDataChange();
     }
     onScenarioTagToggle(tag) {
-        this.tagNotSupportingDatesHandler(tag);
-        this.tagAcceptableDateHandler(tag);
+        this.scenarioService.tagNotSupportingDatesHandler(tag, this.tagNotSupportingDates, this.dateTag);
+        this.scenarioService.tagAcceptableSubTagsHandler(tag, this.dateTag);
         this.onScenarioDataChange();
     }
     onScenarioDataChange() {
@@ -4515,37 +4700,12 @@ class DrScenarioConfigurationComponent {
             tagsConfig: this.scenarioService.getTagsConfigByScenarioTags(this.scenarioTags, this.wholeTagsConfig),
         });
     }
-    tagNotSupportingDatesHandler(tag) {
-        if (!this.tagNotSupportingDates || !tag.toggle)
-            return;
-        if (tag.type === TagTypes.DATE) {
-            this.tagNotSupportingDates.toggle = false;
-        }
-        if (tag === this.tagNotSupportingDates) {
-            const dateTag = this.dateTag;
-            if (dateTag) {
-                dateTag.toggle = false;
-            }
-        }
-    }
-    tagAcceptableDateHandler(tag) {
-        if (!tag.acceptableDateTags?.length)
-            return;
-        const dateTag = this.dateTag;
-        if (!dateTag)
-            return;
-        dateTag.subTags = map(dateTag.subTags, (subTag) => {
-            subTag.hidden = tag.toggle && !includes(tag.acceptableDateTags, subTag.subType);
-            return subTag;
-        });
-        dateTag.selectedTagSubType = tag.acceptableDateTags[0];
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrScenarioConfigurationComponent, deps: [{ token: ScenarioService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: DrScenarioConfigurationComponent, selector: "dr-scenario-configuration", inputs: { currentTagsConfig: "currentTagsConfig", wholeTagsConfig: "wholeTagsConfig", selectedScenario: "selectedScenario", isMultipleDimension: "isMultipleDimension" }, outputs: { scenarioDataChanged: "scenarioDataChanged" }, providers: [ScenarioService], ngImport: i0, template: "<div class=\"scenario\">\n    <div class=\"scenario__list\">\n        <p class=\"scenario__title scenario__title-list\">Scenario</p>\n        <dr-select [(ngModel)]=\"selectedScenario\"\n                   placeholder=\"Select\"\n                   [items]=\"scenarios\"\n                   (ngModelChange)=\"onScenarioChange($event)\"></dr-select>\n    </div>\n    <div class=\"scenario__tags\">\n        <p class=\"scenario__title--extra scenario__tags__title\">Tags</p>\n        <div class=\"scenario__tag\" *ngFor=\"let tag of scenarioTags\">\n            <div class=\"scenario__tag__header\">\n                <p class=\"scenario__title\">{{ tag.name }}</p>\n                <dr-toggle [(ngModel)]=\"tag.toggle\"\n                           (ngModelChange)=\"onScenarioTagToggle(tag)\"></dr-toggle>\n            </div>\n            <div class=\"scenario__tag__description\">\n                <p class=\"scenario__text\">{{ tag.description }}</p>\n            </div>\n            <div *ngIf=\"tag.toggle\" class=\"scenario__tag__body\">\n                <div *ngIf=\"tag.subTags?.length\" class=\"scenario__sub-tag\">\n                    <dr-toggle-button [(ngModel)]=\"tag.selectedTagSubType\"\n                                      bindHidden=\"hidden\"\n                                      bindLabel=\"name\"\n                                      bindValue=\"subType\"\n                                      [items]=\"tag.subTags\"\n                                      [mode]=\"toggleButtonMode.DOTTED\"\n                                      (ngModelChange)=\"onScenarioDataChange()\"></dr-toggle-button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".scenario__text{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px}.scenario__title{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px;font-weight:600}.scenario__title--extra{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px;font-weight:700}.scenario__tags{margin-top:24px}.scenario__tags__title{margin-bottom:16px}.scenario__title-list{margin-bottom:4px}.scenario__tag{margin-bottom:24px;padding-top:16px;border-top:1px solid #dfe0e3}.scenario__tag__description{margin-top:5px}.scenario__tag__header{display:flex;justify-content:space-between}.scenario__sub-tag{margin-top:8px}:host::ng-deep .toggle-container__item{padding:2px 8px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DrSelectComponent, selector: "dr-select", inputs: ["className", "items", "addTag", "appendTo", "bindLabel", "bindValue", "clearable", "searchable", "searchFn", "multiple", "hideSelected", "placeholder", "loading", "readonly", "disabled", "groupBy", "optionWithDescription", "id", "keyDownFn", "selectedItem", "dropdownClass", "closeOnSelect", "textView", "autofocus", "isOpen"], outputs: ["change", "open", "closeUp"] }, { kind: "component", type: DrToggleComponent, selector: "dr-toggle", inputs: ["toggleTitle", "toggleTitleRight", "successType", "checkedStatus", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: DrToggleButtonComponent, selector: "dr-toggle-button", inputs: ["items", "bindLabel", "bindValue", "bindHidden", "mode", "selectedValue", "disabled"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: DrScenarioConfigurationComponent, selector: "dr-scenario-configuration", inputs: { currentTagsConfig: "currentTagsConfig", wholeTagsConfig: "wholeTagsConfig", selectedScenario: "selectedScenario", isMultipleDimension: "isMultipleDimension" }, outputs: { scenarioDataChanged: "scenarioDataChanged" }, providers: [ScenarioService], ngImport: i0, template: "<div class=\"scenario\">\n    <div class=\"scenario__list\">\n        <p class=\"scenario__title scenario__title-list\">Scenario</p>\n        <dr-select [(ngModel)]=\"selectedScenario\"\n                   placeholder=\"Select\"\n                   [items]=\"scenarios\"\n                   (ngModelChange)=\"onScenarioChange($event)\"></dr-select>\n    </div>\n    <div class=\"scenario__tags\" *ngIf=\"scenarioTags?.length\">\n        <dr-tags-constructor [scenarioTagsConfig]=\"scenarioTags\"\n                             (tagChange)=\"onScenarioDataChange()\"\n                             (tagToggle)=\"onScenarioTagToggle($event)\"></dr-tags-constructor>\n    </div>\n</div>\n", styles: [".scenario__title{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px;font-weight:600}.scenario__title-list{margin-bottom:4px}.scenario__tags{margin-top:24px}:host::ng-deep .toggle-container__item{padding:2px 8px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DrSelectComponent, selector: "dr-select", inputs: ["className", "items", "addTag", "appendTo", "bindLabel", "bindValue", "clearable", "searchable", "searchFn", "multiple", "hideSelected", "placeholder", "loading", "readonly", "disabled", "groupBy", "optionWithDescription", "id", "keyDownFn", "selectedItem", "dropdownClass", "closeOnSelect", "textView", "autofocus", "isOpen"], outputs: ["change", "open", "closeUp"] }, { 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: "component", type: DrTagsConstructorComponent, selector: "dr-tags-constructor", inputs: ["scenarioTagsConfig", "tagsConfigToDisplay", "selectedTagsConfig"], outputs: ["tagChange", "tagToggle", "stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrScenarioConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dr-scenario-configuration', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ScenarioService], template: "<div class=\"scenario\">\n    <div class=\"scenario__list\">\n        <p class=\"scenario__title scenario__title-list\">Scenario</p>\n        <dr-select [(ngModel)]=\"selectedScenario\"\n                   placeholder=\"Select\"\n                   [items]=\"scenarios\"\n                   (ngModelChange)=\"onScenarioChange($event)\"></dr-select>\n    </div>\n    <div class=\"scenario__tags\">\n        <p class=\"scenario__title--extra scenario__tags__title\">Tags</p>\n        <div class=\"scenario__tag\" *ngFor=\"let tag of scenarioTags\">\n            <div class=\"scenario__tag__header\">\n                <p class=\"scenario__title\">{{ tag.name }}</p>\n                <dr-toggle [(ngModel)]=\"tag.toggle\"\n                           (ngModelChange)=\"onScenarioTagToggle(tag)\"></dr-toggle>\n            </div>\n            <div class=\"scenario__tag__description\">\n                <p class=\"scenario__text\">{{ tag.description }}</p>\n            </div>\n            <div *ngIf=\"tag.toggle\" class=\"scenario__tag__body\">\n                <div *ngIf=\"tag.subTags?.length\" class=\"scenario__sub-tag\">\n                    <dr-toggle-button [(ngModel)]=\"tag.selectedTagSubType\"\n                                      bindHidden=\"hidden\"\n                                      bindLabel=\"name\"\n                                      bindValue=\"subType\"\n                                      [items]=\"tag.subTags\"\n                                      [mode]=\"toggleButtonMode.DOTTED\"\n                                      (ngModelChange)=\"onScenarioDataChange()\"></dr-toggle-button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".scenario__text{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px}.scenario__title{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px;font-weight:600}.scenario__title--extra{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px;font-weight:700}.scenario__tags{margin-top:24px}.scenario__tags__title{margin-bottom:16px}.scenario__title-list{margin-bottom:4px}.scenario__tag{margin-bottom:24px;padding-top:16px;border-top:1px solid #dfe0e3}.scenario__tag__description{margin-top:5px}.scenario__tag__header{display:flex;justify-content:space-between}.scenario__sub-tag{margin-top:8px}:host::ng-deep .toggle-container__item{padding:2px 8px!important}\n"] }]
+            args: [{ selector: 'dr-scenario-configuration', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ScenarioService], template: "<div class=\"scenario\">\n    <div class=\"scenario__list\">\n        <p class=\"scenario__title scenario__title-list\">Scenario</p>\n        <dr-select [(ngModel)]=\"selectedScenario\"\n                   placeholder=\"Select\"\n                   [items]=\"scenarios\"\n                   (ngModelChange)=\"onScenarioChange($event)\"></dr-select>\n    </div>\n    <div class=\"scenario__tags\" *ngIf=\"scenarioTags?.length\">\n        <dr-tags-constructor [scenarioTagsConfig]=\"scenarioTags\"\n                             (tagChange)=\"onScenarioDataChange()\"\n                             (tagToggle)=\"onScenarioTagToggle($event)\"></dr-tags-constructor>\n    </div>\n</div>\n", styles: [".scenario__title{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px;font-weight:600}.scenario__title-list{margin-bottom:4px}.scenario__tags{margin-top:24px}:host::ng-deep .toggle-container__item{padding:2px 8px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: ScenarioService }]; }, propDecorators: { currentTagsConfig: [{
                 type: Input
             }], wholeTagsConfig: [{
@@ -5938,11 +6098,11 @@ class DialogWrapperComponent {
         this.destroy$.complete();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DialogWrapperComponent, deps: [{ token: i1$7.MatLegacyDialogRef }, { token: DialogService }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: DialogWrapperComponent, selector: "dr-dialog-wrapper", host: { properties: { "class": "this.elementClass" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"dialog-wrapper\"\n     [class.dialog-wrapper--confirmation-no-title]=\"dialogData.theme?.isConfirmation && !dialogData.title\">\n    <i class=\"dr-icon-exit\" data-test=\"close_btn\" (click)=\"closeDialog()\" *ngIf=\"!dialogData?.hideCloseBtn\"></i>\n\n    <div header class=\"dialog-wrapper__header\" *ngIf=\"dialogData.title\">\n        <h1 class=\"dialog-wrapper__header__title\" data-test=\"dialogTitle\">{{ dialogData.title }}</h1>\n        <h1 class=\"dialog-wrapper__header__subtitle\" data-test=\"dialogSubtitle\"\n            *ngIf=\"dialogData.subtitle\">{{ dialogData.subtitle }}</h1>\n    </div>\n    <div class=\"dialog-wrapper__content\"\n         [class.dialog-wrapper__content--no-padding]=\"dialogData.theme?.contentNoPadding\"\n         [ngClass]=\"{ 'flex-position': dialogData.contentIcon?.class && !childComponent }\">\n        <span *ngIf=\"dialogData.contentIcon?.class\" class=\"dialog-wrapper__content__icon\">\n            <i [ngClass]=\"dialogData.contentIcon.class\" [style.color]=\"dialogData.contentIcon?.color || 'inherit'\"></i>\n        </span>\n        <span class=\"dialog-content__wrapper\" [innerHTML]=\"dialogData.content\"></span>\n        <span #content class=\"dialog-wrapper__content__anchor\"> </span>\n    </div>\n    <dr-details-list *ngIf=\"dialogData.details\"\n                     [title]=\"dialogData.details.title\"\n                     [items]=\"dialogData.details.items\">\n    </dr-details-list>\n    <div footer class=\"dialog-wrapper__footer\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <div class=\"dialog-wrapper__footer__buttons\">\n            <span *ngIf=\"dialogData.customButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper dialog-wrapper__footer__button-wrapper--custom\"\n                  [drTooltip]=\"dialogData.customButton.isDisabled && dialogData.tooltips?.customDisabled\">\n                <dr-button (click)=\"onDecline()\"\n                           [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"declineBtn\"\n                           [disabled]=\"dialogData.customButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.custom\">{{ dialogData.customButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.cancelButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.cancelButton.isDisabled && dialogData.tooltips?.cancelDisabled\">\n                <dr-button (click)=\"closeDialog()\"\n                           [theme]=\"dialogData.cancelButton?.theme || 'secondary'\"\n                           data-test=\"closeBtn\"\n                           [disabled]=\"dialogData.cancelButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.cancel\">{{ dialogData.cancelButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.acceptButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.acceptButton.isDisabled && dialogData.tooltips?.acceptDisabled\">\n                <dr-button (click)=\"onAcceptDialog()\"\n                           [theme]=\"dialogData.acceptButton?.theme || 'primary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"acceptBtn\"\n                           [disabled]=\"dialogData.acceptButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.accept\">{{ dialogData.acceptButton.label }}</dr-button>\n            </span>\n        </div>\n    </div>\n</div>\n", styles: [":host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height{max-height:85vh}:host.large-modal{min-width:750px;max-width:750px}:host.medium-large-modal{min-width:669px;max-width:669px}:host.xl-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:1100px}:host.xl-custom-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:100%}::ng-deep .dialog-wrapper{display:flex;justify-content:space-between;flex-direction:column;position:relative}::ng-deep .dialog-wrapper>.dr-icon-exit{z-index:1;position:absolute;right:32px;top:20px;color:#51566f;cursor:pointer}::ng-deep .dialog-wrapper__header{display:flex;flex-direction:column;padding:8px 52px 8px 32px;border-bottom:1px solid #e5e6ea}::ng-deep .dialog-wrapper__header__title{color:#151b3f;position:static;font-weight:600;font-size:18px;line-height:24px}::ng-deep .dialog-wrapper__header__subtitle{font-size:14px;line-height:20px;margin:0}::ng-deep .dialog-wrapper--confirmation-no-title{padding-top:16px;height:100%}::ng-deep .dialog-wrapper__content{overflow-y:inherit;font-size:14px;font-weight:400;line-height:22px;padding:24px 32px 32px}::ng-deep .dialog-wrapper__content__anchor{display:none}::ng-deep .dialog-wrapper__content--no-padding{padding:0}::ng-deep .dialog-wrapper__content__icon{margin-right:10px;top:5px;position:relative}::ng-deep .dialog-wrapper__content.flex-position{display:flex}::ng-deep .dialog-wrapper__content .dialog-content__wrapper{white-space:pre-line}::ng-deep .dialog-wrapper dr-details-list{margin-top:-24px;padding:0 32px 32px}::ng-deep .dialog-wrapper__footer{border-top:1px solid #e5e6ea}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding:11px 32px}::ng-deep .dialog-wrapper__footer__buttons>dr-button:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper--custom:nth-last-child(3){margin-right:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"], outputs: ["click"] }, { kind: "directive", type: DrTooltipDirective, selector: "[drTooltip]", inputs: ["drTooltip", "drTooltipContext", "drTooltipPosition", "drTooltipClass", "drTooltipMousleaveTimeout", "drTooltipOptions", "drTooltipShow"] }, { kind: "component", type: DrDetailsListComponent, selector: "dr-details-list", inputs: ["title", "items", "collapse"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: DialogWrapperComponent, selector: "dr-dialog-wrapper", host: { properties: { "class": "this.elementClass" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"dialog-wrapper\"\n     [class.dialog-wrapper--confirmation-no-title]=\"dialogData.theme?.isConfirmation && !dialogData.title\">\n    <i class=\"dr-icon-exit\" data-test=\"close_btn\" (click)=\"closeDialog()\" *ngIf=\"!dialogData?.hideCloseBtn\"></i>\n\n    <div header class=\"dialog-wrapper__header\" *ngIf=\"dialogData.title\">\n        <h1 class=\"dialog-wrapper__header__title\" data-test=\"dialogTitle\">{{ dialogData.title }}</h1>\n        <h1 class=\"dialog-wrapper__header__subtitle\" data-test=\"dialogSubtitle\"\n            *ngIf=\"dialogData.subtitle\">{{ dialogData.subtitle }}</h1>\n    </div>\n    <div class=\"dialog-wrapper__content\"\n         [class.dialog-wrapper__content--no-padding]=\"dialogData.theme?.contentNoPadding\"\n         [ngClass]=\"{ 'flex-position': dialogData.contentIcon?.class && !childComponent }\">\n        <span *ngIf=\"dialogData.contentIcon?.class\" class=\"dialog-wrapper__content__icon\">\n            <i [ngClass]=\"dialogData.contentIcon.class\" [style.color]=\"dialogData.contentIcon?.color || 'inherit'\"></i>\n        </span>\n        <span class=\"dialog-content__wrapper\" [innerHTML]=\"dialogData.content\"></span>\n        <span #content class=\"dialog-wrapper__content__anchor\"> </span>\n    </div>\n    <dr-details-list *ngIf=\"dialogData.details\"\n                     [title]=\"dialogData.details.title\"\n                     [items]=\"dialogData.details.items\">\n    </dr-details-list>\n    <div footer class=\"dialog-wrapper__footer\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <div class=\"dialog-wrapper__footer__buttons\">\n            <span *ngIf=\"dialogData.customButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper dialog-wrapper__footer__button-wrapper--custom\"\n                  [drTooltip]=\"dialogData.customButton.isDisabled && dialogData.tooltips?.customDisabled\">\n                <dr-button (click)=\"onDecline()\"\n                           [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"declineBtn\"\n                           [disabled]=\"dialogData.customButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.custom\">{{ dialogData.customButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.cancelButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.cancelButton.isDisabled && dialogData.tooltips?.cancelDisabled\">\n                <dr-button (click)=\"closeDialog()\"\n                           [theme]=\"dialogData.cancelButton?.theme || 'secondary'\"\n                           data-test=\"closeBtn\"\n                           [disabled]=\"dialogData.cancelButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.cancel\">{{ dialogData.cancelButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.acceptButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.acceptButton.isDisabled && dialogData.tooltips?.acceptDisabled\">\n                <dr-button (click)=\"onAcceptDialog()\"\n                           [theme]=\"dialogData.acceptButton?.theme || 'primary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"acceptBtn\"\n                           [disabled]=\"dialogData.acceptButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.accept\">{{ dialogData.acceptButton.label }}</dr-button>\n            </span>\n        </div>\n    </div>\n</div>\n", styles: [":host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:85vh}:host.large-modal{min-width:750px;max-width:750px}:host.medium-large-modal{min-width:669px;max-width:669px}:host.xl-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:1100px}:host.xl-custom-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:100%}::ng-deep .dialog-wrapper{display:flex;justify-content:space-between;flex-direction:column;position:relative}::ng-deep .dialog-wrapper>.dr-icon-exit{z-index:1;position:absolute;right:32px;top:20px;color:#51566f;cursor:pointer}::ng-deep .dialog-wrapper__header{display:flex;flex-direction:column;padding:8px 52px 8px 32px;border-bottom:1px solid #e5e6ea}::ng-deep .dialog-wrapper__header__title{color:#151b3f;position:static;font-weight:600;font-size:18px;line-height:24px}::ng-deep .dialog-wrapper__header__subtitle{font-size:14px;line-height:20px;margin:0}::ng-deep .dialog-wrapper--confirmation-no-title{padding-top:16px;height:100%}::ng-deep .dialog-wrapper__content{overflow-y:inherit;font-size:14px;font-weight:400;line-height:22px;padding:24px 32px 32px}::ng-deep .dialog-wrapper__content__anchor{display:none}::ng-deep .dialog-wrapper__content--no-padding{padding:0}::ng-deep .dialog-wrapper__content__icon{margin-right:10px;top:5px;position:relative}::ng-deep .dialog-wrapper__content.flex-position{display:flex}::ng-deep .dialog-wrapper__content .dialog-content__wrapper{white-space:pre-line}::ng-deep .dialog-wrapper dr-details-list{margin-top:-24px;padding:0 32px 32px}::ng-deep .dialog-wrapper__footer{border-top:1px solid #e5e6ea}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding:11px 32px}::ng-deep .dialog-wrapper__footer__buttons>dr-button:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper--custom:nth-last-child(3){margin-right:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"], outputs: ["click"] }, { kind: "directive", type: DrTooltipDirective, selector: "[drTooltip]", inputs: ["drTooltip", "drTooltipContext", "drTooltipPosition", "drTooltipClass", "drTooltipMousleaveTimeout", "drTooltipOptions", "drTooltipShow"] }, { kind: "component", type: DrDetailsListComponent, selector: "dr-details-list", inputs: ["title", "items", "collapse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DialogWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dr-dialog-wrapper', template: "<div class=\"dialog-wrapper\"\n     [class.dialog-wrapper--confirmation-no-title]=\"dialogData.theme?.isConfirmation && !dialogData.title\">\n    <i class=\"dr-icon-exit\" data-test=\"close_btn\" (click)=\"closeDialog()\" *ngIf=\"!dialogData?.hideCloseBtn\"></i>\n\n    <div header class=\"dialog-wrapper__header\" *ngIf=\"dialogData.title\">\n        <h1 class=\"dialog-wrapper__header__title\" data-test=\"dialogTitle\">{{ dialogData.title }}</h1>\n        <h1 class=\"dialog-wrapper__header__subtitle\" data-test=\"dialogSubtitle\"\n            *ngIf=\"dialogData.subtitle\">{{ dialogData.subtitle }}</h1>\n    </div>\n    <div class=\"dialog-wrapper__content\"\n         [class.dialog-wrapper__content--no-padding]=\"dialogData.theme?.contentNoPadding\"\n         [ngClass]=\"{ 'flex-position': dialogData.contentIcon?.class && !childComponent }\">\n        <span *ngIf=\"dialogData.contentIcon?.class\" class=\"dialog-wrapper__content__icon\">\n            <i [ngClass]=\"dialogData.contentIcon.class\" [style.color]=\"dialogData.contentIcon?.color || 'inherit'\"></i>\n        </span>\n        <span class=\"dialog-content__wrapper\" [innerHTML]=\"dialogData.content\"></span>\n        <span #content class=\"dialog-wrapper__content__anchor\"> </span>\n    </div>\n    <dr-details-list *ngIf=\"dialogData.details\"\n                     [title]=\"dialogData.details.title\"\n                     [items]=\"dialogData.details.items\">\n    </dr-details-list>\n    <div footer class=\"dialog-wrapper__footer\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <div class=\"dialog-wrapper__footer__buttons\">\n            <span *ngIf=\"dialogData.customButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper dialog-wrapper__footer__button-wrapper--custom\"\n                  [drTooltip]=\"dialogData.customButton.isDisabled && dialogData.tooltips?.customDisabled\">\n                <dr-button (click)=\"onDecline()\"\n                           [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"declineBtn\"\n                           [disabled]=\"dialogData.customButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.custom\">{{ dialogData.customButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.cancelButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.cancelButton.isDisabled && dialogData.tooltips?.cancelDisabled\">\n                <dr-button (click)=\"closeDialog()\"\n                           [theme]=\"dialogData.cancelButton?.theme || 'secondary'\"\n                           data-test=\"closeBtn\"\n                           [disabled]=\"dialogData.cancelButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.cancel\">{{ dialogData.cancelButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.acceptButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.acceptButton.isDisabled && dialogData.tooltips?.acceptDisabled\">\n                <dr-button (click)=\"onAcceptDialog()\"\n                           [theme]=\"dialogData.acceptButton?.theme || 'primary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"acceptBtn\"\n                           [disabled]=\"dialogData.acceptButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.accept\">{{ dialogData.acceptButton.label }}</dr-button>\n            </span>\n        </div>\n    </div>\n</div>\n", styles: [":host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height{max-height:85vh}:host.large-modal{min-width:750px;max-width:750px}:host.medium-large-modal{min-width:669px;max-width:669px}:host.xl-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:1100px}:host.xl-custom-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:100%}::ng-deep .dialog-wrapper{display:flex;justify-content:space-between;flex-direction:column;position:relative}::ng-deep .dialog-wrapper>.dr-icon-exit{z-index:1;position:absolute;right:32px;top:20px;color:#51566f;cursor:pointer}::ng-deep .dialog-wrapper__header{display:flex;flex-direction:column;padding:8px 52px 8px 32px;border-bottom:1px solid #e5e6ea}::ng-deep .dialog-wrapper__header__title{color:#151b3f;position:static;font-weight:600;font-size:18px;line-height:24px}::ng-deep .dialog-wrapper__header__subtitle{font-size:14px;line-height:20px;margin:0}::ng-deep .dialog-wrapper--confirmation-no-title{padding-top:16px;height:100%}::ng-deep .dialog-wrapper__content{overflow-y:inherit;font-size:14px;font-weight:400;line-height:22px;padding:24px 32px 32px}::ng-deep .dialog-wrapper__content__anchor{display:none}::ng-deep .dialog-wrapper__content--no-padding{padding:0}::ng-deep .dialog-wrapper__content__icon{margin-right:10px;top:5px;position:relative}::ng-deep .dialog-wrapper__content.flex-position{display:flex}::ng-deep .dialog-wrapper__content .dialog-content__wrapper{white-space:pre-line}::ng-deep .dialog-wrapper dr-details-list{margin-top:-24px;padding:0 32px 32px}::ng-deep .dialog-wrapper__footer{border-top:1px solid #e5e6ea}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding:11px 32px}::ng-deep .dialog-wrapper__footer__buttons>dr-button:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper--custom:nth-last-child(3){margin-right:auto}\n"] }]
+            args: [{ selector: 'dr-dialog-wrapper', template: "<div class=\"dialog-wrapper\"\n     [class.dialog-wrapper--confirmation-no-title]=\"dialogData.theme?.isConfirmation && !dialogData.title\">\n    <i class=\"dr-icon-exit\" data-test=\"close_btn\" (click)=\"closeDialog()\" *ngIf=\"!dialogData?.hideCloseBtn\"></i>\n\n    <div header class=\"dialog-wrapper__header\" *ngIf=\"dialogData.title\">\n        <h1 class=\"dialog-wrapper__header__title\" data-test=\"dialogTitle\">{{ dialogData.title }}</h1>\n        <h1 class=\"dialog-wrapper__header__subtitle\" data-test=\"dialogSubtitle\"\n            *ngIf=\"dialogData.subtitle\">{{ dialogData.subtitle }}</h1>\n    </div>\n    <div class=\"dialog-wrapper__content\"\n         [class.dialog-wrapper__content--no-padding]=\"dialogData.theme?.contentNoPadding\"\n         [ngClass]=\"{ 'flex-position': dialogData.contentIcon?.class && !childComponent }\">\n        <span *ngIf=\"dialogData.contentIcon?.class\" class=\"dialog-wrapper__content__icon\">\n            <i [ngClass]=\"dialogData.contentIcon.class\" [style.color]=\"dialogData.contentIcon?.color || 'inherit'\"></i>\n        </span>\n        <span class=\"dialog-content__wrapper\" [innerHTML]=\"dialogData.content\"></span>\n        <span #content class=\"dialog-wrapper__content__anchor\"> </span>\n    </div>\n    <dr-details-list *ngIf=\"dialogData.details\"\n                     [title]=\"dialogData.details.title\"\n                     [items]=\"dialogData.details.items\">\n    </dr-details-list>\n    <div footer class=\"dialog-wrapper__footer\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <div class=\"dialog-wrapper__footer__buttons\">\n            <span *ngIf=\"dialogData.customButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper dialog-wrapper__footer__button-wrapper--custom\"\n                  [drTooltip]=\"dialogData.customButton.isDisabled && dialogData.tooltips?.customDisabled\">\n                <dr-button (click)=\"onDecline()\"\n                           [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"declineBtn\"\n                           [disabled]=\"dialogData.customButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.custom\">{{ dialogData.customButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.cancelButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.cancelButton.isDisabled && dialogData.tooltips?.cancelDisabled\">\n                <dr-button (click)=\"closeDialog()\"\n                           [theme]=\"dialogData.cancelButton?.theme || 'secondary'\"\n                           data-test=\"closeBtn\"\n                           [disabled]=\"dialogData.cancelButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.cancel\">{{ dialogData.cancelButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.acceptButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.acceptButton.isDisabled && dialogData.tooltips?.acceptDisabled\">\n                <dr-button (click)=\"onAcceptDialog()\"\n                           [theme]=\"dialogData.acceptButton?.theme || 'primary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"acceptBtn\"\n                           [disabled]=\"dialogData.acceptButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.accept\">{{ dialogData.acceptButton.label }}</dr-button>\n            </span>\n        </div>\n    </div>\n</div>\n", styles: [":host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:85vh}:host.large-modal{min-width:750px;max-width:750px}:host.medium-large-modal{min-width:669px;max-width:669px}:host.xl-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:1100px}:host.xl-custom-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:100%}::ng-deep .dialog-wrapper{display:flex;justify-content:space-between;flex-direction:column;position:relative}::ng-deep .dialog-wrapper>.dr-icon-exit{z-index:1;position:absolute;right:32px;top:20px;color:#51566f;cursor:pointer}::ng-deep .dialog-wrapper__header{display:flex;flex-direction:column;padding:8px 52px 8px 32px;border-bottom:1px solid #e5e6ea}::ng-deep .dialog-wrapper__header__title{color:#151b3f;position:static;font-weight:600;font-size:18px;line-height:24px}::ng-deep .dialog-wrapper__header__subtitle{font-size:14px;line-height:20px;margin:0}::ng-deep .dialog-wrapper--confirmation-no-title{padding-top:16px;height:100%}::ng-deep .dialog-wrapper__content{overflow-y:inherit;font-size:14px;font-weight:400;line-height:22px;padding:24px 32px 32px}::ng-deep .dialog-wrapper__content__anchor{display:none}::ng-deep .dialog-wrapper__content--no-padding{padding:0}::ng-deep .dialog-wrapper__content__icon{margin-right:10px;top:5px;position:relative}::ng-deep .dialog-wrapper__content.flex-position{display:flex}::ng-deep .dialog-wrapper__content .dialog-content__wrapper{white-space:pre-line}::ng-deep .dialog-wrapper dr-details-list{margin-top:-24px;padding:0 32px 32px}::ng-deep .dialog-wrapper__footer{border-top:1px solid #e5e6ea}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding:11px 32px}::ng-deep .dialog-wrapper__footer__buttons>dr-button:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper--custom:nth-last-child(3){margin-right:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$7.MatLegacyDialogRef }, { type: DialogService }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_LEGACY_DIALOG_DATA]
@@ -5957,6 +6117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
 var DIALOG_SIZE;
 (function (DIALOG_SIZE) {
     DIALOG_SIZE["SMALL"] = "small-modal";
+    DIALOG_SIZE["SMALL_MAX_HEIGHT"] = "small-modal-max-height";
     DIALOG_SIZE["MEDIUM"] = "medium-modal";
     DIALOG_SIZE["MEDIUM_SMALL"] = "medium-small-modal";
     DIALOG_SIZE["MEDIUM_MAX_HEIGHT"] = "medium-modal-max-height";
@@ -6025,11 +6186,11 @@ class DialogModalWrapperComponent {
         this.destroy$.complete();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DialogModalWrapperComponent, deps: [{ token: i1$7.MatLegacyDialogRef }, { token: DialogService }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: DialogModalWrapperComponent, selector: "dr-dialog-modal-wrapper", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i *ngIf=\"dialogData.headerIconClass\"\n           (click)=\"closeDialog()\"\n           class=\"title-dialog__icon\"\n           [class]=\"dialogData.headerIconClass\"\n           data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i mat-icon-button *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\"\n       data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\">\n    <ng-container>{{ dialogData.content }}</ng-container>\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div *ngFor=\"let field of dialogData.fields\"\n             class=\"dr-smart-form_group\"\n             [class]=\"field.formGroupClass\"\n             [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                   [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                   class=\"label p-0 d-flex align-items-center\">{{ field.label }}</label>\n            <div class=\"input-group p-0\"\n                 [ngClass]=\"{ 'col-md-10': field.label && !field.isLabelFullWidth, 'col-md-12': !field.label || field.isLabelFullWidth }\">\n                <dr-select *ngIf=\"field.type === dialogFieldType.SELECT\"\n                           [searchable]=\"dialogData.searchable\"\n                           [clearable]=\"dialogData.clearable\"\n                           [formControlName]=\"field.name\"\n                           [bindLabel]=\"field.bindLabel || null\"\n                           [bindValue]=\"field.bindValue || null\"\n                           [selectedItem]=\"field.default\"\n                           [items]=\"field.items || (field.items$ | async)\"\n                           [required]=\"true\"\n                           [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close();\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\"\n                               class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}</button>\n                    </ng-template>\n                </dr-select>\n                <dr-input *ngIf=\"field.type === dialogFieldType.INPUT\" data-test=\"modalInput\" class=\"form-control\"\n                          [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                                [formControlName]=\"field.name\"\n                                [format]=\"field.datePickerFormat\"\n                                [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label class=\"form-field-error-alert\" *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\"\n                       *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\"\n                   [theme]=\"'secondary'\">{{ dialogData.cancelButton.label }}</dr-button>\n        <dr-button *ngIf=\"dialogData.acceptButton\" data-test=\"modalAddBtn\" (click)=\"onAccept()\" [theme]=\"'primary'\"\n                   [isLoading]=\"isLoading\" [disabled]=\"form.invalid\">{{ dialogData.acceptButton.label }}</dr-button>\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height{max-height:80vh}.header-dialog{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 39px 8px 32px;border-bottom:1px solid #e5e6ea}.title-dialog{display:flex;color:#151b3f;position:static;font-weight:700;font-size:18px;line-height:24px}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close{color:#51566f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:500;line-height:22px;padding:16px 32px 22px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #e5e6ea}.buttons-wrapper{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}.buttons-wrapper dr-button:nth-of-type(2){margin-left:12px}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:red}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"], outputs: ["click"] }, { kind: "component", type: CheckboxComponent, selector: "dr-checkbox", inputs: ["checkedStatus", "disabled", "icon", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: DrInputComponent, selector: "dr-input", inputs: ["disabled", "buttonOptions", "type", "name", "placeholder", "readonly", "clearable", "min", "max", "minLength", "maxlength", "step"], outputs: ["blur", "ngModelDebounceChange", "searchHandler", "clearHandler", "buttonHandler"] }, { kind: "component", type: DrSelectComponent, selector: "dr-select", inputs: ["className", "items", "addTag", "appendTo", "bindLabel", "bindValue", "clearable", "searchable", "searchFn", "multiple", "hideSelected", "placeholder", "loading", "readonly", "disabled", "groupBy", "optionWithDescription", "id", "keyDownFn", "selectedItem", "dropdownClass", "closeOnSelect", "textView", "autofocus", "isOpen"], outputs: ["change", "open", "closeUp"] }, { kind: "component", type: DrDatePickerComponent, selector: "dr-date-picker", inputs: ["format", "min", "max", "periodPosition", "placeholder", "disabled", "fiscalYearMonthsModifier", "datepickerFilter"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: DialogModalWrapperComponent, selector: "dr-dialog-modal-wrapper", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i *ngIf=\"dialogData.headerIconClass\"\n           (click)=\"closeDialog()\"\n           class=\"title-dialog__icon\"\n           [class]=\"dialogData.headerIconClass\"\n           data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i mat-icon-button *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\"\n       data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\">\n    <ng-container>{{ dialogData.content }}</ng-container>\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div *ngFor=\"let field of dialogData.fields\"\n             class=\"dr-smart-form_group\"\n             [class]=\"field.formGroupClass\"\n             [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                   [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                   class=\"label p-0 d-flex align-items-center\">{{ field.label }}</label>\n            <div class=\"input-group p-0\"\n                 [ngClass]=\"{ 'col-md-10': field.label && !field.isLabelFullWidth, 'col-md-12': !field.label || field.isLabelFullWidth }\">\n                <dr-select *ngIf=\"field.type === dialogFieldType.SELECT\"\n                           [searchable]=\"dialogData.searchable\"\n                           [clearable]=\"dialogData.clearable\"\n                           [formControlName]=\"field.name\"\n                           [bindLabel]=\"field.bindLabel || null\"\n                           [bindValue]=\"field.bindValue || null\"\n                           [selectedItem]=\"field.default\"\n                           [items]=\"field.items || (field.items$ | async)\"\n                           [required]=\"true\"\n                           [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close();\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\"\n                               class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}</button>\n                    </ng-template>\n                </dr-select>\n                <dr-input *ngIf=\"field.type === dialogFieldType.INPUT\" data-test=\"modalInput\" class=\"form-control\"\n                          [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                                [formControlName]=\"field.name\"\n                                [format]=\"field.datePickerFormat\"\n                                [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label class=\"form-field-error-alert\" *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\"\n                       *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\"\n                   [theme]=\"'secondary'\">{{ dialogData.cancelButton.label }}</dr-button>\n        <dr-button *ngIf=\"dialogData.acceptButton\" data-test=\"modalAddBtn\" (click)=\"onAccept()\" [theme]=\"'primary'\"\n                   [isLoading]=\"isLoading\" [disabled]=\"form.invalid\">{{ dialogData.acceptButton.label }}</dr-button>\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:80vh}.header-dialog{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 39px 8px 32px;border-bottom:1px solid #e5e6ea}.title-dialog{display:flex;color:#151b3f;position:static;font-weight:700;font-size:18px;line-height:24px}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close{color:#51566f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:500;line-height:22px;padding:16px 32px 22px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #e5e6ea}.buttons-wrapper{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}.buttons-wrapper dr-button:nth-of-type(2){margin-left:12px}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:red}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"], outputs: ["click"] }, { kind: "component", type: CheckboxComponent, selector: "dr-checkbox", inputs: ["checkedStatus", "disabled", "icon", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: DrInputComponent, selector: "dr-input", inputs: ["disabled", "buttonOptions", "type", "name", "placeholder", "readonly", "clearable", "min", "max", "minLength", "maxlength", "step"], outputs: ["blur", "ngModelDebounceChange", "searchHandler", "clearHandler", "buttonHandler"] }, { kind: "component", type: DrSelectComponent, selector: "dr-select", inputs: ["className", "items", "addTag", "appendTo", "bindLabel", "bindValue", "clearable", "searchable", "searchFn", "multiple", "hideSelected", "placeholder", "loading", "readonly", "disabled", "groupBy", "optionWithDescription", "id", "keyDownFn", "selectedItem", "dropdownClass", "closeOnSelect", "textView", "autofocus", "isOpen"], outputs: ["change", "open", "closeUp"] }, { kind: "component", type: DrDatePickerComponent, selector: "dr-date-picker", inputs: ["format", "min", "max", "periodPosition", "placeholder", "disabled", "fiscalYearMonthsModifier", "datepickerFilter"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DialogModalWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dr-dialog-modal-wrapper', template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i *ngIf=\"dialogData.headerIconClass\"\n           (click)=\"closeDialog()\"\n           class=\"title-dialog__icon\"\n           [class]=\"dialogData.headerIconClass\"\n           data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i mat-icon-button *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\"\n       data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\">\n    <ng-container>{{ dialogData.content }}</ng-container>\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div *ngFor=\"let field of dialogData.fields\"\n             class=\"dr-smart-form_group\"\n             [class]=\"field.formGroupClass\"\n             [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                   [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                   class=\"label p-0 d-flex align-items-center\">{{ field.label }}</label>\n            <div class=\"input-group p-0\"\n                 [ngClass]=\"{ 'col-md-10': field.label && !field.isLabelFullWidth, 'col-md-12': !field.label || field.isLabelFullWidth }\">\n                <dr-select *ngIf=\"field.type === dialogFieldType.SELECT\"\n                           [searchable]=\"dialogData.searchable\"\n                           [clearable]=\"dialogData.clearable\"\n                           [formControlName]=\"field.name\"\n                           [bindLabel]=\"field.bindLabel || null\"\n                           [bindValue]=\"field.bindValue || null\"\n                           [selectedItem]=\"field.default\"\n                           [items]=\"field.items || (field.items$ | async)\"\n                           [required]=\"true\"\n                           [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close();\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\"\n                               class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}</button>\n                    </ng-template>\n                </dr-select>\n                <dr-input *ngIf=\"field.type === dialogFieldType.INPUT\" data-test=\"modalInput\" class=\"form-control\"\n                          [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                                [formControlName]=\"field.name\"\n                                [format]=\"field.datePickerFormat\"\n                                [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label class=\"form-field-error-alert\" *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\"\n                       *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\"\n                   [theme]=\"'secondary'\">{{ dialogData.cancelButton.label }}</dr-button>\n        <dr-button *ngIf=\"dialogData.acceptButton\" data-test=\"modalAddBtn\" (click)=\"onAccept()\" [theme]=\"'primary'\"\n                   [isLoading]=\"isLoading\" [disabled]=\"form.invalid\">{{ dialogData.acceptButton.label }}</dr-button>\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height{max-height:80vh}.header-dialog{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 39px 8px 32px;border-bottom:1px solid #e5e6ea}.title-dialog{display:flex;color:#151b3f;position:static;font-weight:700;font-size:18px;line-height:24px}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close{color:#51566f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:500;line-height:22px;padding:16px 32px 22px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #e5e6ea}.buttons-wrapper{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}.buttons-wrapper dr-button:nth-of-type(2){margin-left:12px}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:red}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"] }]
+            args: [{ selector: 'dr-dialog-modal-wrapper', template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i *ngIf=\"dialogData.headerIconClass\"\n           (click)=\"closeDialog()\"\n           class=\"title-dialog__icon\"\n           [class]=\"dialogData.headerIconClass\"\n           data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i mat-icon-button *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\"\n       data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\">\n    <ng-container>{{ dialogData.content }}</ng-container>\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div *ngFor=\"let field of dialogData.fields\"\n             class=\"dr-smart-form_group\"\n             [class]=\"field.formGroupClass\"\n             [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                   [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                   class=\"label p-0 d-flex align-items-center\">{{ field.label }}</label>\n            <div class=\"input-group p-0\"\n                 [ngClass]=\"{ 'col-md-10': field.label && !field.isLabelFullWidth, 'col-md-12': !field.label || field.isLabelFullWidth }\">\n                <dr-select *ngIf=\"field.type === dialogFieldType.SELECT\"\n                           [searchable]=\"dialogData.searchable\"\n                           [clearable]=\"dialogData.clearable\"\n                           [formControlName]=\"field.name\"\n                           [bindLabel]=\"field.bindLabel || null\"\n                           [bindValue]=\"field.bindValue || null\"\n                           [selectedItem]=\"field.default\"\n                           [items]=\"field.items || (field.items$ | async)\"\n                           [required]=\"true\"\n                           [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close();\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\"\n                               class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}</button>\n                    </ng-template>\n                </dr-select>\n                <dr-input *ngIf=\"field.type === dialogFieldType.INPUT\" data-test=\"modalInput\" class=\"form-control\"\n                          [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                                [formControlName]=\"field.name\"\n                                [format]=\"field.datePickerFormat\"\n                                [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label class=\"form-field-error-alert\" *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\"\n                       *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\"\n                   [theme]=\"'secondary'\">{{ dialogData.cancelButton.label }}</dr-button>\n        <dr-button *ngIf=\"dialogData.acceptButton\" data-test=\"modalAddBtn\" (click)=\"onAccept()\" [theme]=\"'primary'\"\n                   [isLoading]=\"isLoading\" [disabled]=\"form.invalid\">{{ dialogData.acceptButton.label }}</dr-button>\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:80vh}.header-dialog{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 39px 8px 32px;border-bottom:1px solid #e5e6ea}.title-dialog{display:flex;color:#151b3f;position:static;font-weight:700;font-size:18px;line-height:24px}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close{color:#51566f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:500;line-height:22px;padding:16px 32px 22px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #e5e6ea}.buttons-wrapper{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}.buttons-wrapper dr-button:nth-of-type(2){margin-left:12px}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:red}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$7.MatLegacyDialogRef }, { type: DialogService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_LEGACY_DIALOG_DATA]
@@ -7507,6 +7668,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 }]
         }] });
 
+class DrTagsConstructorModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrTagsConstructorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: DrTagsConstructorModule, declarations: [DrTagsConstructorComponent], imports: [CommonModule, DrInputsModule, FormsModule], exports: [DrTagsConstructorComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrTagsConstructorModule, providers: [ScenarioService, TagsConstructorService], imports: [CommonModule, DrInputsModule, FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrTagsConstructorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DrTagsConstructorComponent],
+                    imports: [CommonModule, DrInputsModule, FormsModule],
+                    providers: [ScenarioService, TagsConstructorService],
+                    exports: [DrTagsConstructorComponent],
+                }]
+        }] });
+
 const COMPONENTS = [
     DrScenarioConfigurationComponent,
     DrScenarioTagConfigurationComponent,
@@ -7517,12 +7693,14 @@ class DrScenarioModule {
             DrScenarioTagConfigurationComponent], imports: [CommonModule,
             DrInputsModule,
             FormsModule,
-            DrTagModule], exports: [DrScenarioConfigurationComponent,
+            DrTagModule,
+            DrTagsConstructorModule], exports: [DrScenarioConfigurationComponent,
             DrScenarioTagConfigurationComponent] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrScenarioModule, providers: [ScenarioService], imports: [CommonModule,
             DrInputsModule,
             FormsModule,
-            DrTagModule] }); }
+            DrTagModule,
+            DrTagsConstructorModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DrScenarioModule, decorators: [{
             type: NgModule,
@@ -7533,7 +7711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         CommonModule,
                         DrInputsModule,
                         FormsModule,
-                        DrTagModule
+                        DrTagModule,
+                        DrTagsConstructorModule,
                     ],
                     exports: [...COMPONENTS],
                 }]
@@ -7639,5 +7818,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, 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, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, FeedbackSentiment, ForecastTagComponent, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, SpinnerSize, SpinnerType, StepperComponent, TagTypes, TimeframeOption, ToggleButtonMode, TooltipComponent, TooltipInfoComponent, TooltipInfoSimpleComponent, TooltipNoBodyComponent, TooltipPosition, TooltipProcessDefaultComponent, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
+export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, 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, DrTagsConstructorModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, FeedbackSentiment, ForecastTagComponent, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, SpinnerSize, SpinnerType, StepperComponent, TagTypes, TagsConfigSubType, TimeframeOption, ToggleButtonMode, TooltipComponent, TooltipInfoComponent, TooltipInfoSimpleComponent, TooltipNoBodyComponent, TooltipPosition, TooltipProcessDefaultComponent, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
 //# sourceMappingURL=datarailsshared-datarailsshared.mjs.map