@datarailsshared/datarailsshared 1.4.81 → 1.4.84

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('moment'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/button-toggle'), require('@ng-select/ng-select'), require('@angular/material/tooltip'), require('@angular/material/tabs')) :
-    typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'moment', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/button-toggle', '@ng-select/ng-select', '@angular/material/tooltip', '@angular/material/tabs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.momentImported, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.buttonToggle, global.ngSelect, global.ng.material.tooltip, global.ng.material.tabs));
-})(this, (function (exports, i0, forms, core, materialMomentAdapter, momentImported, common, rxjs, operators, animations, i1, portal, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip, tabs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('moment'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('lodash'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/button-toggle'), require('@ng-select/ng-select'), require('@angular/material/tooltip'), require('@angular/material/tabs')) :
+    typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'moment', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/dialog', 'lodash', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/button-toggle', '@ng-select/ng-select', '@angular/material/tooltip', '@angular/material/tabs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.momentImported, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.dialog, global._, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.buttonToggle, global.ngSelect, global.ng.material.tooltip, global.ng.material.tabs));
+})(this, (function (exports, i0, forms, core, materialMomentAdapter, momentImported, common, rxjs, operators, animations, i1, portal, i1$1, _, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip, tabs) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -25,6 +25,8 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var momentImported__namespace = /*#__PURE__*/_interopNamespace(momentImported);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var ___namespace = /*#__PURE__*/_interopNamespace(_);
 
     // import {*} from ""
     var DateTagComponent = /** @class */ (function () {
@@ -598,7 +600,7 @@
             monthYearA11yLabel: "MMMM YYYY"
         },
     };
-    var ɵ0$5 = MONTH_FORMATS;
+    var ɵ0$6 = MONTH_FORMATS;
     var MonthTagComponent = /** @class */ (function (_super) {
         __extends(MonthTagComponent, _super);
         function MonthTagComponent() {
@@ -660,7 +662,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$5 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$6 },
                     ]
                 },] }
     ];
@@ -795,7 +797,7 @@
             monthYearA11yLabel: "MMMM YYYY"
         },
     };
-    var ɵ0$4 = WEEK_FORMATS;
+    var ɵ0$5 = WEEK_FORMATS;
     var WeekTagComponent = /** @class */ (function (_super) {
         __extends(WeekTagComponent, _super);
         function WeekTagComponent() {
@@ -895,7 +897,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$4 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$5 },
                     ]
                 },] }
     ];
@@ -917,7 +919,7 @@
             monthYearA11yLabel: "MMMM YYYY"
         },
     };
-    var ɵ0$3 = YEAR_FORMATS;
+    var ɵ0$4 = YEAR_FORMATS;
     var YearTagComponent = /** @class */ (function (_super) {
         __extends(YearTagComponent, _super);
         function YearTagComponent() {
@@ -985,7 +987,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$3 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$4 },
                     ]
                 },] }
     ];
@@ -1101,7 +1103,7 @@
             monthYearA11yLabel: "MMMM YYYY"
         },
     };
-    var ɵ0$2 = DAY_FORMATS;
+    var ɵ0$3 = DAY_FORMATS;
     var DayTagComponent = /** @class */ (function (_super) {
         __extends(DayTagComponent, _super);
         function DayTagComponent() {
@@ -1157,7 +1159,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$2 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$3 },
                     ]
                 },] }
     ];
@@ -3577,6 +3579,227 @@
         label: [{ type: i0.Input }]
     };
 
