@datarailsshared/datarailsshared 1.4.86 → 1.4.88

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1703,6 +1703,7 @@
             this.items = [];
             this.appendTo = 'body';
             this.disabled = false;
+            this.groupBy = null;
             this.optionWithDescription = false;
             this.keyDownFn = function () { return true; };
             this.change = new i0.EventEmitter();
@@ -1765,13 +1766,13 @@
     DrSelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-select',
-                    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            [disabled]=\"disabled\"\n            [id]=\"id\"\n            [keyDownFn]=\"keyDownFn\"\n            [searchFn]=\"searchFn\"\n            [isOpen]=\"isOpen\"\n            [attr.autofocus]=\"autofocus\"\n            (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n            (open)=\"open.emit($event)\"\n            class=\"dr-select\">\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}\"></ng-container>\n     </ng-template>\n </ng-select>\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            [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)\"\n            class=\"dr-select\">\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}\"></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",
                     providers: [{
                             provide: forms.NG_VALUE_ACCESSOR,
                             useExisting: DrSelectComponent,
                             multi: true
                         }],
-                    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{-webkit-text-decoration-line:underline;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;-webkit-text-decoration-line:none;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!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}: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:#151b3f;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-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:bold}: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:#E5E6EA!important;border:1px solid #E5E6EA!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:#bcbcbc!important}: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:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::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:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#F6F7F8}::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:#F3F7FF;color:#151b3f}::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:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}::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"]
+                    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{-webkit-text-decoration-line:underline;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;-webkit-text-decoration-line:none;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!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}: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:#151b3f;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-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:bold}: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:#E5E6EA!important;border:1px solid #E5E6EA!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:#bcbcbc!important}: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:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::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:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#F6F7F8}::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:#F3F7FF;color:#151b3f}::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:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}::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}::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 .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"]
                 },] }
     ];
     DrSelectComponent.ctorParameters = function () { return [
@@ -1793,6 +1794,7 @@
         loading: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        groupBy: [{ type: i0.Input }],
         optionWithDescription: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
         keyDownFn: [{ type: i0.Input }],
@@ -3648,8 +3650,8 @@
     DialogWrapperComponent.decorators = [
         { type: i0.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        <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 [innerHTML]=\"dialogData.content\"></span>\n        <span #content class=\"dialog-wrapper__content__anchor\"> </span>\n    </div>\n    <div footer class=\"dialog-wrapper__footer\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <div class=\"dialog-wrapper__footer__buttons\">\n            <dr-button *ngIf=\"dialogData.customButton\"\n                       (click)=\"onDecline()\"\n                       [theme]=\"'secondary'\"\n                       [isLoading]=\"isLoading\"\n                       data-test=\"declineBtn\"\n                       [drTooltip]=\"dialogData.tooltips?.custom\">\n                {{dialogData.customButton.label}}\n            </dr-button>\n            <dr-button *ngIf=\"dialogData.cancelButton\"\n                       (click)=\"closeDialog()\"\n                       [theme]=\"'secondary'\"\n                       data-test=\"closeBtn\"\n                       [drTooltip]=\"dialogData.tooltips?.cancel\">\n                {{dialogData.cancelButton.label}}\n            </dr-button>\n            <dr-button *ngIf=\"dialogData.acceptButton\"\n                       (click)=\"onAcceptDialog()\"\n                       [theme]=\"dialogData.acceptButton?.theme || 'primary'\"\n                       [isLoading]=\"isLoading\"\n                       data-test=\"acceptBtn\"\n                       [drTooltip]=\"dialogData.tooltips?.accept\">\n                {{dialogData.acceptButton.label}}\n            </dr-button>\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{min-height:188px;max-height:467px;min-width:632px;max-width:632px}: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__footer{border-top:1px solid #e5e6ea}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}::ng-deep .dialog-wrapper__footer__buttons dr-button:nth-child(n+2){margin-left:12px}\n"]
+                    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 }\">\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 [innerHTML]=\"dialogData.content\"></span>\n        <span #content class=\"dialog-wrapper__content__anchor\"> </span>\n    </div>\n    <div footer class=\"dialog-wrapper__footer\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <div class=\"dialog-wrapper__footer__buttons\">\n            <dr-button *ngIf=\"dialogData.customButton\"\n                       (click)=\"onDecline()\"\n                       [theme]=\"'secondary'\"\n                       [isLoading]=\"isLoading\"\n                       data-test=\"declineBtn\"\n                       [drTooltip]=\"dialogData.tooltips?.custom\">\n                {{dialogData.customButton.label}}\n            </dr-button>\n            <dr-button *ngIf=\"dialogData.cancelButton\"\n                       (click)=\"closeDialog()\"\n                       [theme]=\"'secondary'\"\n                       data-test=\"closeBtn\"\n                       [drTooltip]=\"dialogData.tooltips?.cancel\">\n                {{dialogData.cancelButton.label}}\n            </dr-button>\n            <dr-button *ngIf=\"dialogData.acceptButton\"\n                       (click)=\"onAcceptDialog()\"\n                       [theme]=\"dialogData.acceptButton?.theme || 'primary'\"\n                       [isLoading]=\"isLoading\"\n                       data-test=\"acceptBtn\"\n                       [drTooltip]=\"dialogData.tooltips?.accept\">\n                {{dialogData.acceptButton.label}}\n            </dr-button>\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{min-height:188px;max-height:467px;min-width:632px;max-width:632px}: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__footer{border-top:1px solid #e5e6ea}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}::ng-deep .dialog-wrapper__footer__buttons dr-button:nth-child(n+2){margin-left:12px}\n"]
                 },] }
     ];
     DialogWrapperComponent.ctorParameters = function () { return [