@datarailsshared/datarailsshared 1.4.68-dragons → 1.4.71-rocket
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/assets/styles/img/dr-icon-info.svg +3 -0
- package/bundles/datarailsshared-datarailsshared.umd.js +182 -15
- package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
- package/datarailsshared-datarailsshared-1.4.71-rocket.tgz +0 -0
- package/datarailsshared-datarailsshared.d.ts +5 -0
- package/datarailsshared-datarailsshared.metadata.json +1 -1
- package/esm2015/datarailsshared-datarailsshared.js +6 -1
- package/esm2015/lib/dr-inputs/date-pickers/dr-date-picker/dr-date-picker.component.js +5 -10
- package/esm2015/lib/dr-inputs/date-pickers/dr-date-picker_custom-header/dr-date-picker_custom-header.component.js +2 -3
- package/esm2015/lib/dr-inputs/date-pickers/services/dr-date-picker.service.js +1 -1
- package/esm2015/lib/dr-tooltip/components/tooltip-info/tooltip-info.component.js +18 -0
- package/esm2015/lib/dr-tooltip/components/tooltip-info-simple/tooltip-info-simple.component.js +18 -0
- package/esm2015/lib/dr-tooltip/components/tooltip-no-body/tooltip-no-body.component.js +20 -0
- package/esm2015/lib/dr-tooltip/components/tooltip-process-default/tooltip-process-default.component.js +34 -0
- package/esm2015/lib/dr-tooltip/dr-tooltip.module.js +16 -4
- package/esm2015/lib/dr-tooltip/enums/tooltip-position.enum.js +16 -0
- package/esm2015/lib/dr-tooltip/interfaces/tooltip-component-context.js +2 -0
- package/esm2015/lib/stepper/interfaces/stepper.js +2 -0
- package/esm2015/lib/stepper/stepper.component.js +55 -0
- package/esm2015/lib/stepper/stepper.module.js +17 -0
- package/esm2015/public-api.js +4 -1
- package/fesm2015/datarailsshared-datarailsshared.js +181 -10
- package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
- package/lib/dr-inputs/date-pickers/dr-date-picker/dr-date-picker.component.d.ts +1 -1
- package/lib/dr-inputs/date-pickers/services/dr-date-picker.service.d.ts +2 -3
- package/lib/dr-tooltip/components/tooltip-info/tooltip-info.component.d.ts +5 -0
- package/lib/dr-tooltip/components/tooltip-info-simple/tooltip-info-simple.component.d.ts +5 -0
- package/lib/dr-tooltip/components/tooltip-no-body/tooltip-no-body.component.d.ts +6 -0
- package/lib/dr-tooltip/components/tooltip-process-default/tooltip-process-default.component.d.ts +4 -0
- package/lib/dr-tooltip/enums/tooltip-position.enum.d.ts +14 -0
- package/lib/dr-tooltip/interfaces/tooltip-component-context.d.ts +6 -0
- package/lib/stepper/interfaces/stepper.d.ts +9 -0
- package/lib/stepper/stepper.component.d.ts +19 -0
- package/lib/stepper/stepper.module.d.ts +2 -0
- package/package.json +1 -1
- package/public-api.d.ts +4 -0
- package/datarailsshared-datarailsshared-1.4.68-dragons.tgz +0 -0
|
@@ -2989,6 +2989,22 @@ DrErrorComponent.propDecorators = {
|
|
|
2989
2989
|
label: [{ type: Input }]
|
|
2990
2990
|
};
|
|
2991
2991
|
|
|
2992
|
+
var TooltipPosition;
|
|
2993
|
+
(function (TooltipPosition) {
|
|
2994
|
+
TooltipPosition["TOP"] = "top";
|
|
2995
|
+
TooltipPosition["BOTTOM"] = "bottom";
|
|
2996
|
+
TooltipPosition["LEFT"] = "left";
|
|
2997
|
+
TooltipPosition["RIGHT"] = "right";
|
|
2998
|
+
TooltipPosition["TOP_RIGHT"] = "top-right";
|
|
2999
|
+
TooltipPosition["TOP_LEFT"] = "top-left";
|
|
3000
|
+
TooltipPosition["BOTTOM_RIGHT"] = "bottom-right";
|
|
3001
|
+
TooltipPosition["BOTTOM_LEFT"] = "bottom-left";
|
|
3002
|
+
TooltipPosition["RIGHT_TOP"] = "right-top";
|
|
3003
|
+
TooltipPosition["RIGHT_BOTTOM"] = "right-bottom";
|
|
3004
|
+
TooltipPosition["LEFT_TOP"] = "left-top";
|
|
3005
|
+
TooltipPosition["LEFT_BOTTOM"] = "left-bottom";
|
|
3006
|
+
})(TooltipPosition || (TooltipPosition = {}));
|
|
3007
|
+
|
|
2992
3008
|
class DrModelDebounceChangeDirective {
|
|
2993
3009
|
constructor(ngModel) {
|
|
2994
3010
|
this.ngModel = ngModel;
|
|
@@ -3306,7 +3322,6 @@ class DrDatePickerCustomHeaderComponent {
|
|
|
3306
3322
|
}
|
|
3307
3323
|
});
|
|
3308
3324
|
_calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
|
|
3309
|
-
this.datePickerService.calendarInstance = _calendar;
|
|
3310
3325
|
}
|
|
3311
3326
|
ngOnDestroy() {
|
|
3312
3327
|
this._destroyed.next();
|
|
@@ -3346,7 +3361,7 @@ class DrDatePickerCustomHeaderComponent {
|
|
|
3346
3361
|
const unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
|
|
3347
3362
|
this._calendar.activeDate = unadaptedDate;
|
|
3348
3363
|
this.datePickerService.updatedQuarter$.next(moment$1(unadaptedDate));
|
|
3349
|
-
this.datePickerService.
|
|
3364
|
+
this.datePickerService.calendarInstance.close();
|
|
3350
3365
|
}
|
|
3351
3366
|
pagingClicked(forward) {
|
|
3352
3367
|
this.pagingSetup[this._calendar.currentView] && this.pagingSetup[this._calendar.currentView](forward);
|
|
@@ -3421,7 +3436,7 @@ class DrDatePickerComponent {
|
|
|
3421
3436
|
this.cdr.markForCheck();
|
|
3422
3437
|
}
|
|
3423
3438
|
ngAfterViewInit() {
|
|
3424
|
-
this.datePickerService.
|
|
3439
|
+
this.datePickerService.calendarInstance = this.datePicker;
|
|
3425
3440
|
this.datePicker.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
|
|
3426
3441
|
}
|
|
3427
3442
|
ngOnDestroy() {
|
|
@@ -3453,12 +3468,7 @@ class DrDatePickerComponent {
|
|
|
3453
3468
|
}
|
|
3454
3469
|
}
|
|
3455
3470
|
chosenPeriodHandler(chosenDate, timeframe) {
|
|
3456
|
-
if (this.datePickerService.timeframe ===
|
|
3457
|
-
this.datePickerService.calendarInstance.currentView = CalendarView.FOR_QUARTERS;
|
|
3458
|
-
this.datePickerService.calendarInstance.activeDate = chosenDate;
|
|
3459
|
-
this.cdr.detectChanges();
|
|
3460
|
-
}
|
|
3461
|
-
else if (this.datePickerService.timeframe === timeframe) {
|
|
3471
|
+
if (this.datePickerService.timeframe === timeframe) {
|
|
3462
3472
|
this.setValueFromMoment(chosenDate);
|
|
3463
3473
|
this.datePicker.close();
|
|
3464
3474
|
}
|
|
@@ -3696,6 +3706,98 @@ DrInputsModule.decorators = [
|
|
|
3696
3706
|
},] }
|
|
3697
3707
|
];
|
|
3698
3708
|
|
|
3709
|
+
class TooltipInfoComponent {
|
|
3710
|
+
constructor() {
|
|
3711
|
+
}
|
|
3712
|
+
}
|
|
3713
|
+
TooltipInfoComponent.decorators = [
|
|
3714
|
+
{ type: Component, args: [{
|
|
3715
|
+
selector: 'dr-tooltip-info',
|
|
3716
|
+
template: "<div class=\"tooltip-info\">\n <i *ngIf=\"data?.icon else defaultIcon\" class=\"fa\" [class]=\"data.icon\" [style.fontSize.px]=\"14\"\n [style.margin.px]=\"12\" [style.color]=\"data?.iconColor || '#7B61FF'\"></i>\n <div class=\"tooltip-info-content-wrapper\">\n <div *ngIf=\"data?.title\" class=\"tooltip-info_header\">\n <span>{{data.title}}</span>\n </div>\n <div *ngIf=\"data?.description\" class=\"tooltip-info_description\"\n [class.tooltip-info_description-no-border]=\"!data.title\">\n <ng-container *ngIf=\"!data.title\"></ng-container>\n <span>{{data.description}}</span>\n </div>\n </div>\n</div>\n\n<ng-template #defaultIcon>\n <ng-container *ngIf=\"!data.icon\">\n <div class=\"default-icon\"></div>\n </ng-container>\n</ng-template>\n",
|
|
3717
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3718
|
+
styles: [".tooltip-info{width:316px;display:flex}.tooltip-info-content-wrapper{display:flex;flex-direction:column;padding-top:10px}.tooltip-info_header{padding:0 16px 6px 0;font-weight:bold;font-size:14px;line-height:16px;letter-spacing:.25px;display:flex;justify-content:flex-start}.tooltip-info_header>i{margin-right:10px}.tooltip-info-content-wrapper{padding-top:10px}.tooltip-info_description{display:flex;align-items:flex-start;border-top:1px solid #AEB5BB;padding:12px 10px 10px 0;text-align:left;font-weight:normal;font-size:14px;line-height:22px}.tooltip-info_description-no-border{padding-top:0;border-top:none}.tooltip-info_description>i{margin-right:10px}:host.tooltip-info-medium .tooltip-info{max-width:272px}:host.tooltip-info-medium .tooltip-info-content-wrapper{padding-top:10px}:host.tooltip-info-medium .tooltip-info_header,:host.tooltip-info-medium .tooltip-info_description{min-height:unset;border-top:none;font-size:14px;line-height:22px}:host.tooltip-info-medium .tooltip-info_header{padding:10px 10px 0 0}:host.tooltip-info-medium .tooltip-info_description{padding:10px 12px 10px 0}:host.tooltip-info-medium .tooltip-info .default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22 fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:20px;width:20px;content:\"\"}:host.tooltip-info-small .tooltip-info{width:auto}:host.tooltip-info-small .tooltip-info-content-wrapper{padding-top:10px}:host.tooltip-info-small .tooltip-info_header,:host.tooltip-info-small .tooltip-info_description{min-height:unset;border-top:none;font-size:14px;line-height:22px}:host.tooltip-info-small .tooltip-info_header{padding:0 10px 0 0}:host.tooltip-info-small .tooltip-info_description{padding:0 12px 10px 0}:host.tooltip-info-small .tooltip-info .default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22 fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:20px;width:20px;content:\"\"}.default-icon{position:relative;width:18px;height:18px;margin:10px}.default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22 fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:18px;width:18px;content:\"\"}\n"]
|
|
3719
|
+
},] }
|
|
3720
|
+
];
|
|
3721
|
+
TooltipInfoComponent.ctorParameters = () => [];
|
|
3722
|
+
TooltipInfoComponent.propDecorators = {
|
|
3723
|
+
data: [{ type: Input }]
|
|
3724
|
+
};
|
|
3725
|
+
|
|
3726
|
+
class TooltipInfoSimpleComponent {
|
|
3727
|
+
constructor() {
|
|
3728
|
+
}
|
|
3729
|
+
}
|
|
3730
|
+
TooltipInfoSimpleComponent.decorators = [
|
|
3731
|
+
{ type: Component, args: [{
|
|
3732
|
+
selector: 'dr-tooltip-info-simple',
|
|
3733
|
+
template: "<div class=\"tooltip-info-simple\">\n <div *ngIf=\"context?.title\" class=\"tooltip-info-simple__title\">{{context?.title}}</div>\n <div *ngIf=\"context?.description\" class=\"tooltip-info-simple__description\">{{context?.description}}</div>\n</div>\n",
|
|
3734
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3735
|
+
styles: [".tooltip-info-simple{max-width:250px;font-size:14px;line-height:22px;padding:10px 12px;color:#0c142b}.tooltip-info-simple__title{font-weight:600;overflow:hidden;text-overflow:ellipsis}\n"]
|
|
3736
|
+
},] }
|
|
3737
|
+
];
|
|
3738
|
+
TooltipInfoSimpleComponent.ctorParameters = () => [];
|
|
3739
|
+
TooltipInfoSimpleComponent.propDecorators = {
|
|
3740
|
+
context: [{ type: Input }]
|
|
3741
|
+
};
|
|
3742
|
+
|
|
3743
|
+
class TooltipNoBodyComponent {
|
|
3744
|
+
constructor() {
|
|
3745
|
+
}
|
|
3746
|
+
ngOnInit() {
|
|
3747
|
+
}
|
|
3748
|
+
}
|
|
3749
|
+
TooltipNoBodyComponent.decorators = [
|
|
3750
|
+
{ type: Component, args: [{
|
|
3751
|
+
selector: 'dr-tooltip-no-body',
|
|
3752
|
+
template: "<div class=\"tooltip-bold\" [ngClass]=\"{'tooltip-bold--icon': context?.icon}\">\n <div class=\"tooltip-bold__title\">\n <i *ngIf=\"context?.icon\" [class]=\"context?.icon\" [style.color]=\"context?.iconColor || 'black'\"></i>\n {{ context.title }}\n </div>\n <div class=\"tooltip-bold-text\">\n {{ context.text }}\n </div>\n</div>",
|
|
3753
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3754
|
+
styles: [".tooltip-bold{position:relative;box-shadow:0 4px 8px 1px #00000040;border:1px solid #C3C4CE;border-radius:8px;font-size:14px;line-height:22px;padding:10px 12px;background-color:#fff}.tooltip-bold--icon{padding-left:44px}.tooltip-bold__title{font-weight:bold}.tooltip-bold__title>i{position:absolute;width:16px;height:16px;left:10px}\n"]
|
|
3755
|
+
},] }
|
|
3756
|
+
];
|
|
3757
|
+
TooltipNoBodyComponent.ctorParameters = () => [];
|
|
3758
|
+
TooltipNoBodyComponent.propDecorators = {
|
|
3759
|
+
context: [{ type: Input }]
|
|
3760
|
+
};
|
|
3761
|
+
|
|
3762
|
+
class TooltipProcessDefaultComponent {
|
|
3763
|
+
constructor() {
|
|
3764
|
+
}
|
|
3765
|
+
}
|
|
3766
|
+
TooltipProcessDefaultComponent.decorators = [
|
|
3767
|
+
{ type: Component, args: [{
|
|
3768
|
+
selector: 'dr-tooltip-process-default',
|
|
3769
|
+
template: `
|
|
3770
|
+
<div class="container" [innerHTML]="text"></div>
|
|
3771
|
+
`,
|
|
3772
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3773
|
+
styles: [`
|
|
3774
|
+
.container {
|
|
3775
|
+
width: auto;
|
|
3776
|
+
max-width: 388px;
|
|
3777
|
+
text-align: start;
|
|
3778
|
+
font-size: 14px;
|
|
3779
|
+
line-height: 22px;
|
|
3780
|
+
padding: 10px 12px;
|
|
3781
|
+
color: #151B3F;
|
|
3782
|
+
background-color: #FFF;
|
|
3783
|
+
border-radius: 8px;
|
|
3784
|
+
box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.25);
|
|
3785
|
+
border: 1px solid #C3C4CE;
|
|
3786
|
+
}
|
|
3787
|
+
`]
|
|
3788
|
+
},] }
|
|
3789
|
+
];
|
|
3790
|
+
TooltipProcessDefaultComponent.ctorParameters = () => [];
|
|
3791
|
+
TooltipProcessDefaultComponent.propDecorators = {
|
|
3792
|
+
text: [{ type: Input }]
|
|
3793
|
+
};
|
|
3794
|
+
|
|
3795
|
+
const TOOLTIP_COMPONENTS = [
|
|
3796
|
+
TooltipInfoComponent,
|
|
3797
|
+
TooltipInfoSimpleComponent,
|
|
3798
|
+
TooltipNoBodyComponent,
|
|
3799
|
+
TooltipProcessDefaultComponent
|
|
3800
|
+
];
|
|
3699
3801
|
class DrTooltipModule {
|
|
3700
3802
|
}
|
|
3701
3803
|
DrTooltipModule.decorators = [
|
|
@@ -3706,11 +3808,13 @@ DrTooltipModule.decorators = [
|
|
|
3706
3808
|
exports: [
|
|
3707
3809
|
TooltipComponent,
|
|
3708
3810
|
DrTooltipDirective,
|
|
3811
|
+
...TOOLTIP_COMPONENTS
|
|
3709
3812
|
],
|
|
3710
3813
|
providers: [],
|
|
3711
3814
|
declarations: [
|
|
3712
3815
|
TooltipComponent,
|
|
3713
3816
|
DrTooltipDirective,
|
|
3817
|
+
...TOOLTIP_COMPONENTS
|
|
3714
3818
|
],
|
|
3715
3819
|
},] }
|
|
3716
3820
|
];
|
|
@@ -3866,11 +3970,78 @@ DrErrorModule.decorators = [
|
|
|
3866
3970
|
},] }
|
|
3867
3971
|
];
|
|
3868
3972
|
|
|
3973
|
+
class StepperComponent {
|
|
3974
|
+
constructor() {
|
|
3975
|
+
this.withoutConnectors = false;
|
|
3976
|
+
this.hiddenNames = false;
|
|
3977
|
+
this.inlineLabels = false;
|
|
3978
|
+
this.disabled = false;
|
|
3979
|
+
this.hiddenIndex = false;
|
|
3980
|
+
this.stepChange = new EventEmitter();
|
|
3981
|
+
}
|
|
3982
|
+
selectStep(step) {
|
|
3983
|
+
if (step !== this.currentStep && !this.disabled) {
|
|
3984
|
+
this.stepChange.emit(step);
|
|
3985
|
+
}
|
|
3986
|
+
}
|
|
3987
|
+
getWidth(step) {
|
|
3988
|
+
if (this.withoutConnectors)
|
|
3989
|
+
return '0%';
|
|
3990
|
+
if (step.completed)
|
|
3991
|
+
return '100%';
|
|
3992
|
+
if (step.index === 0 || this.steps[step.index - 1].completed)
|
|
3993
|
+
return `${((step === null || step === void 0 ? void 0 : step.completedTasks) / (step === null || step === void 0 ? void 0 : step.requiredTasks) * 100) || 0}%`;
|
|
3994
|
+
return '0%';
|
|
3995
|
+
}
|
|
3996
|
+
scrollLeft() {
|
|
3997
|
+
this.stepper.nativeElement.scrollLeft -= 80;
|
|
3998
|
+
}
|
|
3999
|
+
scrollRight() {
|
|
4000
|
+
this.stepper.nativeElement.scrollLeft += 80;
|
|
4001
|
+
}
|
|
4002
|
+
roundWidth(width) {
|
|
4003
|
+
return Math.round(width);
|
|
4004
|
+
}
|
|
4005
|
+
}
|
|
4006
|
+
StepperComponent.decorators = [
|
|
4007
|
+
{ type: Component, args: [{
|
|
4008
|
+
selector: 'dr-stepper',
|
|
4009
|
+
template: "<div class=\"scroll-section\" *ngIf=\"stepper?.scrollLeft !== 0\" (click)=\"scrollLeft()\">\n <i class=\"dr-icon-arrow-right\"></i>\n</div>\n<div #stepper class=\"stepper\" [ngClass]=\"{'stepper--disabled': disabled}\">\n <ng-container *ngFor=\"let step of steps; let index = index; last as isLast; first as isFirst\">\n <div class=\"step\" (click)=\"selectStep(step)\"\n [class.step-setup]=\"inlineLabels\">\n <div class=\"step-wrapper\" [drTooltip]=\"step.description && tooltip\"\n [drTooltipContext]=\"{ step: step }\"\n [drTooltipPosition]=\"'bottom'\">\n <div data-test=\"step_point\" class=\"step-point\">\n <div *ngIf=\"step === currentStep;\" class=\"ellipse\"></div>\n <ng-container [ngSwitch]=\"step.completed\">\n <ng-template [ngSwitchCase]=\"true\">\n <div class=\"pointer blue\">\n <i class=\"dr-icon-approve\"></i>\n </div>\n </ng-template>\n <ng-template [ngSwitchCase]=\"false\">\n <div class=\"pointer\" [class.gray]=\"step !== currentStep\"\n [ngClass]=\"{'blue with-ellipse': step === currentStep}\">\n <div [hidden]=\"step === currentStep || hiddenIndex\" class=\"text\">{{index + 1}}</div>\n </div>\n </ng-template>\n </ng-container>\n </div>\n <div data-test=\"step_label_name\" class=\"step-label\" [class.active]=\"currentStep === step\"\n [ngClass]=\"step.completed ? 'completed' : 'uncompleted'\">\n <span [hidden]=\"hiddenNames\">{{step.name}}</span>\n </div>\n <ng-container *ngIf=\"inlineLabels\" [ngTemplateOutlet]=\"connector\"\n [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n </ng-container>\n <span *ngIf=\"step.showProgress\"\n data-test=\"step_progress\"\n class=\"step-progress\">\n {{(step.requiredTasks ? step.completedTasks : step.requiredTasks) + '/' + step.requiredTasks}}\n </span>\n </div>\n <ng-container *ngIf=\"!inlineLabels\" [ngTemplateOutlet]=\"connector\"\n [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n </ng-container>\n </div>\n </ng-container>\n</div>\n<div (click)=\"scrollRight()\" class=\"scroll-section\"\n *ngIf=\"stepper?.scrollWidth > stepper?.clientWidth && roundWidth(stepper?.scrollLeft + stepper?.clientWidth) < stepper?.scrollWidth\">\n <i class=\"dr-icon-arrow-right\"></i>\n</div>\n\n<ng-template #tooltip let-step=\"step\">\n <div class=\"step-tooltip\">\n <div class=\"step-tooltip_name\">{{step.name}}</div>\n <div class=\"step-tooltip_description\">{{step.description}}</div>\n </div>\n</ng-template>\n\n<ng-template #connector let-step=\"step\" let-isLast=\"isLast\" let-index=\"index\">\n <div class=\"step-connector\" [class.only-one-step]=\"steps.length === 1\"\n [class]=\"'step-connector--' + (!inlineLabels ? 'absolute' : 'inline')\"\n *ngIf=\"steps.length === 1 || !isLast\"\n [style.visibility]=\"withoutConnectors ? 'hidden' : 'unset'\"\n [class.connector-grand]=\"!inlineLabels && (index === 0 || index === steps.length - 2)\">\n <div class=\"progress\" [style.width]=\"getWidth(step)\"></div>\n </div>\n</ng-template>\n",
|
|
4010
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
4011
|
+
styles: [":host{font-family:\"Poppins\",sans-serif;display:flex;justify-content:center;height:100%;position:relative}:host .scroll-section{position:absolute;top:0;height:100%;width:108px;display:flex;align-items:center;z-index:10}:host .scroll-section i{font-size:24px;color:#2969b0;background:#F3F7FF;border-radius:24px}:host .scroll-section i:hover{background:#CDE1FB;cursor:pointer}:host .scroll-section:first-child{left:0;padding-left:16px;background:linear-gradient(90deg,#FFFFFF 36.08%,rgba(255,255,255,0) 87.17%)}:host .scroll-section:first-child i{transform:rotate(180deg)}:host .scroll-section:last-child{right:0;padding-right:16px;background:linear-gradient(270deg,#FFFFFF 36.08%,rgba(255,255,255,0) 87.17%);justify-content:flex-end}:host .stepper{display:flex;align-items:center;height:100%;width:100%;overflow:auto;scroll-behavior:smooth}:host .stepper::-webkit-scrollbar{display:none}:host .stepper--disabled .step:hover{cursor:default}:host .stepper--disabled .step-point .ellipse{border-color:#bcbcbc}:host .stepper--disabled .step-point .pointer{color:#fff;background-color:#bcbcbc;cursor:default}:host .stepper--disabled .step-label{color:#bcbcbc}:host .stepper--disabled .step-connector{background-color:#bcbcbc}:host .stepper--disabled .step-connector .progress{background-color:#bcbcbc}:host .step{position:relative;display:flex;flex-direction:column;width:120px;align-items:center;flex-shrink:0;flex-grow:1}:host .step:hover{cursor:pointer}:host .step:not(.step-setup) .step-wrapper{width:100%}:host .step:not(.step-setup):first-child .step-wrapper,:host .step:not(.step-setup):first-child .step-point,:host .step:not(.step-setup):first-child .step-label,:host .step:not(.step-setup):first-child .step-progress{margin-left:8px}:host .step:not(.step-setup):first-child .only-one-step{left:0!important;margin-left:25px}:host .step-point{display:flex;justify-content:center;width:100%;height:38px;position:relative;align-items:center}:host .step-point .ellipse{width:38px;height:38px;position:absolute;border-radius:50px;border-color:#579bf2;border-style:solid;border-width:2px;background:white;display:flex;justify-content:center;align-items:center;z-index:2}:host .step-point .pointer{width:24px;height:24px;position:absolute;z-index:4;border-radius:20px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px;line-height:1.4;color:#51566f}:host .step-point .pointer i{color:#fff;font-size:22px}:host .step-point .pointer.blue{background:#579BF2}:host .step-point .pointer.completed{background-color:#151b3f}:host .step-point .pointer.uncompleted{background-color:#e5e5e5}:host .step-point .pointer.active-uncompleted{background-color:#2969b0}:host .step-point .pointer.gray{background:#E5E6EA}:host .step-label{font-weight:normal;font-size:14px;line-height:1.5;color:#51566f;display:flex;justify-content:center;overflow:hidden;margin-top:3px;width:95%}:host .step-label span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .step-label.active{font-weight:600}:host .step-label:last-child{margin-bottom:23px}:host .step-progress{margin-top:3px;font-style:normal;font-weight:normal;font-size:12px;line-height:1.4;display:flex;justify-content:center}:host .step-connector{background-color:#e5e5e5;height:2px}:host .step-connector.connector-grand{width:calc(100% - 25px)}:host .step-connector.connector-grand.only-one-step{width:calc(100% - 50px)}:host .step-connector .progress{background-color:#579bf2;height:2px;width:0}:host .step-connector--absolute{position:absolute;top:18px;width:100%;left:calc(100% / 2 + 12px)}:host .step-connector--inline{width:23px;margin-left:19px;margin-right:calc(19px - (38px - 24px) / 2)}:host .step-setup{width:auto}:host .step-setup .step-wrapper{display:flex;flex-direction:row;align-items:center;width:auto}:host .step-setup+.step-setup{margin-left:0}:host .step-setup .step-progress{display:none}:host .step-setup .step-label{position:relative;transform:none;align-items:center;justify-content:start;margin:0 0 0 5px;font-size:16px}:host .step-setup .step-point{width:38px;height:38px}:host .step-setup .step-point .ellipse{width:24px;height:24px}:host .step-setup .step-point .pointer{width:24px;height:24px}:host .step-setup .step-point .pointer.with-ellipse{width:14px;height:14px}:host .step-setup .step-point .pointer i{font-size:22px}:host .step-setup .step-point .pointer .text{font-size:16px}::ng-deep .step-tooltip{max-width:250px;font-size:14px;line-height:22px;padding:10px 12px}::ng-deep .step-tooltip_name{font-weight:700;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 1367px){.stepper .step-label{font-size:14px}}\n"]
|
|
4012
|
+
},] }
|
|
4013
|
+
];
|
|
4014
|
+
StepperComponent.ctorParameters = () => [];
|
|
4015
|
+
StepperComponent.propDecorators = {
|
|
4016
|
+
steps: [{ type: Input }],
|
|
4017
|
+
currentStep: [{ type: Input }],
|
|
4018
|
+
withoutConnectors: [{ type: Input }],
|
|
4019
|
+
hiddenNames: [{ type: Input }],
|
|
4020
|
+
inlineLabels: [{ type: Input }],
|
|
4021
|
+
disabled: [{ type: Input }],
|
|
4022
|
+
hiddenIndex: [{ type: Input }],
|
|
4023
|
+
stepChange: [{ type: Output }],
|
|
4024
|
+
stepper: [{ type: ViewChild, args: ['stepper', { read: ElementRef },] }]
|
|
4025
|
+
};
|
|
4026
|
+
|
|
4027
|
+
class StepperModule {
|
|
4028
|
+
}
|
|
4029
|
+
StepperModule.decorators = [
|
|
4030
|
+
{ type: NgModule, args: [{
|
|
4031
|
+
declarations: [StepperComponent],
|
|
4032
|
+
imports: [
|
|
4033
|
+
CommonModule,
|
|
4034
|
+
DrTooltipModule
|
|
4035
|
+
],
|
|
4036
|
+
exports: [StepperComponent]
|
|
4037
|
+
},] }
|
|
4038
|
+
];
|
|
4039
|
+
|
|
3869
4040
|
/* components */
|
|
3870
4041
|
|
|
3871
4042
|
/**
|
|
3872
4043
|
* Generated bundle index. Do not edit.
|
|
3873
4044
|
*/
|
|
3874
4045
|
|
|
3875
|
-
export { AnyTagComponent, CalendarView, CheckboxComponent, CustomDateFormat, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSharedUtils, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, SpinnerSize, SpinnerType, TimeframeOption, TooltipComponent, WeekTagComponent, YearTagComponent, components$3 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg, DrShowTimeframePipe as ɵh };
|
|
4046
|
+
export { AnyTagComponent, CalendarView, CheckboxComponent, CustomDateFormat, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSharedUtils, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, SpinnerSize, SpinnerType, StepperModule, TimeframeOption, TooltipComponent, TooltipPosition, WeekTagComponent, YearTagComponent, components$3 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg, DrShowTimeframePipe as ɵh, TooltipInfoComponent as ɵi, TooltipInfoSimpleComponent as ɵj, TooltipNoBodyComponent as ɵk, TooltipProcessDefaultComponent as ɵl, StepperComponent as ɵm };
|
|
3876
4047
|
//# sourceMappingURL=datarailsshared-datarailsshared.js.map
|