+    var DialogWrapperComponent = /** @class */ (function () {
+        function DialogWrapperComponent(dialogRef, dialogService, cdr, componentFactoryResolver, dialogData) {
+            var _a, _b, _c, _d;
+            this.dialogRef = dialogRef;
+            this.dialogService = dialogService;
+            this.cdr = cdr;
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.dialogData = dialogData;
+            this.class = ((_b = (_a = this.dialogData) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.noThemeSizeClass) ? null : ((_d = (_c = this.dialogData) === null || _c === void 0 ? void 0 : _c.theme) === null || _d === void 0 ? void 0 : _d.themeSize) || 'medium-modal';
+            this.saving$ = new rxjs.BehaviorSubject(false);
+            this.destroy$ = new rxjs.Subject();
+        }
+        DialogWrapperComponent.prototype.ngAfterViewInit = function () {
+            if (!this.dialogData.child) {
+                return new Error('Expected componentTypeChild');
+            }
+            var componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.dialogData.child);
+            this.childComponent = this.content.createComponent(componentFactory).instance;
+            this.childComponent.closeDialog = this.closeDialog.bind(this);
+            this.childComponent.onAcceptDialog = this.onAcceptDialog.bind(this);
+            // pass data to component child
+            if (this.dialogData.childData) {
+                ___namespace.assign(this.childComponent, this.dialogData.childData);
+            }
+            // call component child init func - looks like double init
+            // if (this.childComponent.ngOnInit) {
+            //   this.childComponent.ngOnInit();
+            // }
+            this.cdr.detectChanges();
+        };
+        DialogWrapperComponent.prototype.closeDialog = function (data) {
+            this.dialogRef.close(data || false);
+        };
+        DialogWrapperComponent.prototype.onDecline = function () {
+            this.dialogRef.close(undefined);
+        };
+        DialogWrapperComponent.prototype.onAcceptDialog = function (data) {
+            var _this = this;
+            if (!this.childComponent) {
+                this.dialogRef.close(data || true);
+                return;
+            }
+            var funcName = this.dialogData.acceptButton.functions;
+            if (this.childComponent[funcName])
+                this.childComponent[funcName]();
+            var loadFuncName = this.dialogData.acceptButton.loading;
+            if (this.childComponent[loadFuncName])
+                this.isLoading = this.childComponent[loadFuncName]();
+            if (this.dialogData.confirmFn) {
+                this.saving$.next(true);
+                this.dialogData.confirmFn().pipe(operators.takeUntil(this.destroy$), operators.catchError(function (error) { return _this.dialogService.throwErr(error, _this.saving$); })).subscribe(function () {
+                    _this.saving$.next(false);
+                    _this.dialogRef.close(data || true);
+                });
+            }
+            if (this.childComponent && !this.childComponent[funcName]) {
+                this.dialogRef.close(data || true);
+                return;
+            }
+        };
+        DialogWrapperComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next(null);
+            this.destroy$.complete();
+        };
+        return DialogWrapperComponent;
+    }());
+    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"]
+                },] }
+    ];
+    DialogWrapperComponent.ctorParameters = function () { return [
+        { type: i1$1.MatDialogRef },
+        { type: DialogService },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i1$1.MAT_DIALOG_DATA,] }] }
+    ]; };
+    DialogWrapperComponent.propDecorators = {
+        content: [{ type: i0.ViewChild, args: ['content', { read: i0.ViewContainerRef },] }],
+        class: [{ type: i0.HostBinding, args: ['class',] }]
+    };
+
+    var DialogModalWrapperComponent = /** @class */ (function () {
+        function DialogModalWrapperComponent(dialogRef, dialogService, dialogData) {
+            var _a, _b;
+            this.dialogRef = dialogRef;
+            this.dialogService = dialogService;
+            this.dialogData = dialogData;
+            this.class = (_b = (_a = this === null || this === void 0 ? void 0 : this.dialogData) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.themeSize;
+            this.saving$ = new rxjs.BehaviorSubject(false);
+            this.isLoading = false;
+            this.showServerErrorMessage = false;
+            this.destroy$ = new rxjs.Subject();
+        }
+        DialogModalWrapperComponent.prototype.ngOnInit = function () {
+            if (this.dialogData.fields) {
+                this.form = new forms.FormGroup(this.dialogData.fields.reduce(function (accumulator, currentValue) {
+                    var currentFormControl = {};
+                    currentFormControl[currentValue.name] = new forms.FormControl(currentValue.default || null, currentValue.validators || []);
+                    return Object.assign(accumulator, currentFormControl);
+                }, {}));
+            }
+        };
+        DialogModalWrapperComponent.prototype.onAccept = function () {
+            var _this = this;
+            if (!this.dialogData.confirmFn)
+                return this.dialogRef.close(this.form.value || true);
+            this.isLoading = true;
+            this.saving$.next(true);
+            this.dialogData.confirmFn(this.form.value)
+                .pipe(operators.takeUntil(this.destroy$), operators.catchError(function (err) {
+                _this.showServerErrorMessage = true;
+                _this.isLoading = false;
+                return _this.dialogService.throwErr(err, _this.saving$);
+            }))
+                .subscribe(function () {
+                _this.saving$.next(false);
+                _this.dialogRef.close(_this.form.value || true);
+            });
+        };
+        DialogModalWrapperComponent.prototype.footerAction = function () {
+            this.dialogData.footerTemplateData.action(this.form.value);
+        };
+        DialogModalWrapperComponent.prototype.closeDialog = function () {
+            this.dialogRef.close(false);
+        };
+        DialogModalWrapperComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next(null);
+            this.destroy$.complete();
+        };
+        return DialogModalWrapperComponent;
+    }());
+    DialogModalWrapperComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-dialog-modal-wrapper',
+                    template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">{{dialogData.title}}</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=\"dr-smart-form_wrapper\">\n        <div *ngFor=\"let field of dialogData.fields\" class=\"dr-smart-form_group\"\n             [ngStyle]=\"{'display': field.isLabelFullWidth ? 'block' : 'flex'}\">\n            <label *ngIf=\"field.label\" [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 === '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>\n                        <button (click)=\"footerAction()\" 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 === 'input'\" data-test=\"modalInput\" class=\"form-control\"\n                          [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\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{min-height:188px;max-height:467px;min-width:632px;max-width:632px}.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{color:#151b3f;position:static;font-weight:bold;font-size:18px;line-height:24px}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px}.icon-close{color:#51566f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:500;line-height:22px;padding:16px 32px 22px}.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-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"]
+                },] }
+    ];
+    DialogModalWrapperComponent.ctorParameters = function () { return [
+        { type: i1$1.MatDialogRef },
+        { type: DialogService },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i1$1.MAT_DIALOG_DATA,] }] }
+    ]; };
+    DialogModalWrapperComponent.propDecorators = {
+        class: [{ type: i0.HostBinding, args: ['class',] }]
+    };
+
+    var DEFAULT_PANE_CLASS_NAME = 'wrapper-dialog';
+    var DEFAULT_CONFIRM_THEME = { themeSize: 'small-modal' };
+    var DialogService = /** @class */ (function () {
+        function DialogService(dialog) {
+            this.dialog = dialog;
+        }
+        /**
+         * Function to open modal with custom form
+         */
+        DialogService.prototype.openDialogWrapper = function (componentTypeChild, dialogData, componentTypeWrapper) {
+            if (!componentTypeWrapper)
+                componentTypeWrapper = DialogWrapperComponent;
+            dialogData.data.child = componentTypeChild;
+            if (dialogData.panelClass instanceof Array) {
+                dialogData.panelClass.push(DEFAULT_PANE_CLASS_NAME);
+            }
+            else {
+                dialogData.panelClass = [dialogData.panelClass || '', DEFAULT_PANE_CLASS_NAME];
+            }
+            this.wrapperComponent = this.openDialog(componentTypeWrapper, dialogData);
+            return this.wrapperComponent;
+        };
+        /**
+         * Function to open confirmation modal
+         */
+        DialogService.prototype.openConfirmDialog = function (confirmDialogData) {
+            var dialogData = { panelClass: DEFAULT_PANE_CLASS_NAME, data: null };
+            Object.assign(dialogData, { data: confirmDialogData });
+            if (!dialogData.data.theme)
+                dialogData.data.theme = DEFAULT_CONFIRM_THEME;
+            dialogData.data.theme.isConfirmation = true;
+            return this.openDialog(DialogWrapperComponent, dialogData);
+        };
+        /**
+         * Function to open confirmation modal with inputs
+         */
+        DialogService.prototype.openConfirmDialogModal = function (confirmDialogData) {
+            var dialogData = { panelClass: DEFAULT_PANE_CLASS_NAME, data: null };
+            Object.assign(dialogData, { data: confirmDialogData });
+            if (!dialogData.data.theme)
+                dialogData.data.theme = DEFAULT_CONFIRM_THEME;
+            return this.openDialog(DialogModalWrapperComponent, dialogData);
+        };
+        DialogService.prototype.close = function (params) {
+            this.wrapperComponent.close(params);
+        };
+        DialogService.prototype.changeDialogThemeSize = function (theme) {
+            this.wrapperComponent.componentInstance.class = theme;
+        };
+        DialogService.prototype.openDialog = function (componentType, dialogData) {
+            return this.dialog.open(componentType, dialogData);
+        };
+        DialogService.prototype.throwErr = function (err, load) {
+            if (load) {
+                load.next(false);
+            }
+            throw err;
+        };
+        return DialogService;
+    }());
+    DialogService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DialogService_Factory() { return new DialogService(i0__namespace.ɵɵinject(i1__namespace$1.MatDialog)); }, token: DialogService, providedIn: "root" });
+    DialogService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    DialogService.ctorParameters = function () { return [
+        { type: i1$1.MatDialog }
+    ]; };
+
     exports.TooltipPosition = void 0;
     (function (TooltipPosition) {
         TooltipPosition["TOP"] = "top";
@@ -3593,6 +3816,27 @@
         TooltipPosition["LEFT_BOTTOM"] = "left-bottom";
     })(exports.TooltipPosition || (exports.TooltipPosition = {}));
 
