@datarailsshared/datarailsshared 1.4.106 → 1.4.108
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/datarailsshared-datarailsshared.umd.js +36 -28
- package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
- package/datarailsshared-datarailsshared-1.4.108.tgz +0 -0
- package/datarailsshared-datarailsshared.metadata.json +1 -1
- package/esm2015/lib/dr-dialog/components/dialog-modal-wrapper/dialog-modal-wrapper.component.js +6 -4
- package/esm2015/lib/dr-dialog/components/dialog-wrapper/dialog-wrapper.component.js +3 -3
- package/esm2015/lib/dr-dialog/interfaces/dialog-data.js +3 -1
- package/esm2015/lib/dr-inputs/dr-input/dr-input.component.js +4 -1
- package/esm2015/lib/dr-tabs/dr-tabs.component.js +5 -3
- package/fesm2015/datarailsshared-datarailsshared.js +36 -28
- package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
- package/lib/dr-dialog/components/dialog-modal-wrapper/dialog-modal-wrapper.component.d.ts +3 -2
- package/lib/dr-dialog/interfaces/dialog-data.d.ts +8 -2
- package/lib/dr-inputs/dr-input/dr-input.component.d.ts +1 -0
- package/lib/dr-tabs/dr-tabs.component.d.ts +1 -0
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.4.106.tgz +0 -0
|
@@ -1495,6 +1495,7 @@
|
|
|
1495
1495
|
text: 'Save'
|
|
1496
1496
|
};
|
|
1497
1497
|
this.searchHandler = new i0.EventEmitter();
|
|
1498
|
+
this.clearHandler = new i0.EventEmitter();
|
|
1498
1499
|
this.buttonHandler = new i0.EventEmitter();
|
|
1499
1500
|
this.tabindex = -1;
|
|
1500
1501
|
this.onChangeCallback = rxjs.noop;
|
|
@@ -1632,6 +1633,7 @@
|
|
|
1632
1633
|
}
|
|
1633
1634
|
};
|
|
1634
1635
|
DrInputComponent.prototype.onClear = function ($event) {
|
|
1636
|
+
this.clearHandler.emit($event);
|
|
1635
1637
|
$event.preventDefault();
|
|
1636
1638
|
$event.stopPropagation();
|
|
1637
1639
|
this.value = null;
|
|
@@ -1673,6 +1675,7 @@
|
|
|
1673
1675
|
ngModelDebounceChange: [{ type: i0.Output }],
|
|
1674
1676
|
elementClass: [{ type: i0.HostBinding, args: ['class',] }],
|
|
1675
1677
|
searchHandler: [{ type: i0.Output }],
|
|
1678
|
+
clearHandler: [{ type: i0.Output }],
|
|
1676
1679
|
buttonHandler: [{ type: i0.Output }],
|
|
1677
1680
|
prefixIcon: [{ type: i0.ContentChild, args: ['prefix', { static: false },] }],
|
|
1678
1681
|
suffixIcon: [{ type: i0.ContentChild, args: ['suffix', { static: false },] }],
|
|
@@ -3137,6 +3140,7 @@
|
|
|
3137
3140
|
function DrTabsComponent() {
|
|
3138
3141
|
this.selectedTab = 0;
|
|
3139
3142
|
this.noBodyPadding = false;
|
|
3143
|
+
this.noTabLabelsPadding = false;
|
|
3140
3144
|
this.selectedTabChange = new i0.EventEmitter();
|
|
3141
3145
|
}
|
|
3142
3146
|
DrTabsComponent.prototype.selectedIndexChange = function ($event) {
|
|
@@ -3148,8 +3152,8 @@
|
|
|
3148
3152
|
DrTabsComponent.decorators = [
|
|
3149
3153
|
{ type: i0.Component, args: [{
|
|
3150
3154
|
selector: 'dr-tabs',
|
|
3151
|
-
template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n (selectedIndexChange)=\"selectedIndexChange($event)\"\n [class.with-radio]=\"withRadio\"\n [class.vertical]=\"vertical\"\n [class.no-body-padding]=\"noBodyPadding\"\n [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\">\n <ng-container *ngIf=\"withRadio\">\n <ng-template mat-tab-label>\n <dr-radio-button [value]=\"index\"\n [(ngModel)]=\"selectedTab\">\n </dr-radio-button>\n {{tab.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n </mat-tab>\n</mat-tab-group>\n",
|
|
3152
|
-
styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-group{font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #d5dae5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#
|
|
3155
|
+
template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n (selectedIndexChange)=\"selectedIndexChange($event)\"\n [class.with-radio]=\"withRadio\"\n [class.vertical]=\"vertical\"\n [class.no-tab-labels-padding]=\"noTabLabelsPadding\"\n [class.no-body-padding]=\"noBodyPadding\"\n [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\">\n <ng-container *ngIf=\"withRadio\">\n <ng-template mat-tab-label>\n <dr-radio-button [value]=\"index\"\n [(ngModel)]=\"selectedTab\">\n </dr-radio-button>\n {{tab.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n </mat-tab>\n</mat-tab-group>\n",
|
|
3156
|
+
styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-group{font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #d5dae5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#4646ce;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#4646ce!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#f6f7f8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-label-container{border-right:1px solid #d5dae5}:host ::ng-deep .vertical .mat-tab-label-container .mat-tab-labels{flex-direction:column;padding:0}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #d5dae5;margin:0!important;justify-content:flex-start;padding:1rem 2rem;height:40px}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}:host ::ng-deep mat-tab-group.no-body-padding .mat-tab-body-wrapper{padding:0}:host ::ng-deep mat-tab-group.no-tab-labels-padding .mat-tab-labels{padding:0}\n"]
|
|
3153
3157
|
},] }
|
|
3154
3158
|
];
|
|
3155
3159
|
DrTabsComponent.ctorParameters = function () { return []; };
|
|
@@ -3158,6 +3162,7 @@
|
|
|
3158
3162
|
withRadio: [{ type: i0.Input }],
|
|
3159
3163
|
vertical: [{ type: i0.Input }],
|
|
3160
3164
|
noBodyPadding: [{ type: i0.Input }],
|
|
3165
|
+
noTabLabelsPadding: [{ type: i0.Input }],
|
|
3161
3166
|
selectedTabChange: [{ type: i0.Output }],
|
|
3162
3167
|
tabsContentList: [{ type: i0.ContentChildren, args: [DrTabComponent,] }]
|
|
3163
3168
|
};
|
|
@@ -3644,8 +3649,8 @@
|
|
|
3644
3649
|
DialogWrapperComponent.decorators = [
|
|
3645
3650
|
{ type: i0.Component, args: [{
|
|
3646
3651
|
selector: 'dr-dialog-wrapper',
|
|
3647
|
-
template: "<div class=\"dialog-wrapper\"\n [class.dialog-wrapper--confirmation-no-title]=\"dialogData.theme?.isConfirmation && !dialogData.title\">\n <i class=\"dr-icon-exit\" data-test=\"close_btn\" (click)=\"closeDialog()\" *ngIf=\"!dialogData?.hideCloseBtn\"></i>\n\n <div header class=\"dialog-wrapper__header\" *ngIf=\"dialogData.title\">\n <h1 class=\"dialog-wrapper__header__title\" data-test=\"dialogTitle\">{{dialogData.title}}</h1>\n <h1 class=\"dialog-wrapper__header__subtitle\" data-test=\"dialogSubtitle\"\n *ngIf=\"dialogData.subtitle\">{{dialogData.subtitle}}</h1>\n </div>\n <div class=\"dialog-wrapper__content\"\n [class.dialog-wrapper__content--no-padding]=\"dialogData.theme?.contentNoPadding\"\n [ngClass]=\"{'flex-position': dialogData.contentIcon?.class && !childComponent}\">\n <span *ngIf=\"dialogData.contentIcon?.class\" class=\"dialog-wrapper__content__icon\">\n <i [ngClass]=\"dialogData.contentIcon.class\" [style.color]=\"dialogData.contentIcon?.color || 'inherit'\"></i>\n </span>\n <span [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 <
|
|
3648
|
-
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-
|
|
3652
|
+
template: "<div class=\"dialog-wrapper\"\n [class.dialog-wrapper--confirmation-no-title]=\"dialogData.theme?.isConfirmation && !dialogData.title\">\n <i class=\"dr-icon-exit\" data-test=\"close_btn\" (click)=\"closeDialog()\" *ngIf=\"!dialogData?.hideCloseBtn\"></i>\n\n <div header class=\"dialog-wrapper__header\" *ngIf=\"dialogData.title\">\n <h1 class=\"dialog-wrapper__header__title\" data-test=\"dialogTitle\">{{ dialogData.title }}</h1>\n <h1 class=\"dialog-wrapper__header__subtitle\" data-test=\"dialogSubtitle\"\n *ngIf=\"dialogData.subtitle\">{{ dialogData.subtitle }}</h1>\n </div>\n <div class=\"dialog-wrapper__content\"\n [class.dialog-wrapper__content--no-padding]=\"dialogData.theme?.contentNoPadding\"\n [ngClass]=\"{ 'flex-position': dialogData.contentIcon?.class && !childComponent }\">\n <span *ngIf=\"dialogData.contentIcon?.class\" class=\"dialog-wrapper__content__icon\">\n <i [ngClass]=\"dialogData.contentIcon.class\" [style.color]=\"dialogData.contentIcon?.color || 'inherit'\"></i>\n </span>\n <span [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 <span *ngIf=\"dialogData.customButton\"\n class=\"dialog-wrapper__footer__button-wrapper\"\n [drTooltip]=\"dialogData.customButton.isDisabled && dialogData.tooltips?.customDisabled\">\n <dr-button (click)=\"onDecline()\"\n [theme]=\"'secondary'\"\n [isLoading]=\"isLoading\"\n data-test=\"declineBtn\"\n [disabled]=\"dialogData.customButton.isDisabled\"\n [drTooltip]=\"dialogData.tooltips?.custom\">{{ dialogData.customButton.label }}</dr-button>\n </span>\n <span *ngIf=\"dialogData.cancelButton\"\n class=\"dialog-wrapper__footer__button-wrapper\"\n [drTooltip]=\"dialogData.cancelButton.isDisabled && dialogData.tooltips?.cancelDisabled\">\n <dr-button (click)=\"closeDialog()\"\n [theme]=\"'secondary'\"\n data-test=\"closeBtn\"\n [disabled]=\"dialogData.cancelButton.isDisabled\"\n [drTooltip]=\"dialogData.tooltips?.cancel\">{{ dialogData.cancelButton.label }}</dr-button>\n </span>\n <span *ngIf=\"dialogData.acceptButton\"\n class=\"dialog-wrapper__footer__button-wrapper\"\n [drTooltip]=\"dialogData.acceptButton.isDisabled && dialogData.tooltips?.acceptDisabled\">\n <dr-button (click)=\"onAcceptDialog()\"\n [theme]=\"dialogData.acceptButton?.theme || 'primary'\"\n [isLoading]=\"isLoading\"\n data-test=\"acceptBtn\"\n [disabled]=\"dialogData.acceptButton.isDisabled\"\n [drTooltip]=\"dialogData.tooltips?.accept\">{{ dialogData.acceptButton.label }}</dr-button>\n </span>\n </div>\n </div>\n</div>\n",
|
|
3653
|
+
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__button-wrapper:nth-child(n+2){margin-left:12px}\n"]
|
|
3649
3654
|
},] }
|
|
3650
3655
|
];
|
|
3651
3656
|
DialogWrapperComponent.ctorParameters = function () { return [
|
|
@@ -3660,17 +3665,41 @@
|
|
|
3660
3665
|
class: [{ type: i0.HostBinding, args: ['class',] }]
|
|
3661
3666
|
};
|
|
3662
3667
|
|
|
3668
|
+
exports.DIALOG_SIZE = void 0;
|
|
3669
|
+
(function (DIALOG_SIZE) {
|
|
3670
|
+
DIALOG_SIZE["SMALL"] = "small-modal";
|
|
3671
|
+
DIALOG_SIZE["MEDIUM"] = "medium-modal";
|
|
3672
|
+
DIALOG_SIZE["MEDIUM_LARGE"] = "medium-large-modal";
|
|
3673
|
+
DIALOG_SIZE["LARGE"] = "large-modal";
|
|
3674
|
+
DIALOG_SIZE["X_LARGE"] = "xl-modal";
|
|
3675
|
+
DIALOG_SIZE["X_CUSTOM_LARGE"] = "xl-custom-modal";
|
|
3676
|
+
})(exports.DIALOG_SIZE || (exports.DIALOG_SIZE = {}));
|
|
3677
|
+
exports.DIALOG_BUTTON_LABEL = void 0;
|
|
3678
|
+
(function (DIALOG_BUTTON_LABEL) {
|
|
3679
|
+
DIALOG_BUTTON_LABEL["SAVE"] = "Save";
|
|
3680
|
+
DIALOG_BUTTON_LABEL["CANCEL"] = "Cancel";
|
|
3681
|
+
DIALOG_BUTTON_LABEL["CLOSE"] = "Close";
|
|
3682
|
+
})(exports.DIALOG_BUTTON_LABEL || (exports.DIALOG_BUTTON_LABEL = {}));
|
|
3683
|
+
exports.DIALOG_FIELD_TYPE = void 0;
|
|
3684
|
+
(function (DIALOG_FIELD_TYPE) {
|
|
3685
|
+
DIALOG_FIELD_TYPE["INPUT"] = "input";
|
|
3686
|
+
DIALOG_FIELD_TYPE["SELECT"] = "select";
|
|
3687
|
+
DIALOG_FIELD_TYPE["DATE_PICKER"] = "date_picker";
|
|
3688
|
+
DIALOG_FIELD_TYPE["CHECKBOX"] = "checkbox";
|
|
3689
|
+
})(exports.DIALOG_FIELD_TYPE || (exports.DIALOG_FIELD_TYPE = {}));
|
|
3690
|
+
|
|
3663
3691
|
var DialogModalWrapperComponent = /** @class */ (function () {
|
|
3664
3692
|
function DialogModalWrapperComponent(dialogRef, dialogService, dialogData) {
|
|
3665
3693
|
var _a, _b;
|
|
3666
3694
|
this.dialogRef = dialogRef;
|
|
3667
3695
|
this.dialogService = dialogService;
|
|
3668
3696
|
this.dialogData = dialogData;
|
|
3669
|
-
this.
|
|
3697
|
+
this.dialogFieldType = exports.DIALOG_FIELD_TYPE;
|
|
3670
3698
|
this.saving$ = new rxjs.BehaviorSubject(false);
|
|
3671
3699
|
this.isLoading = false;
|
|
3672
3700
|
this.showServerErrorMessage = false;
|
|
3673
3701
|
this.destroy$ = new rxjs.Subject();
|
|
3702
|
+
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;
|
|
3674
3703
|
}
|
|
3675
3704
|
DialogModalWrapperComponent.prototype.ngOnInit = function () {
|
|
3676
3705
|
if (this.dialogData.fields) {
|
|
@@ -3711,8 +3740,8 @@
|
|
|
3711
3740
|
DialogModalWrapperComponent.decorators = [
|
|
3712
3741
|
{ type: i0.Component, args: [{
|
|
3713
3742
|
selector: 'dr-dialog-modal-wrapper',
|
|
3714
|
-
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]=\"{
|
|
3715
|
-
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"]
|
|
3743
|
+
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 && field.type !== dialogFieldType.CHECKBOX\"\n [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n class=\"label p-0 d-flex align-items-center\">{{ field.label }}</label>\n <div class=\"input-group p-0\"\n [ngClass]=\"{ 'col-md-10': field.label && !field.isLabelFullWidth, 'col-md-12': !field.label || field.isLabelFullWidth }\">\n <dr-select *ngIf=\"field.type === dialogFieldType.SELECT\"\n [searchable]=\"dialogData.searchable\"\n [clearable]=\"dialogData.clearable\"\n [formControlName]=\"field.name\"\n [bindLabel]=\"field.bindLabel || null\"\n [bindValue]=\"field.bindValue || null\"\n [selectedItem]=\"field.default\"\n [items]=\"field.items || (field.items$ | async)\"\n [required]=\"true\"\n [placeholder]=\"field.placeholder\">\n <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n <button (click)=\"footerAction(); close();\" class=\"dr-select-footer__btn\">\n <i *ngIf=\"dialogData.footerTemplateData.icon\"\n class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n {{ dialogData.footerTemplateData.label }}</button>\n </ng-template>\n </dr-select>\n <dr-input *ngIf=\"field.type === dialogFieldType.INPUT\" data-test=\"modalInput\" class=\"form-control\"\n [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\n <dr-date-picker *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n [formControlName]=\"field.name\"\n [format]=\"field.datePickerFormat\"\n [placeholder]=\"field.placeholder\"></dr-date-picker>\n <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n {{ field.label }}\n </dr-checkbox>\n <label class=\"form-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",
|
|
3744
|
+
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}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #e5e6ea}.buttons-wrapper{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}.buttons-wrapper dr-button:nth-of-type(2){margin-left:12px}.form-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"]
|
|
3716
3745
|
},] }
|
|
3717
3746
|
];
|
|
3718
3747
|
DialogModalWrapperComponent.ctorParameters = function () { return [
|
|
@@ -3810,27 +3839,6 @@
|
|
|
3810
3839
|
TooltipPosition["LEFT_BOTTOM"] = "left-bottom";
|
|
3811
3840
|
})(exports.TooltipPosition || (exports.TooltipPosition = {}));
|
|
3812
3841
|
|
|
3813
|
-
exports.DIALOG_SIZE = void 0;
|
|
3814
|
-
(function (DIALOG_SIZE) {
|
|
3815
|
-
DIALOG_SIZE["SMALL"] = "small-modal";
|
|
3816
|
-
DIALOG_SIZE["MEDIUM"] = "medium-modal";
|
|
3817
|
-
DIALOG_SIZE["MEDIUM_LARGE"] = "medium-large-modal";
|
|
3818
|
-
DIALOG_SIZE["LARGE"] = "large-modal";
|
|
3819
|
-
DIALOG_SIZE["X_LARGE"] = "xl-modal";
|
|
3820
|
-
DIALOG_SIZE["X_CUSTOM_LARGE"] = "xl-custom-modal";
|
|
3821
|
-
})(exports.DIALOG_SIZE || (exports.DIALOG_SIZE = {}));
|
|
3822
|
-
exports.DIALOG_BUTTON_LABEL = void 0;
|
|
3823
|
-
(function (DIALOG_BUTTON_LABEL) {
|
|
3824
|
-
DIALOG_BUTTON_LABEL["SAVE"] = "Save";
|
|
3825
|
-
DIALOG_BUTTON_LABEL["CANCEL"] = "Cancel";
|
|
3826
|
-
DIALOG_BUTTON_LABEL["CLOSE"] = "Close";
|
|
3827
|
-
})(exports.DIALOG_BUTTON_LABEL || (exports.DIALOG_BUTTON_LABEL = {}));
|
|
3828
|
-
exports.DIALOG_FIELD_TYPE = void 0;
|
|
3829
|
-
(function (DIALOG_FIELD_TYPE) {
|
|
3830
|
-
DIALOG_FIELD_TYPE["INPUT"] = "input";
|
|
3831
|
-
DIALOG_FIELD_TYPE["SELECT"] = "select";
|
|
3832
|
-
})(exports.DIALOG_FIELD_TYPE || (exports.DIALOG_FIELD_TYPE = {}));
|
|
3833
|
-
|
|
3834
3842
|
var DrModelDebounceChangeDirective = /** @class */ (function () {
|
|
3835
3843
|
function DrModelDebounceChangeDirective(ngModel) {
|
|
3836
3844
|
this.ngModel = ngModel;
|