@datarailsshared/datarailsshared 1.6.91 → 1.6.95

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -1186,6 +1186,7 @@ class DrInputComponent {
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.cdr = cdr;
+        this.hostId = null;
         this.readonly = false;
         this.blur = new EventEmitter();
         this.focused = new EventEmitter();
@@ -1284,8 +1285,9 @@ class DrInputComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
-        } }, hostVars: 5, hostBindings: function DrInputComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        } }, hostVars: 6, hostBindings: function DrInputComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵhostProperty("tabindex", ctx.tabindex);
+            i0.ɵɵattribute("id", ctx.hostId);
             i0.ɵɵclassMap(ctx.elementClass);
             i0.ɵɵclassProp("search-type-mini", ctx.searchMini);
         } }, inputs: { id: "id", disabled: "disabled", buttonOptions: "buttonOptions", type: "type", placeholder: "placeholder", clearable: "clearable", name: "name", readonly: "readonly", min: "min", max: "max", maxlength: "maxlength", minlength: "minlength", pattern: "pattern", step: "step", searchMini: "searchMini", mask: "mask", suffix: "suffix", prefix: "prefix" }, outputs: { blur: "blur", focused: "focus", modelDebounceChange: "modelDebounceChange", searchHandler: "searchHandler", clearHandler: "clearHandler", buttonHandler: "buttonHandler" }, features: [i0.ɵɵProvidersFeature([
@@ -1326,6 +1328,9 @@ class DrInputComponent {
                 ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[prefixIcon]\"></ng-content>\n\n<ng-container *ngIf=\"!mask; else maskedInput\">\n    <input\n        [attr.id]=\"id\"\n        #inputRef\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"updateChanges()\"\n        (ngModelDebounceChange)=\"modelDebounceChange.emit($event)\"\n        (blur)=\"blur.emit(value); onTouched()\"\n        (focus)=\"focused.emit($event)\"\n        [disabled]=\"_disabled\"\n        [readonly]=\"readonly\"\n        [type]=\"type\"\n        [placeholder]=\"placeholder\"\n        [name]=\"name\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [minlength]=\"minlength\"\n        [maxlength]=\"maxlength\"\n        [step]=\"step\" />\n</ng-container>\n<ng-template #maskedInput>\n    <input\n        [attr.id]=\"id\"\n        #inputRef\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"updateChanges()\"\n        (ngModelDebounceChange)=\"modelDebounceChange.emit($event)\"\n        (blur)=\"blur.emit(value); onTouched()\"\n        (focus)=\"focused.emit($event)\"\n        [disabled]=\"_disabled\"\n        [readonly]=\"readonly\"\n        [type]=\"type\"\n        [placeholder]=\"placeholder\"\n        [name]=\"name\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [minlength]=\"minlength\"\n        [maxlength]=\"maxlength\"\n        [mask]=\"mask\"\n        [suffix]=\"suffix\"\n        [prefix]=\"prefix\"\n        [step]=\"step\" />\n</ng-template>\n<span *ngIf=\"value\" class=\"clear-icon\" (click)=\"onClear($event)\"></span>\n<span *ngIf=\"type === 'search'\" class=\"search-icon\" (click)=\"onSearchClicked()\"></span>\n<ng-content select=\"[suffixIcon]\"></ng-content>\n<button *ngIf=\"_buttonOptions.show || (_buttonOptions.showOnFocus && _buttonOptions.focusSet)\" (click)=\"onButtonClicked($event)\">\n    {{ _buttonOptions.text }}\n</button>\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:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;padding:0 8px;overflow:hidden;outline:none}:host:hover{border-color:#4646ce}:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;color:#aeabac;border-color:#aeabac;background:#f0f1f4}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host input{display:flex;font-size:14px;flex-grow:1;height:100%;border:none;padding:4px 0;text-align:left;box-sizing:border-box;outline:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host .clear-icon{visibility:hidden}:host.clearable .clear-icon,:host.ng-touched.ng-invalid .clear-icon{visibility:visible;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91783 5.00001L9.03353 1.88395C9.11924 1.79818 9.16651 1.68374 9.16665 1.56171C9.16665 1.43962 9.11937 1.32504 9.03353 1.2394L8.76047 0.966415C8.67463 0.880433 8.56023 0.833344 8.43808 0.833344C8.31612 0.833344 8.20166 0.880433 8.11582 0.966415L5.00013 4.08227L1.88428 0.966415C1.79858 0.880433 1.68404 0.833344 1.56196 0.833344C1.44001 0.833344 1.32556 0.880433 1.23985 0.966415L0.966646 1.2394C0.788869 1.41719 0.788869 1.70637 0.966646 1.88395L4.08242 5.00001L0.966646 8.11593C0.880873 8.20184 0.833677 8.31628 0.833677 8.43831C0.833677 8.56034 0.880873 8.67478 0.966646 8.76062L1.23978 9.03361C1.32548 9.11952 1.44 9.16668 1.56188 9.16668C1.68397 9.16668 1.7985 9.11952 1.88421 9.03361L5.00005 5.91769L8.11575 9.03361C8.20159 9.11952 8.31605 9.16668 8.438 9.16668H8.43815C8.56017 9.16668 8.67456 9.11952 8.7604 9.03361L9.03346 8.76062C9.11916 8.67484 9.16643 8.56034 9.16643 8.43831C9.16643 8.31628 9.11916 8.20184 9.03346 8.116L5.91783 5.00001Z\" fill=\"%2351566F\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}:host span+span,:host span+img{margin-left:0}:host.search-type{padding:0 16px;border-radius:16px}:host.search-type .search-icon{content:url('data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.5816 10.2097C11.4878 10.1157 11.3605 10.0629 11.2277 10.0629H10.8175C10.7473 10.0629 10.6799 10.035 10.6303 9.98534C10.5322 9.88724 10.527 9.73044 10.6132 9.62178C11.4154 8.6112 11.8925 7.33534 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.33523 11.8925 8.611 11.4155 9.62155 10.6172C9.7304 10.5312 9.88711 10.5366 9.9852 10.6347C10.0349 10.6845 10.0629 10.7519 10.0629 10.8223V11.2277C10.0629 11.3605 10.1157 11.4878 10.2097 11.5816L14.2834 15.6472C14.4787 15.8421 14.795 15.8419 14.9901 15.6468L15.6468 14.9901C15.8419 14.795 15.8421 14.4787 15.6472 14.2834L11.5816 10.2097ZM5.94625 10.0629C3.67296 10.0629 1.82962 8.21955 1.82962 5.94625C1.82962 3.67296 3.67296 1.82962 5.94625 1.82962C8.21955 1.82962 10.0629 3.67296 10.0629 5.94625C10.0629 8.21955 8.21955 10.0629 5.94625 10.0629Z\" fill=\"%23BCBCBC\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}:host.search-type.clearable .search-icon{margin-left:26px}:host.search-type.clearable .clear-icon+.search-icon{margin-left:8px}:host.search-type-mini{width:200px;min-height:28px;height:28px}:host.with-button{padding-right:0}:host.with-button button{color:#fff;background:#4646ce;height:100%;width:auto;padding:0 8px;display:flex;align-items:center;border:none;border-left:1px solid #9ea1aa}:host.with-button.disabled button{color:#aeabac;background:#f0f1f4;border-left:1px solid #aeabac}:host ::ng-deep img[prefixIcon],:host ::ng-deep img[suffixIcon],:host ::ng-deep i[prefixIcon],:host ::ng-deep i[suffixIcon]{position:relative;margin:auto 8px}:host ::ng-deep img[prefixIcon],:host ::ng-deep i[prefixIcon]{margin-left:0}:host ::ng-deep img[suffixIcon],:host ::ng-deep i[suffixIcon]{margin-right:0}\n"] }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, { id: [{
             type: Input
+        }], hostId: [{
+            type: HostBinding,
+            args: ['attr.id']
         }], disabled: [{
             type: Input
         }], buttonOptions: [{
@@ -1527,6 +1532,7 @@ class DrSelectComponent {
         this.disabled = false;
         this.groupBy = null;
         this.optionWithDescription = false;
+        this.hostId = null;
         this.keyDownFn = () => true;
         this.closeOnSelect = true;
         this.noValuePadding = false;
@@ -1651,7 +1657,8 @@ class DrSelectComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ngSelect = _t.first);
-        } }, hostVars: 4, hostBindings: function DrSelectComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        } }, hostVars: 5, hostBindings: function DrSelectComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("id", ctx.hostId);
             i0.ɵɵclassMap(ctx.type);
             i0.ɵɵclassProp("textView", ctx.asTextView);
         } }, inputs: { type: "type", clearInputTextAfterSelection: "clearInputTextAfterSelection", className: "className", items: "items", addTag: "addTag", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", clearable: "clearable", searchable: "searchable", isDisplayingSearchInHeader: "isDisplayingSearchInHeader", minItemsToDisplaySearchInHeader: "minItemsToDisplaySearchInHeader", searchFn: "searchFn", multiple: "multiple", multipleHeightIncreased: "multipleHeightIncreased", hideSelected: "hideSelected", maxSelectedItems: "maxSelectedItems", placeholder: "placeholder", loading: "loading", loadingText: "loadingText", readonly: "readonly", disabled: "disabled", groupBy: "groupBy", optionWithDescription: "optionWithDescription", id: "id", keyDownFn: "keyDownFn", selectedItem: "selectedItem", dropdownClass: "dropdownClass", closeOnSelect: "closeOnSelect", textView: "textView", autofocus: "autofocus", isOpen: "isOpen", noValuePadding: "noValuePadding", selectOnTabKeyPress: "selectOnTabKeyPress" }, outputs: { change: "change", open: "open", closeUp: "closeUp" }, features: [i0.ɵɵProvidersFeature([
@@ -1761,6 +1768,9 @@ class DrSelectComponent {
             type: Input
         }], id: [{
             type: Input
+        }], hostId: [{
+            type: HostBinding,
+            args: ['attr.id']
         }], keyDownFn: [{
             type: Input
         }], selectedItem: [{
@@ -2306,6 +2316,7 @@ class DrDatePickerComponent {
         this.cdr = cdr;
         this.dateAdapter = dateAdapter;
         this.datePickerService = datePickerService;
+        this.hostId = null;
         this._startAt = null;
         /**
          * @description Whether to transform date, taking end, start, middle of period (i.e. set middle of month if timeframe='month')
@@ -2562,7 +2573,8 @@ class DrDatePickerComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.datePicker = _t.first);
-        } }, hostVars: 4, hostBindings: function DrDatePickerComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        } }, hostVars: 5, hostBindings: function DrDatePickerComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("id", ctx.hostId);
             i0.ɵɵclassProp("disabled", ctx.disabled)("active", ctx.active);
         } }, inputs: { id: "id", format: "format", min: "min", max: "max", startAt: "startAt", periodPosition: "periodPosition", placeholder: "placeholder", disabled: "disabled", fiscalYearMonthsModifier: "fiscalYearMonthsModifier", fiscalYearBack: "fiscalYearBack", datepickerFilter: "datepickerFilter", fixForNormalizedValueWithMaxDate: "fixForNormalizedValueWithMaxDate" }, features: [i0.ɵɵProvidersFeature([
                 { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
@@ -2594,6 +2606,9 @@ class DrDatePickerComponent {
                 ], template: "<i class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === 'week'\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"input.value\"\n        (click)=\"datePicker.open()\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\" />\n\n    <mat-date-range-input [formGroup]=\"rangeForm\" [rangePicker]=\"datePicker\" [dateFilter]=\"dateFilter\" class=\"range-input\">\n        <input\n            matStartDate\n            #input\n            [drDatePickerFormat]=\"datePickerService.format$ | async\"\n            formControlName=\"start\"\n            (dateChange)=\"valueChangedInCalendar(rangeForm.value.start)\" />\n        <input matEndDate [drDatePickerFormat]=\"datePickerService.format$ | async\" formControlName=\"end\" />\n    </mat-date-range-input>\n\n    <mat-date-range-picker\n        #datePicker\n        [startAt]=\"_startAt\"\n        [panelClass]=\"'dr-week-datepicker'\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== 'week'\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"displayValue$ | async\"\n        (ngModelChange)=\"valueChangedInCalendar($event)\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"dateFilter\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [drDatePickerFormat]=\"datePickerService.format$ | async\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\" />\n\n    <mat-datepicker\n        #datePicker\n        [startAt]=\"_startAt\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-datepicker>\n</ng-container>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{width:386px!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, { id: [{
             type: Input
+        }], hostId: [{
+            type: HostBinding,
+            args: ['attr.id']
         }], format: [{
             type: Input
         }], min: [{
@@ -4394,6 +4409,7 @@ class RadioButtonComponent {
     }
     constructor(cdr) {
         this.cdr = cdr;
+        this.hostId = null;
         this.valueChange = new EventEmitter();
         this._disabled = false;
         this.onChange = (onchanges) => { };
@@ -4426,7 +4442,9 @@ class RadioButtonComponent {
         this.cdr.markForCheck();
     }
     /** @nocollapse */ static { this.ɵfac = function RadioButtonComponent_Factory(t) { return new (t || RadioButtonComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: RadioButtonComponent, selectors: [["dr-radio-button"]], inputs: { id: "id", name: "name", _value: ["value", "_value"], disabled: "disabled" }, outputs: { valueChange: "valueChange" }, features: [i0.ɵɵProvidersFeature([
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: RadioButtonComponent, selectors: [["dr-radio-button"]], hostVars: 1, hostBindings: function RadioButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("id", ctx.hostId);
+        } }, inputs: { id: "id", name: "name", _value: ["value", "_value"], disabled: "disabled" }, outputs: { valueChange: "valueChange" }, features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: RadioButtonComponent,
@@ -4457,6 +4475,9 @@ class RadioButtonComponent {
                 ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label>\n    <input\n        [attr.id]=\"id\"\n        type=\"radio\"\n        [name]=\"name\"\n        [value]=\"value\"\n        (change)=\"valueChanged(value)\"\n        [(ngModel)]=\"modelValue\"\n        [disabled]=\"disabled\"\n        (click)=\"toggleChange($event)\" />\n    <span>\n        <ng-content></ng-content>\n    </span>\n</label>\n", styles: [":host{display:flex;line-height:22px;font-size:14px;font-family:Poppins,sans-serif}label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #8f929e;background-color:#fff;font-weight:400;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{font-family:DataRails!important;background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%234646CE\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#4646ce;color:#4646ce}label input:disabled+span:before{border-color:#8f929e}label input[disabled]:checked+span:before{background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%238F929E\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#8f929e!important;color:#8f929e}label span:hover:before{border-color:#4e566c}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { id: [{
             type: Input
+        }], hostId: [{
+            type: HostBinding,
+            args: ['attr.id']
         }], name: [{
             type: Input
         }], _value: [{
@@ -4658,6 +4679,7 @@ class CheckboxComponent {
     }
     constructor(cdr) {
         this.cdr = cdr;
+        this.hostId = null;
         this.disabled = false;
         this.icon = '';
         this.theme = 'medium';
@@ -4700,7 +4722,8 @@ class CheckboxComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxContent = _t.first);
-        } }, hostVars: 6, hostBindings: function CheckboxComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        } }, hostVars: 7, hostBindings: function CheckboxComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("id", ctx.hostId);
             i0.ɵɵclassMap(ctx.theme);
             i0.ɵɵclassProp("disabled", ctx.disabled)("text-nowrap", ctx.textNowrap);
         } }, inputs: { id: "id", checkedStatus: "checkedStatus", disabled: "disabled", icon: "icon", theme: "theme", indeterminate: "indeterminate", textNowrap: "textNowrap" }, outputs: { checkedChange: "checkedChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }])], ngContentSelectors: _c1$f, decls: 5, vars: 9, consts: [["type", "checkbox", 3, "checked", "disabled", "change", "click"], [3, "drTooltip"], ["checkboxContent", ""]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
@@ -4726,6 +4749,9 @@ class CheckboxComponent {
         args: [{ selector: 'dr-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label>\n    <input\n        type=\"checkbox\"\n        [attr.id]=\"id\"\n        [attr.data-test]=\"checkedStatus ? 'checked' : 'unchecked'\"\n        [checked]=\"checkedStatus\"\n        [disabled]=\"disabled\"\n        (change)=\"setValue($event)\"\n        (click)=\"$event.stopPropagation()\" />\n    <span #checkboxContent [class]=\"icon\" [class.indeterminate]=\"indeterminate\" [drTooltip]=\"tooltip\">\n        <ng-content></ng-content>\n    </span>\n</label>\n", styles: ["input+span{vertical-align:middle;line-height:30px}input+span,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:0}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}:host.text-nowrap label input+span{white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis;line-height:20px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;min-height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1.5px solid #8f929e;background-color:#fff;font-weight:400;margin-top:-1px}label input+span:before,label:hover input+span:before{background-color:#fff;border-color:#8f929e;color:#4646ce;border-radius:2px}label input:checked+span:before,label:hover input:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background:#4646ce;border-color:#4646ce;color:#fff}label input:checked+span.cross:before,label:hover input:checked+span.cross:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}label input+span.indeterminate:before,label:hover input+span.indeterminate:before{content:url('data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 2\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25L11 0.250001C11.4142 0.250001 11.75 0.585787 11.75 1C11.75 1.41421 11.4142 1.75 11 1.75L1 1.75C0.585786 1.75 0.25 1.41421 0.25 1Z\" fill=\"white\"/></svg>');background:#4646ce;border-color:#4646ce;color:#fff}label input:disabled+span{color:#8f929e}label input:disabled+span:before{border-color:#dfe0e3;pointer-events:none}label input[disabled]:checked+span:before{background:#8f929e;border-color:#8f929e;pointer-events:none}:host{font-family:Poppins,sans-serif;font-style:normal}:host label{position:relative}:host label:hover:after{content:\"\";width:24px;height:24px;background:#f2f2fb;border-radius:50%;position:absolute;left:-4px;top:.5px}:host.small{color:#333;font-size:14px}:host.small label:after,:host.small label:hover:after{width:20px;height:20px;left:-3px;top:1.5px}:host.small label input+span,:host.small label:hover input+span{min-height:10px;min-width:10px}:host.small label input+span:before,:host.small label:hover input+span:before{height:10px;width:10px;min-height:10px;min-width:10px;line-height:10px;margin-right:8px}:host.small label input+span:before,:host.small label:hover input+span:before{content:\"\";background-position:center;background-repeat:no-repeat;background-size:10px 10px}:host.small label input+span.indeterminate:before,:host.small label:hover input+span.indeterminate:before{background-image:url('data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 2\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25L11 0.250001C11.4142 0.250001 11.75 0.585787 11.75 1C11.75 1.41421 11.4142 1.75 11 1.75L1 1.75C0.585786 1.75 0.25 1.41421 0.25 1Z\" fill=\"white\"/></svg>')}:host.small label input:checked+span:before,:host.small label:hover input:checked+span:before{background-image:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>')}:host.small label input:checked+span.cross:before,:host.small label:hover input:checked+span.cross:before{background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}:host.disabled label:hover:after{display:none}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { id: [{
             type: Input
+        }], hostId: [{
+            type: HostBinding,
+            args: ['attr.id']
         }], checkedStatus: [{
             type: Input
         }], disabled: [{
@@ -7460,6 +7486,7 @@ class DrToggleComponent {
         this.cdr = cdr;
         this._disabled = false;
         this._elementClass = [];
+        this.hostId = null;
         this.checkedChange = new EventEmitter();
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -7489,7 +7516,8 @@ class DrToggleComponent {
         this.onTouched();
     }
     /** @nocollapse */ static { this.ɵfac = function DrToggleComponent_Factory(t) { return new (t || DrToggleComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrToggleComponent, selectors: [["dr-toggle"]], hostVars: 2, hostBindings: function DrToggleComponent_HostBindings(rf, ctx) { if (rf & 2) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrToggleComponent, selectors: [["dr-toggle"]], hostVars: 3, hostBindings: function DrToggleComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("id", ctx.hostId);
             i0.ɵɵclassMap(ctx.elementClass);
         } }, inputs: { id: "id", toggleTitle: "toggleTitle", toggleTitleRight: "toggleTitleRight", successType: "successType", checkedStatus: "checkedStatus", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }])], ngContentSelectors: _c0$n, decls: 7, vars: 10, consts: [["class", "toggle-title mr-3", 4, "ngIf"], [1, "toggle-container"], ["type", "checkbox", 3, "checked", "disabled", "click"], [1, "toggle-body"], ["class", "toggle-title ml-3", 4, "ngIf"], [1, "toggle-title", "mr-3"], [1, "toggle-title", "ml-3"]], template: function DrToggleComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
@@ -7519,6 +7547,9 @@ class DrToggleComponent {
         args: [{ selector: 'dr-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"toggle-title mr-3\" *ngIf=\"toggleTitle && !toggleTitleRight\">{{ toggleTitle }}</span>\n<label class=\"toggle-container\" [class.success]=\"successType\" [class.disabled]=\"_disabled\">\n    <input\n        [attr.id]=\"id\"\n        type=\"checkbox\"\n        [attr.data-test]=\"checkedStatus ? 'toggle-on' : 'toggle-off'\"\n        [checked]=\"checkedStatus\"\n        [disabled]=\"_disabled\"\n        (click)=\"setValue()\" />\n    <span class=\"toggle-body\">\n        <i></i>\n    </span>\n    <ng-content></ng-content>\n</label>\n<span class=\"toggle-title ml-3\" *ngIf=\"toggleTitle && toggleTitleRight\">{{ toggleTitle }}</span>\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;font-family:Poppins,sans-serif}:host.toggle-label-alignment{justify-content:start}:host .toggle-container{display:flex;align-items:center}:host .toggle-container.disabled{pointer-events:none}:host .toggle-container.disabled .toggle-body{background-color:#8f9bb329!important}:host .toggle-container.disabled .toggle-body i{background:#8f9bb33d!important}:host .toggle-container.success input:checked+span.toggle-body{background-color:#03a678}:host .toggle-container input{display:none}:host .toggle-container input:checked+span.toggle-body>i,:host .toggle-container input:checked+span.toggle-body:active>i{margin-left:16px}:host .toggle-container input:checked+span.toggle-body{background-color:#4646ce}:host .toggle-container .toggle-body{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#8f929e;line-height:1}:host .toggle-container .toggle-body:active{background-color:#a6b9cb}:host .toggle-container .toggle-body-wrapper{display:flex;flex-direction:column}:host .toggle-container .toggle-body i{height:12px;width:12px;background:#fff;display:inline-block;border-radius:100px;margin-top:2px;margin-left:1.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;pointer-events:none}:host .toggle-title{line-height:22px}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { id: [{
             type: Input
+        }], hostId: [{
+            type: HostBinding,
+            args: ['attr.id']
         }], toggleTitle: [{
             type: Input
         }], toggleTitleRight: [{
@@ -11086,7 +11117,7 @@ function DialogModalWrapperComponent_form_7_div_2_dr_select_3_Template(rf, ctx)
 } if (rf & 2) {
     const field_r11 = i0.ɵɵnextContext().$implicit;
     const ctx_r13 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("searchable", ctx_r13.dialogData.searchable)("clearable", ctx_r13.dialogData.clearable)("formControlName", field_r11.name)("bindLabel", field_r11.bindLabel || null)("bindValue", field_r11.bindValue || null)("selectedItem", field_r11.default)("items", field_r11.items || i0.ɵɵpipeBind1(1, 11, field_r11.items$))("loading", i0.ɵɵpipeBind1(2, 13, ctx_r13.fieldsItemsLoading[field_r11.name]))("required", true)("placeholder", field_r11.placeholder);
+    i0.ɵɵproperty("searchable", ctx_r13.dialogData.searchable)("clearable", ctx_r13.dialogData.clearable)("formControlName", field_r11.name)("addTag", field_r11.addTag)("bindLabel", field_r11.bindLabel || null)("bindValue", field_r11.bindValue || null)("selectedItem", field_r11.default)("items", field_r11.items || i0.ɵɵpipeBind1(1, 12, field_r11.items$))("loading", i0.ɵɵpipeBind1(2, 14, ctx_r13.fieldsItemsLoading[field_r11.name]))("required", true)("placeholder", field_r11.placeholder);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r13.dialogData == null ? null : ctx_r13.dialogData.footerTemplateData);
 } }
@@ -11146,7 +11177,7 @@ function DialogModalWrapperComponent_form_7_div_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵtemplate(1, DialogModalWrapperComponent_form_7_div_2_label_1_Template, 2, 2, "label", 17);
     i0.ɵɵelementStart(2, "div", 18);
-    i0.ɵɵtemplate(3, DialogModalWrapperComponent_form_7_div_2_dr_select_3_Template, 4, 15, "dr-select", 19);
+    i0.ɵɵtemplate(3, DialogModalWrapperComponent_form_7_div_2_dr_select_3_Template, 4, 16, "dr-select", 19);
     i0.ɵɵtemplate(4, DialogModalWrapperComponent_form_7_div_2_dr_input_4_Template, 1, 2, "dr-input", 20);
     i0.ɵɵtemplate(5, DialogModalWrapperComponent_form_7_div_2_dr_date_picker_5_Template, 1, 3, "dr-date-picker", 21);
     i0.ɵɵtemplate(6, DialogModalWrapperComponent_form_7_div_2_dr_checkbox_6_Template, 2, 2, "dr-checkbox", 22);
@@ -11205,7 +11236,7 @@ function DialogModalWrapperComponent_div_9_dr_button_1_Template(rf, ctx) { if (r
 function DialogModalWrapperComponent_div_9_dr_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r40 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "dr-button", 41);
-    i0.ɵɵlistener("click", function DialogModalWrapperComponent_div_9_dr_button_2_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r40); const ctx_r39 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r39.closeDialog()); });
+    i0.ɵɵlistener("click", function DialogModalWrapperComponent_div_9_dr_button_2_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r40); const ctx_r39 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r39.onCancel()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -11293,6 +11324,12 @@ class DialogModalWrapperComponent {
     onDecline() {
         this.dialogRef.close(undefined);
     }
+    onCancel() {
+        const functions = this.dialogData?.cancelButton?.functions;
+        if (functions)
+            functions();
+        this.dialogRef.close(false);
+    }
     footerAction() {
         this.dialogData.footerTemplateData.action(this.form.value);
     }
@@ -11306,7 +11343,7 @@ class DialogModalWrapperComponent {
     /** @nocollapse */ static { this.ɵfac = function DialogModalWrapperComponent_Factory(t) { return new (t || DialogModalWrapperComponent)(i0.ɵɵdirectiveInject(i1$6.MatLegacyDialogRef), i0.ɵɵdirectiveInject(MAT_LEGACY_DIALOG_DATA)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DialogModalWrapperComponent, selectors: [["dr-dialog-modal-wrapper"]], hostVars: 2, hostBindings: function DialogModalWrapperComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.class);
-        } }, decls: 10, vars: 6, consts: [["header", "", 1, "header-dialog"], ["data-test", "modalTitle", 1, "title-dialog"], ["class", "title-dialog__icon", "data-test", "dialogTitleIcon", 3, "class", "click", 4, "ngIf"], [1, "title-dialog__text"], ["class", "dr-icon-exit icon-close", "data-test", "xBtn", 3, "click", 4, "ngIf"], ["class", "content-dialog", 3, "innerHTML", 4, "ngIf"], ["class", "dr-smart-from", 3, "formGroup", 4, "ngIf"], ["footer", "", 1, "footer-dialog"], ["class", "buttons-wrapper", 4, "ngIf"], ["data-test", "dialogTitleIcon", 1, "title-dialog__icon", 3, "click"], ["data-test", "xBtn", 1, "dr-icon-exit", "icon-close", 3, "click"], [1, "content-dialog", 3, "innerHTML"], [1, "content-anchor"], ["content", ""], [1, "dr-smart-from", 3, "formGroup"], ["class", "dr-smart-form_group", 3, "class", "ngStyle", 4, "ngFor", "ngForOf"], [1, "dr-smart-form_group", 3, "ngStyle"], ["class", "label p-0 d-flex align-items-center", 3, "ngClass", 4, "ngIf"], [1, "input-group", "p-0", 3, "ngClass"], [3, "searchable", "clearable", "formControlName", "bindLabel", "bindValue", "selectedItem", "items", "loading", "required", "placeholder", 4, "ngIf"], ["data-test", "modalInput", "class", "form-control", 3, "formControlName", "placeholder", 4, "ngIf"], [3, "formControlName", "format", "placeholder", 4, "ngIf"], [3, "formControlName", 4, "ngIf"], ["class", "form-field-error-alert", 4, "ngIf"], ["class", "form-error-alert", 4, "ngIf"], [1, "label", "p-0", "d-flex", "align-items-center", 3, "ngClass"], [3, "searchable", "clearable", "formControlName", "bindLabel", "bindValue", "selectedItem", "items", "loading", "required", "placeholder"], [4, "ngIf"], ["optionFooterTemplate", ""], [1, "dr-select-footer__btn", 3, "click"], [3, "class", 4, "ngIf"], ["data-test", "modalInput", 1, "form-control", 3, "formControlName", "placeholder"], [3, "formControlName", "format", "placeholder"], [3, "formControlName"], [1, "form-field-error-alert"], [1, "form-error-alert"], [1, "buttons-wrapper"], ["class", "buttons-wrapper--custom-btn", "data-test", "declineBtn", 3, "theme", "click", 4, "ngIf"], ["data-test", "modalCloseBtn", 3, "theme", "click", 4, "ngIf"], ["data-test", "modalAddBtn", 3, "theme", "isLoading", "disabled", "click", 4, "ngIf"], ["data-test", "declineBtn", 1, "buttons-wrapper--custom-btn", 3, "theme", "click"], ["data-test", "modalCloseBtn", 3, "theme", "click"], ["data-test", "modalAddBtn", 3, "theme", "isLoading", "disabled", "click"]], template: function DialogModalWrapperComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 10, vars: 6, consts: [["header", "", 1, "header-dialog"], ["data-test", "modalTitle", 1, "title-dialog"], ["class", "title-dialog__icon", "data-test", "dialogTitleIcon", 3, "class", "click", 4, "ngIf"], [1, "title-dialog__text"], ["class", "dr-icon-exit icon-close", "data-test", "xBtn", 3, "click", 4, "ngIf"], ["class", "content-dialog", 3, "innerHTML", 4, "ngIf"], ["class", "dr-smart-from", 3, "formGroup", 4, "ngIf"], ["footer", "", 1, "footer-dialog"], ["class", "buttons-wrapper", 4, "ngIf"], ["data-test", "dialogTitleIcon", 1, "title-dialog__icon", 3, "click"], ["data-test", "xBtn", 1, "dr-icon-exit", "icon-close", 3, "click"], [1, "content-dialog", 3, "innerHTML"], [1, "content-anchor"], ["content", ""], [1, "dr-smart-from", 3, "formGroup"], ["class", "dr-smart-form_group", 3, "class", "ngStyle", 4, "ngFor", "ngForOf"], [1, "dr-smart-form_group", 3, "ngStyle"], ["class", "label p-0 d-flex align-items-center", 3, "ngClass", 4, "ngIf"], [1, "input-group", "p-0", 3, "ngClass"], [3, "searchable", "clearable", "formControlName", "addTag", "bindLabel", "bindValue", "selectedItem", "items", "loading", "required", "placeholder", 4, "ngIf"], ["data-test", "modalInput", "class", "form-control", 3, "formControlName", "placeholder", 4, "ngIf"], [3, "formControlName", "format", "placeholder", 4, "ngIf"], [3, "formControlName", 4, "ngIf"], ["class", "form-field-error-alert", 4, "ngIf"], ["class", "form-error-alert", 4, "ngIf"], [1, "label", "p-0", "d-flex", "align-items-center", 3, "ngClass"], [3, "searchable", "clearable", "formControlName", "addTag", "bindLabel", "bindValue", "selectedItem", "items", "loading", "required", "placeholder"], [4, "ngIf"], ["optionFooterTemplate", ""], [1, "dr-select-footer__btn", 3, "click"], [3, "class", 4, "ngIf"], ["data-test", "modalInput", 1, "form-control", 3, "formControlName", "placeholder"], [3, "formControlName", "format", "placeholder"], [3, "formControlName"], [1, "form-field-error-alert"], [1, "form-error-alert"], [1, "buttons-wrapper"], ["class", "buttons-wrapper--custom-btn", "data-test", "declineBtn", 3, "theme", "click", 4, "ngIf"], ["data-test", "modalCloseBtn", 3, "theme", "click", 4, "ngIf"], ["data-test", "modalAddBtn", 3, "theme", "isLoading", "disabled", "click", 4, "ngIf"], ["data-test", "declineBtn", 1, "buttons-wrapper--custom-btn", 3, "theme", "click"], ["data-test", "modalCloseBtn", 3, "theme", "click"], ["data-test", "modalAddBtn", 3, "theme", "isLoading", "disabled", "click"]], template: function DialogModalWrapperComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "h1", 1);
             i0.ɵɵtemplate(2, DialogModalWrapperComponent_i_2_Template, 1, 2, "i", 2);
             i0.ɵɵelementStart(3, "span", 3);
@@ -11336,7 +11373,7 @@ class DialogModalWrapperComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogModalWrapperComponent, [{
         type: Component,
-        args: [{ selector: 'dr-dialog-modal-wrapper', template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i\n            *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 *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\" data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\" [innerHTML]=\"dialogData.content\">\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\n            *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\n                *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\"\n                >{{ field.label }}</label\n            >\n            <div\n                class=\"input-group p-0\"\n                [ngClass]=\"{\n                    'col-md-10': field.label && !field.isLabelFullWidth,\n                    'col-md-12': !field.label || field.isLabelFullWidth,\n                }\">\n                <dr-select\n                    *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                    [loading]=\"fieldsItemsLoading[field.name] | 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\" class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}\n                        </button>\n                    </ng-template>\n                </dr-select>\n                <dr-input\n                    *ngIf=\"field.type === dialogFieldType.INPUT\"\n                    data-test=\"modalInput\"\n                    class=\"form-control\"\n                    [formControlName]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker\n                    *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\n                    class=\"form-field-error-alert\"\n                    *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\" *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\n            (click)=\"onDecline()\"\n            *ngIf=\"dialogData.customButton\"\n            [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n            class=\"buttons-wrapper--custom-btn\"\n            data-test=\"declineBtn\"\n            >{{ dialogData.customButton.label }}</dr-button\n        >\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\" [theme]=\"'secondary'\">{{\n            dialogData.cancelButton.label\n        }}</dr-button>\n        <dr-button\n            *ngIf=\"dialogData.acceptButton\"\n            data-test=\"modalAddBtn\"\n            (click)=\"onAccept()\"\n            [theme]=\"'primary'\"\n            [isLoading]=\"isLoading\"\n            [disabled]=\"form.invalid\"\n            >{{ dialogData.acceptButton.label }}</dr-button\n        >\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{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog>.icon-close{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.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;overflow:auto}.icon-close{color:#6d6e6f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.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 #dfe0e3}.buttons-wrapper{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper dr-button:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn{margin-right:auto}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.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\n            *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 *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\" data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\" [innerHTML]=\"dialogData.content\">\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\n            *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\n                *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\"\n                >{{ field.label }}</label\n            >\n            <div\n                class=\"input-group p-0\"\n                [ngClass]=\"{\n                    'col-md-10': field.label && !field.isLabelFullWidth,\n                    'col-md-12': !field.label || field.isLabelFullWidth,\n                }\">\n                <dr-select\n                    *ngIf=\"field.type === dialogFieldType.SELECT\"\n                    [searchable]=\"dialogData.searchable\"\n                    [clearable]=\"dialogData.clearable\"\n                    [formControlName]=\"field.name\"\n                    [addTag]=\"field.addTag\"\n                    [bindLabel]=\"field.bindLabel || null\"\n                    [bindValue]=\"field.bindValue || null\"\n                    [selectedItem]=\"field.default\"\n                    [items]=\"field.items || (field.items$ | async)\"\n                    [loading]=\"fieldsItemsLoading[field.name] | 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\" class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}\n                        </button>\n                    </ng-template>\n                </dr-select>\n                <dr-input\n                    *ngIf=\"field.type === dialogFieldType.INPUT\"\n                    data-test=\"modalInput\"\n                    class=\"form-control\"\n                    [formControlName]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker\n                    *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\n                    class=\"form-field-error-alert\"\n                    *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\" *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\n            (click)=\"onDecline()\"\n            *ngIf=\"dialogData.customButton\"\n            [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n            class=\"buttons-wrapper--custom-btn\"\n            data-test=\"declineBtn\"\n            >{{ dialogData.customButton.label }}</dr-button\n        >\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"onCancel()\" [theme]=\"'secondary'\">{{\n            dialogData.cancelButton.label\n        }}</dr-button>\n        <dr-button\n            *ngIf=\"dialogData.acceptButton\"\n            data-test=\"modalAddBtn\"\n            (click)=\"onAccept()\"\n            [theme]=\"'primary'\"\n            [isLoading]=\"isLoading\"\n            [disabled]=\"form.invalid\"\n            >{{ dialogData.acceptButton.label }}</dr-button\n        >\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{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog>.icon-close{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.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;overflow:auto}.icon-close{color:#6d6e6f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.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 #dfe0e3}.buttons-wrapper{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper dr-button:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn{margin-right:auto}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.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"] }]
     }], function () { return [{ type: i1$6.MatLegacyDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_LEGACY_DIALOG_DATA]