+    exports.DIALOG_SIZE = void 0;
+    (function (DIALOG_SIZE) {
+        DIALOG_SIZE["SMALL"] = "small-modal";
+        DIALOG_SIZE["MEDIUM"] = "medium-modal";
+        DIALOG_SIZE["MEDIUM_LARGE"] = "medium-large-modal";
+        DIALOG_SIZE["LARGE"] = "large-modal";
+        DIALOG_SIZE["X_LARGE"] = "xl-modal";
+        DIALOG_SIZE["X_CUSTOM_LARGE"] = "xl-custom-modal";
+    })(exports.DIALOG_SIZE || (exports.DIALOG_SIZE = {}));
+    exports.DIALOG_BUTTON_LABEL = void 0;
+    (function (DIALOG_BUTTON_LABEL) {
+        DIALOG_BUTTON_LABEL["SAVE"] = "Save";
+        DIALOG_BUTTON_LABEL["CANCEL"] = "Cancel";
+        DIALOG_BUTTON_LABEL["CLOSE"] = "Close";
+    })(exports.DIALOG_BUTTON_LABEL || (exports.DIALOG_BUTTON_LABEL = {}));
+    exports.DIALOG_FIELD_TYPE = void 0;
+    (function (DIALOG_FIELD_TYPE) {
+        DIALOG_FIELD_TYPE["INPUT"] = "input";
+        DIALOG_FIELD_TYPE["SELECT"] = "select";
+    })(exports.DIALOG_FIELD_TYPE || (exports.DIALOG_FIELD_TYPE = {}));
+
     var DrModelDebounceChangeDirective = /** @class */ (function () {
         function DrModelDebounceChangeDirective(ngModel) {
             this.ngModel = ngModel;
@@ -3706,7 +3950,7 @@
         AnyTagComponent,
         YearTagComponent,
         ForecastTagComponent];
-    var ɵ0$1 = { useUtc: true };
+    var ɵ0$2 = { useUtc: true };
     var DateTagModule = /** @class */ (function () {
         function DateTagModule() {
         }
@@ -3727,7 +3971,7 @@
                     ],
                     exports: components$3,
                     providers: [
-                        { provide: materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0$1 }
+                        { provide: materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0$2 }
                     ],
                     declarations: components$3,
                 },] }
@@ -4011,7 +4255,7 @@
 
     var moment = require('moment');
     var noop = function () { };
-    var ɵ0 = noop;
+    var ɵ0$1 = noop;
     var DrDatePickerComponent = /** @class */ (function () {
         function DrDatePickerComponent(cdr, dateAdapter, datePickerService) {
             var _this = this;
@@ -4714,12 +4958,12 @@
         stepper: [{ type: i0.ViewChild, args: ['stepper', { read: i0.ElementRef },] }]
     };
 
-    var StepperModule = /** @class */ (function () {
-        function StepperModule() {
+    var DrStepperModule = /** @class */ (function () {
+        function DrStepperModule() {
         }
-        return StepperModule;
+        return DrStepperModule;
     }());
-    StepperModule.decorators = [
+    DrStepperModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [StepperComponent],
                     imports: [
@@ -4730,6 +4974,31 @@
                 },] }
     ];
 
+    var ɵ0 = {}, ɵ1 = {};
+    var DrDialogModule = /** @class */ (function () {
+        function DrDialogModule() {
+        }
+        return DrDialogModule;
+    }());
+    DrDialogModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [DialogWrapperComponent, DialogModalWrapperComponent],
+                    imports: [
+                        common.CommonModule,
+                        i1$1.MatDialogModule,
+                        DrInputsModule,
+                        forms.ReactiveFormsModule,
+                        DrTooltipModule
+                    ],
+                    exports: [DialogWrapperComponent, DialogModalWrapperComponent],
+                    providers: [
+                        { provide: i1$1.MatDialogRef, useValue: ɵ0 },
+                        { provide: i1$1.MAT_DIALOG_DATA, useValue: ɵ1 },
+                        DialogService
+                    ]
+                },] }
+    ];
+
     /* components */
 
     /**
@@ -4742,6 +5011,7 @@
     exports.DateTagComponent = DateTagComponent;
     exports.DateTagModule = DateTagModule;
     exports.DayTagComponent = DayTagComponent;
+    exports.DialogService = DialogService;
     exports.DrAccordionComponent = DrAccordionComponent;
     exports.DrAccordionItemBodyComponent = DrAccordionItemBodyComponent;
     exports.DrAccordionItemComponent = DrAccordionItemComponent;
@@ -4751,6 +5021,7 @@
     exports.DrAvatarModule = DrAvatarModule;
     exports.DrAvatarPipe = DrAvatarPipe;
     exports.DrButtonComponent = DrButtonComponent;
+    exports.DrDialogModule = DrDialogModule;
     exports.DrDropdownComponent = DrDropdownComponent;
     exports.DrDropdownDirective = DrDropdownDirective;
     exports.DrDropdownItemShowPipe = DrDropdownItemShowPipe;
@@ -4776,6 +5047,7 @@
     exports.DrSpinnerComponent = DrSpinnerComponent;
     exports.DrSpinnerDirective = DrSpinnerDirective;
     exports.DrSpinnerModule = DrSpinnerModule;
+    exports.DrStepperModule = DrStepperModule;
     exports.DrTabComponent = DrTabComponent;
     exports.DrTabsComponent = DrTabsComponent;
     exports.DrTabsModule = DrTabsModule;
@@ -4792,7 +5064,6 @@
     exports.QuarterTagComponent = QuarterTagComponent;
     exports.RadioButtonComponent = RadioButtonComponent;
     exports.RadioGroupComponent = RadioGroupComponent;
-    exports.StepperModule = StepperModule;
     exports.TooltipComponent = TooltipComponent;
     exports.WeekTagComponent = WeekTagComponent;
     exports.YearTagComponent = YearTagComponent;
@@ -4809,6 +5080,8 @@
     exports["ɵk"] = TooltipNoBodyComponent;
     exports["ɵl"] = TooltipProcessDefaultComponent;
     exports["ɵm"] = StepperComponent;
+    exports["ɵn"] = DialogWrapperComponent;
+    exports["ɵo"] = DialogModalWrapperComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });