raise-common-lib 0.0.237-beta → 0.0.239-beta
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/raise-common-lib.umd.js +144 -44
- package/bundles/raise-common-lib.umd.js.map +1 -1
- package/bundles/raise-common-lib.umd.min.js +1 -1
- package/bundles/raise-common-lib.umd.min.js.map +1 -1
- package/esm2015/lib/actions/toolbar-item/index.component.js +1 -1
- package/esm2015/lib/layout/drawer/index.component.js +67 -13
- package/esm2015/lib/layout/rs-stepper/constants.js +1 -1
- package/esm2015/lib/layout/rs-stepper/index.component.js +39 -21
- package/esm2015/lib/service/drawer.service.js +27 -10
- package/esm5/lib/actions/toolbar-item/index.component.js +1 -1
- package/esm5/lib/layout/drawer/index.component.js +79 -14
- package/esm5/lib/layout/rs-stepper/constants.js +1 -1
- package/esm5/lib/layout/rs-stepper/index.component.js +40 -22
- package/esm5/lib/service/drawer.service.js +28 -10
- package/fesm2015/raise-common-lib.js +131 -42
- package/fesm2015/raise-common-lib.js.map +1 -1
- package/fesm5/raise-common-lib.js +145 -45
- package/fesm5/raise-common-lib.js.map +1 -1
- package/lib/layout/drawer/index.component.d.ts +3 -1
- package/lib/layout/rs-stepper/constants.d.ts +2 -0
- package/lib/layout/rs-stepper/index.component.d.ts +4 -2
- package/package.json +1 -1
- package/raise-common-lib.metadata.json +1 -1
- package/src/assets/style/syncfusion.min.css +1 -1
|
@@ -2780,9 +2780,7 @@ class DrawerService {
|
|
|
2780
2780
|
show(component, config, data = {}) {
|
|
2781
2781
|
/** @type {?} */
|
|
2782
2782
|
const drawer = this.uniqueDrawerComponent;
|
|
2783
|
-
if (!this.checkChange("show", { component, config, data }) ||
|
|
2784
|
-
!drawer ||
|
|
2785
|
-
drawer.isOpened) {
|
|
2783
|
+
if (!this.checkChange("show", { component, config, data }) || !drawer) {
|
|
2786
2784
|
return {
|
|
2787
2785
|
instance: null,
|
|
2788
2786
|
result: null,
|
|
@@ -2797,14 +2795,29 @@ class DrawerService {
|
|
|
2797
2795
|
(resolve) => {
|
|
2798
2796
|
/** @type {?} */
|
|
2799
2797
|
const cacheKey = this.cacheKey;
|
|
2800
|
-
|
|
2798
|
+
/** @type {?} */
|
|
2799
|
+
const resolves = this.resultPromiseResolveMap.get(cacheKey) || [];
|
|
2800
|
+
/** @type {?} */
|
|
2801
|
+
const resolveFn = (/**
|
|
2801
2802
|
* @param {?} value
|
|
2802
2803
|
* @return {?}
|
|
2803
2804
|
*/
|
|
2804
2805
|
(value) => {
|
|
2805
2806
|
resolve(value);
|
|
2806
|
-
|
|
2807
|
-
|
|
2807
|
+
/** @type {?} */
|
|
2808
|
+
const caches = this.resultPromiseResolveMap.get(cacheKey) || [];
|
|
2809
|
+
/** @type {?} */
|
|
2810
|
+
const index = caches.findIndex((/**
|
|
2811
|
+
* @param {?} cache
|
|
2812
|
+
* @return {?}
|
|
2813
|
+
*/
|
|
2814
|
+
(cache) => cache === resolveFn));
|
|
2815
|
+
caches.splice(index, 1);
|
|
2816
|
+
if (index === 0) {
|
|
2817
|
+
this.resultPromiseResolveMap.delete(cacheKey);
|
|
2818
|
+
}
|
|
2819
|
+
});
|
|
2820
|
+
this.resultPromiseResolveMap.set(cacheKey, [...resolves, resolveFn]);
|
|
2808
2821
|
})),
|
|
2809
2822
|
};
|
|
2810
2823
|
}
|
|
@@ -2815,7 +2828,9 @@ class DrawerService {
|
|
|
2815
2828
|
/** @type {?} */
|
|
2816
2829
|
const drawer = this.uniqueDrawerComponent;
|
|
2817
2830
|
/** @type {?} */
|
|
2818
|
-
const
|
|
2831
|
+
const resolves = this.resultPromiseResolveMap.get(this.cacheKey) || [];
|
|
2832
|
+
/** @type {?} */
|
|
2833
|
+
const resolve = resolves.slice(-1)[0];
|
|
2819
2834
|
if (resolve && this.checkChange("hide")) {
|
|
2820
2835
|
resolve({ type: "hide" });
|
|
2821
2836
|
drawer && drawer.back();
|
|
@@ -2829,7 +2844,9 @@ class DrawerService {
|
|
|
2829
2844
|
/** @type {?} */
|
|
2830
2845
|
const drawer = this.uniqueDrawerComponent;
|
|
2831
2846
|
/** @type {?} */
|
|
2832
|
-
const
|
|
2847
|
+
const resolves = this.resultPromiseResolveMap.get(this.cacheKey) || [];
|
|
2848
|
+
/** @type {?} */
|
|
2849
|
+
const resolve = resolves.slice(-1)[0];
|
|
2833
2850
|
if (resolve && this.checkChange("complete", { data })) {
|
|
2834
2851
|
resolve({ type: "complete", data });
|
|
2835
2852
|
drawer && drawer.back();
|
|
@@ -2851,7 +2868,7 @@ class DrawerService {
|
|
|
2851
2868
|
deleteCache(cacheKey) {
|
|
2852
2869
|
/** @type {?} */
|
|
2853
2870
|
const drawer = this.uniqueDrawerComponent;
|
|
2854
|
-
drawer && drawer.
|
|
2871
|
+
drawer && drawer.deleteAllCache(cacheKey);
|
|
2855
2872
|
this.resultPromiseResolveMap.delete(cacheKey);
|
|
2856
2873
|
}
|
|
2857
2874
|
/**
|
|
@@ -3594,7 +3611,9 @@ class DrawerComponent {
|
|
|
3594
3611
|
*/
|
|
3595
3612
|
setConfig(config) {
|
|
3596
3613
|
/** @type {?} */
|
|
3597
|
-
const
|
|
3614
|
+
const caches = this.componentRefMap.get(this.service.cacheKey) || [];
|
|
3615
|
+
/** @type {?} */
|
|
3616
|
+
const cache = caches.slice(-1)[0];
|
|
3598
3617
|
if (cache) {
|
|
3599
3618
|
cache.config = Object.assign({}, cache.config, config);
|
|
3600
3619
|
this.setCache(cache);
|
|
@@ -3626,10 +3645,15 @@ class DrawerComponent {
|
|
|
3626
3645
|
headerEl,
|
|
3627
3646
|
topEl,
|
|
3628
3647
|
};
|
|
3648
|
+
/** @type {?} */
|
|
3649
|
+
const caches = this.componentRefMap.get(this.service.cacheKey) || [];
|
|
3650
|
+
this.componentRefMap.set(this.service.cacheKey, [...caches, cache]);
|
|
3651
|
+
// 如果是第一个缓存，打开抽屉
|
|
3652
|
+
if (caches.length === 0) {
|
|
3653
|
+
this.toggleOpenStatus(true, true);
|
|
3654
|
+
}
|
|
3655
|
+
this.toggleCache(cache);
|
|
3629
3656
|
this.setComponentData(componentRef, data);
|
|
3630
|
-
this.componentRefMap.set(this.service.cacheKey, cache);
|
|
3631
|
-
this.setCache(cache);
|
|
3632
|
-
this.toggleOpenStatus(true, true);
|
|
3633
3657
|
return componentRef.instance;
|
|
3634
3658
|
}
|
|
3635
3659
|
/**
|
|
@@ -3643,36 +3667,83 @@ class DrawerComponent {
|
|
|
3643
3667
|
*/
|
|
3644
3668
|
back() {
|
|
3645
3669
|
this.deleteCache(this.service.cacheKey);
|
|
3646
|
-
|
|
3670
|
+
// 如果有上一个缓存，设置为当前缓存，否则关闭抽屉
|
|
3671
|
+
/** @type {?} */
|
|
3672
|
+
const caches = this.componentRefMap.get(this.service.cacheKey) || [];
|
|
3673
|
+
/** @type {?} */
|
|
3674
|
+
const cache = caches.slice(-1)[0];
|
|
3675
|
+
if (cache) {
|
|
3676
|
+
this.toggleCache(cache);
|
|
3677
|
+
}
|
|
3678
|
+
else {
|
|
3679
|
+
this.toggleOpenStatus(false, true);
|
|
3680
|
+
}
|
|
3647
3681
|
}
|
|
3648
3682
|
/**
|
|
3683
|
+
* @private
|
|
3649
3684
|
* @param {?} cacheKey
|
|
3650
3685
|
* @return {?}
|
|
3651
3686
|
*/
|
|
3652
3687
|
deleteCache(cacheKey) {
|
|
3653
3688
|
/** @type {?} */
|
|
3654
|
-
const
|
|
3689
|
+
const caches = this.componentRefMap.get(cacheKey) || [];
|
|
3690
|
+
/** @type {?} */
|
|
3691
|
+
const cache = caches.slice(-1)[0];
|
|
3655
3692
|
if (cache) {
|
|
3656
3693
|
this.destroyDynamicComponent(cache.ref);
|
|
3694
|
+
caches.pop();
|
|
3695
|
+
}
|
|
3696
|
+
if (caches.length === 0) {
|
|
3697
|
+
this.componentRefMap.delete(cacheKey);
|
|
3657
3698
|
}
|
|
3658
|
-
this.componentRefMap.delete(cacheKey);
|
|
3659
3699
|
}
|
|
3660
3700
|
/**
|
|
3701
|
+
* @private
|
|
3702
|
+
* @param {?} cache
|
|
3661
3703
|
* @return {?}
|
|
3662
3704
|
*/
|
|
3663
|
-
|
|
3705
|
+
toggleCache(cache) {
|
|
3664
3706
|
this.componentRefMap.forEach((/**
|
|
3707
|
+
* @param {?} caches
|
|
3708
|
+
* @return {?}
|
|
3709
|
+
*/
|
|
3710
|
+
(caches) => {
|
|
3711
|
+
caches.forEach((/**
|
|
3712
|
+
* @param {?} c
|
|
3713
|
+
* @return {?}
|
|
3714
|
+
*/
|
|
3715
|
+
(c) => {
|
|
3716
|
+
c.ref.location.nativeElement.style.display = c === cache ? "" : "none";
|
|
3717
|
+
}));
|
|
3718
|
+
}));
|
|
3719
|
+
this.setCache(cache);
|
|
3720
|
+
}
|
|
3721
|
+
/**
|
|
3722
|
+
* @param {?} cacheKey
|
|
3723
|
+
* @return {?}
|
|
3724
|
+
*/
|
|
3725
|
+
deleteAllCache(cacheKey) {
|
|
3726
|
+
/** @type {?} */
|
|
3727
|
+
const caches = this.componentRefMap.get(cacheKey) || [];
|
|
3728
|
+
caches.forEach((/**
|
|
3665
3729
|
* @param {?} cache
|
|
3666
3730
|
* @return {?}
|
|
3667
3731
|
*/
|
|
3668
3732
|
(cache) => {
|
|
3669
|
-
cache.ref
|
|
3733
|
+
this.destroyDynamicComponent(cache.ref);
|
|
3670
3734
|
}));
|
|
3735
|
+
this.componentRefMap.delete(cacheKey);
|
|
3736
|
+
}
|
|
3737
|
+
/**
|
|
3738
|
+
* @return {?}
|
|
3739
|
+
*/
|
|
3740
|
+
onRouteChange() {
|
|
3741
|
+
/** @type {?} */
|
|
3742
|
+
const caches = this.componentRefMap.get(this.service.cacheKey) || [];
|
|
3671
3743
|
/** @type {?} */
|
|
3672
|
-
const cache =
|
|
3744
|
+
const cache = caches.slice(-1)[0];
|
|
3673
3745
|
if (cache) {
|
|
3674
|
-
cache
|
|
3675
|
-
this.setCache(cache);
|
|
3746
|
+
this.toggleCache(cache);
|
|
3676
3747
|
this.toggleOpenStatus(true);
|
|
3677
3748
|
}
|
|
3678
3749
|
else {
|
|
@@ -4011,7 +4082,7 @@ ToolbarItemComponent.decorators = [
|
|
|
4011
4082
|
{ type: Component, args: [{
|
|
4012
4083
|
selector: "rs-toolbar-item",
|
|
4013
4084
|
template: "<button\r\n *ngIf=\"!children.length\"\r\n class=\"toolbar-action-item e-btn text\"\r\n #buttonElement\r\n [disabled]=\"!!disabled\"\r\n>\r\n <span class=\"toolbar-action-image\" *ngIf=\"image\" [attr.data-type]=\"image\">\r\n <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n </span>\r\n <span>{{ text }}</span>\r\n</button>\r\n\r\n<button\r\n *ngIf=\"children.length\"\r\n class=\"toolbar-action-item e-btn text\"\r\n #buttonElement\r\n mat-menu-item\r\n [matMenuTriggerFor]=\"menu\"\r\n [disabled]=\"!!disabled\"\r\n>\r\n <span class=\"toolbar-action-image\" *ngIf=\"image\" [attr.data-type]=\"image\">\r\n <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n </span>\r\n <span>{{ text }}</span>\r\n <span class=\"toolbar-action-arrow\" *ngIf=\"!hideArrow\">\r\n <img src=\"assets/img/down-arrow.svg\" />\r\n </span>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"toolbar-action-menu-content\">\r\n <ng-container *ngFor=\"let button of children\">\r\n <button\r\n class=\"toolbar-action-item e-btn text\"\r\n [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n (click)=\"button.action()\"\r\n >\r\n <span\r\n class=\"toolbar-action-image\"\r\n *ngIf=\"button.image\"\r\n [attr.data-type]=\"button.image\"\r\n >\r\n <img *ngIf=\"!ImageType.includes(button.image)\" [src]=\"button.image\" />\r\n </span>\r\n <span>{{ button.text }}</span>\r\n </button>\r\n </ng-container>\r\n</mat-menu>\r\n",
|
|
4014
|
-
styles: ["rs-toolbar-item.disabled{pointer-events:none}.toolbar-action-item{padding:4px 8px;font-size:11px!important;line-height:24px!important
|
|
4085
|
+
styles: ["rs-toolbar-item.disabled{pointer-events:none}.toolbar-action-item{padding:4px 8px;font-size:11px!important;line-height:24px!important}.toolbar-action-item .toolbar-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}.toolbar-action-item .toolbar-action-image::before{display:block;width:16px;height:16px}.toolbar-action-item .toolbar-action-image[data-type=Add]::before{content:url(/assets/img/toolbar-action-add.svg)}.toolbar-action-item .toolbar-action-image[data-type=Delete]::before{content:url(/assets/img/toolbar-action-delete.svg)}.toolbar-action-item .toolbar-action-image[data-type=Import]::before{content:url(/assets/img/toolbar-action-import.svg)}.toolbar-action-item .toolbar-action-image[data-type=Upload]::before{content:url(/assets/img/toolbar-action-upload.svg)}.toolbar-action-item .toolbar-action-image[data-type=Download]::before{content:url(/assets/img/toolbar-action-download.svg)}.toolbar-action-item .toolbar-action-image[data-type=Export]::before{content:url(/assets/img/toolbar-action-export.svg)}.toolbar-action-item .toolbar-action-image[data-type=Duplicate]::before{content:url(/assets/img/toolbar-action-duplicate.svg)}.toolbar-action-item .toolbar-action-image[data-type=Refresh]::before{content:url(/assets/img/toolbar-action-refresh.svg)}.toolbar-action-item .toolbar-action-image[data-type=AddFolder]::before{content:url(/assets/img/toolbar-action-addFolder.svg)}.toolbar-action-item .toolbar-action-image[data-type=Collapse]::before{content:url(/assets/img/toolbar-action-collapse.svg)}.toolbar-action-item .toolbar-action-image[data-type=Combine]::before{content:url(/assets/img/toolbar-action-combine.svg)}.toolbar-action-item .toolbar-action-image[data-type=Edit]::before{content:url(/assets/img/toolbar-action-edit.svg)}.toolbar-action-item .toolbar-action-image[data-type=Lock]::before{content:url(/assets/img/toolbar-action-lock.svg)}.toolbar-action-item .toolbar-action-image[data-type=Expand]::before{content:url(/assets/img/toolbar-action-expand.svg)}.toolbar-action-item .toolbar-action-image[data-type=MoveTo]::before{content:url(/assets/img/toolbar-action-folderMove.svg)}.toolbar-action-item .toolbar-action-image[data-type=Publish]::before{content:url(/assets/img/toolbar-action-publish.svg)}.toolbar-action-item .toolbar-action-image[data-type=Preview]::before{content:url(/assets/img/toolbar-action-preview.svg)}.toolbar-action-item .toolbar-action-image[data-type=ReCalculate]::before{content:url(/assets/img/toolbar-action-calculator.svg)}.toolbar-action-item .toolbar-action-image[data-type=Sync]::before{content:url(/assets/img/toolbar-action-sync.svg)}.toolbar-action-item .toolbar-action-image[data-type=Share]::before{content:url(/assets/img/toolbar-action-share.svg)}.toolbar-action-item .toolbar-action-image[data-type=Rename]::before{content:url(/assets/img/toolbar-action-rename.svg)}.toolbar-action-item .toolbar-action-image[data-type=SaveSequence]::before{content:url(/assets/img/toolbar-action-saveSequence.svg)}.toolbar-action-item .toolbar-action-image[data-type=SubmitForApproval]::before{content:url(/assets/img/toolbar-action-submitForApproval.svg)}.toolbar-action-item .toolbar-action-image[data-type=SendToControlPanel]::before{content:url(/assets/img/toolbar-action-send-file.svg)}.toolbar-action-item .toolbar-action-image[data-type=SetReminders]::before{content:url(/assets/img/toolbar-action-reminders.svg)}.toolbar-action-item .toolbar-action-image[data-type=Settle]::before{content:url(/assets/img/toolbar-action-settle.svg)}.toolbar-action-item .toolbar-action-image[data-type=Template]::before{content:url(/assets/img/toolbar-action-template.svg)}.toolbar-action-item .toolbar-action-image[data-type=Workflow]::before{content:url(/assets/img/toolbar-action-workflow.svg)}.toolbar-action-item .toolbar-action-image[data-type=Update]::before{content:url(/assets/img/toolbar-action-update.svg)}.toolbar-action-item .toolbar-action-image[data-type=FetchData]::before{content:url(/assets/img/toolbar-action-fetchData.svg)}.toolbar-action-item .toolbar-action-image img{height:16px;display:block}.toolbar-action-item.e-btn{width:100%;min-width:auto!important;height:24px!important;justify-content:flex-start}.toolbar-action-item.mat-menu-item::after{display:none}::ng-deep .toolbar-action-menu-content.mat-menu-panel{border-radius:8px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0,0,0,.25)}::ng-deep .toolbar-action-menu-content.mat-menu-panel .mat-menu-content{padding:8px}"]
|
|
4015
4086
|
}] }
|
|
4016
4087
|
];
|
|
4017
4088
|
ToolbarItemComponent.propDecorators = {
|
|
@@ -21138,6 +21209,10 @@ class RSStepperComponent {
|
|
|
21138
21209
|
this.ref = ref;
|
|
21139
21210
|
this.steps = [];
|
|
21140
21211
|
this.currentStep = 0;
|
|
21212
|
+
/**
|
|
21213
|
+
* Layout direction: 'horizontal' (default) or 'vertical'
|
|
21214
|
+
*/
|
|
21215
|
+
this.orientation = "horizontal";
|
|
21141
21216
|
this.stepClick = new EventEmitter();
|
|
21142
21217
|
this.unlockedStep = 0; //已解锁的最大步骤
|
|
21143
21218
|
this.showBtn = false;
|
|
@@ -21161,10 +21236,12 @@ class RSStepperComponent {
|
|
|
21161
21236
|
* @return {?}
|
|
21162
21237
|
*/
|
|
21163
21238
|
ngAfterViewInit() {
|
|
21164
|
-
|
|
21165
|
-
|
|
21166
|
-
|
|
21167
|
-
|
|
21239
|
+
if (this.orientation === "horizontal") {
|
|
21240
|
+
setTimeout((/**
|
|
21241
|
+
* @return {?}
|
|
21242
|
+
*/
|
|
21243
|
+
() => this.checkBtnShow(true)));
|
|
21244
|
+
}
|
|
21168
21245
|
}
|
|
21169
21246
|
/**
|
|
21170
21247
|
* @param {?} changes
|
|
@@ -21173,14 +21250,16 @@ class RSStepperComponent {
|
|
|
21173
21250
|
ngOnChanges(changes) {
|
|
21174
21251
|
if (changes["currentStep"] && !changes["currentStep"].firstChange) {
|
|
21175
21252
|
this.syncUnlockedStep();
|
|
21176
|
-
|
|
21177
|
-
|
|
21178
|
-
|
|
21179
|
-
|
|
21180
|
-
|
|
21253
|
+
if (this.orientation === "horizontal") {
|
|
21254
|
+
setTimeout((/**
|
|
21255
|
+
* @return {?}
|
|
21256
|
+
*/
|
|
21257
|
+
() => this.scrollToStep()));
|
|
21258
|
+
}
|
|
21181
21259
|
}
|
|
21182
|
-
if (
|
|
21183
|
-
changes["
|
|
21260
|
+
if (this.orientation === "horizontal" &&
|
|
21261
|
+
((changes["steps"] && changes["steps"].currentValue) ||
|
|
21262
|
+
changes["currentStep"])) {
|
|
21184
21263
|
setTimeout((/**
|
|
21185
21264
|
* @return {?}
|
|
21186
21265
|
*/
|
|
@@ -21206,10 +21285,12 @@ class RSStepperComponent {
|
|
|
21206
21285
|
if (step.step <= this.unlockedStep) {
|
|
21207
21286
|
this.currentStep = step.step;
|
|
21208
21287
|
this.stepClick.emit(step);
|
|
21209
|
-
|
|
21210
|
-
|
|
21211
|
-
|
|
21212
|
-
|
|
21288
|
+
if (this.orientation === "horizontal") {
|
|
21289
|
+
setTimeout((/**
|
|
21290
|
+
* @return {?}
|
|
21291
|
+
*/
|
|
21292
|
+
() => this.scrollToStep(index)));
|
|
21293
|
+
}
|
|
21213
21294
|
}
|
|
21214
21295
|
}
|
|
21215
21296
|
/**
|
|
@@ -21263,11 +21344,13 @@ class RSStepperComponent {
|
|
|
21263
21344
|
this.onScroll();
|
|
21264
21345
|
}
|
|
21265
21346
|
/**
|
|
21266
|
-
* @param {?}
|
|
21347
|
+
* @param {?} _event
|
|
21267
21348
|
* @return {?}
|
|
21268
21349
|
*/
|
|
21269
|
-
onResize(
|
|
21270
|
-
this.
|
|
21350
|
+
onResize(_event) {
|
|
21351
|
+
if (this.orientation === "horizontal") {
|
|
21352
|
+
this.checkBtnShow();
|
|
21353
|
+
}
|
|
21271
21354
|
}
|
|
21272
21355
|
/**
|
|
21273
21356
|
* @param {?=} init
|
|
@@ -21333,8 +21416,8 @@ class RSStepperComponent {
|
|
|
21333
21416
|
RSStepperComponent.decorators = [
|
|
21334
21417
|
{ type: Component, args: [{
|
|
21335
21418
|
selector: "rs-stepper",
|
|
21336
|
-
template: "<div class=\"rs-stepper\">\r\n <div class=\"steps-wrap\">\r\n
|
|
21337
|
-
styles: [".rs-stepper{font-family:Arial;width:100
|
|
21419
|
+
template: "<div class=\"rs-stepper\" [ngClass]=\"{ 'rs-stepper--vertical': orientation === 'vertical' }\">\r\n <!-- Horizontal stepper -->\r\n <ng-container *ngIf=\"orientation === 'horizontal'\">\r\n <div class=\"steps-wrap\">\r\n <div\r\n class=\"row-btn\"\r\n [class.hidden]=\"isAtStart || !showBtn\"\r\n (click)=\"scrollLeft()\"\r\n >\r\n <div class=\"hover\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\"\r\n height=\"16\"\r\n viewBox=\"0 0 17 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M10.4995 3.99955L7.24219 8.24219L10.4995 12.4848\"\r\n stroke=\"#1F7BFF\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"normal\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\"\r\n height=\"16\"\r\n viewBox=\"0 0 17 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M10.4995 3.99955L7.24219 8.24219L10.4995 12.4848\"\r\n stroke=\"#6B6B6B\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n <div\r\n class=\"steps-content\"\r\n [ngClass]=\"{\r\n leftMask: showBtn && !isAtStart,\r\n rightMask: showBtn && !isAtEnd,\r\n bothMask: showBtn && !isAtStart && showBtn && !isAtEnd\r\n }\"\r\n #menu\r\n (scroll)=\"onScroll()\"\r\n >\r\n <ng-container *ngFor=\"let item of steps; let i = index\">\r\n <div\r\n class=\"step\"\r\n [ngClass]=\"{\r\n done: item.step <= unlockedStep,\r\n active: item.step === currentStep\r\n }\"\r\n (click)=\"onStepClick(item, i)\"\r\n >\r\n <div\r\n class=\"step-label\"\r\n [matTooltip]=\"item.label !== item.displayTitle ? item.label : ''\"\r\n matTooltipPosition=\"above\"\r\n >\r\n {{ item.displayTitle }}\r\n </div>\r\n </div>\r\n <div class=\"step-arrow\" *ngIf=\"i < steps.length - 1\">\r\n <img src=\"/assets/img/step-arrow.svg\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div\r\n class=\"row-btn\"\r\n [class.hidden]=\"isAtEnd || !showBtn\"\r\n (click)=\"scrollRight()\"\r\n >\r\n <div class=\"hover\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\"\r\n height=\"16\"\r\n viewBox=\"0 0 17 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M7.50045 3.99955L10.7578 8.24219L7.50045 12.4848\"\r\n stroke=\"#1F7BFF\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"normal\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\"\r\n height=\"16\"\r\n viewBox=\"0 0 17 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M7.50045 3.99955L10.7578 8.24219L7.50045 12.4848\"\r\n stroke=\"#6B6B6B\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Vertical stepper (Figma RAISE-UI-Kits: right border, \"Step N\" + title) -->\r\n <div class=\"steps-wrap steps-wrap--vertical\" *ngIf=\"orientation === 'vertical'\">\r\n <ol class=\"steps-vertical\" role=\"list\">\r\n <li\r\n *ngFor=\"let item of steps; let i = index\"\r\n class=\"step-vertical\"\r\n [ngClass]=\"{\r\n 'step-vertical--done': item.step <= unlockedStep,\r\n 'step-vertical--active': item.step === currentStep\r\n }\"\r\n (click)=\"onStepClick(item, i)\"\r\n >\r\n <span class=\"step-vertical__number\">Step {{ item.step + 1 }}</span>\r\n <span\r\n class=\"step-vertical__label\"\r\n [matTooltip]=\"item.label !== (item.displayTitle || item.label) ? item.label : ''\"\r\n matTooltipPosition=\"right\"\r\n >\r\n {{ item.displayTitle || item.label }}\r\n </span>\r\n </li>\r\n </ol>\r\n </div>\r\n</div>\r\n",
|
|
21420
|
+
styles: [".rs-stepper{font-family:var(--rs-font-family,Arial);width:100%}.rs-stepper:not(.rs-stepper--vertical){border-bottom:1px solid var(--rs-border-color)}.rs-stepper.rs-stepper--vertical{border-bottom:none}.rs-stepper .steps-wrap{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto}.rs-stepper .steps-wrap .steps-content{display:flex;align-items:center;flex-wrap:nowrap;min-width:0;overflow-x:auto;overflow-y:hidden;gap:8px}.rs-stepper .steps-wrap .steps-content.leftMask{-webkit-mask-image:linear-gradient(90deg,transparent,#fff 10%,#d8d3d3 100%);mask-image:linear-gradient(90deg,transparent,#fff 10%,#d8d3d3 100%)}.rs-stepper .steps-wrap .steps-content.rightMask{-webkit-mask-image:linear-gradient(90deg,#fff 0,#fff 90%,transparent);mask-image:linear-gradient(90deg,#fff 0,#fff 90%,transparent)}.rs-stepper .steps-wrap .steps-content.bothMask{-webkit-mask-image:linear-gradient(90deg,transparent,#fff 10%,#fff 90%,transparent)!important;mask-image:linear-gradient(90deg,transparent,#fff 10%,#fff 90%,transparent)!important}.rs-stepper .steps-wrap .steps-content::-webkit-scrollbar{width:0;height:0}.rs-stepper .steps-wrap .step{flex:0 0 auto}.rs-stepper .steps-wrap .step .step-label{color:var(--rs-labels-color);font-size:12px;font-weight:400;line-height:22px;text-align:center;white-space:nowrap;padding:0 12px 12px;display:flex;align-items:center}.rs-stepper .steps-wrap .step.done{cursor:pointer}.rs-stepper .steps-wrap .step.done .step-label{color:var(--rs-active-labels-color)}.rs-stepper .steps-wrap .step.active .step-label{color:var(--rs-active-labels-color);font-weight:700;border-bottom:1px solid var(--rs-active-labels-color)}.rs-stepper .steps-wrap .step-arrow{flex:0 0 auto;padding:0 12px 12px;display:flex;align-items:center}.rs-stepper .row-btn{margin-bottom:12px;display:flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:4px;border:1px solid #bdc4ca;flex-shrink:0;cursor:pointer;visibility:visible}.rs-stepper .row-btn .hover{display:none}.rs-stepper .row-btn .normal{display:flex}.rs-stepper .row-btn:hover{background-color:rgba(31,123,255,.04)}.rs-stepper .row-btn:hover .normal{display:none}.rs-stepper .row-btn:hover .hover{display:flex}.rs-stepper .row-btn.hidden{visibility:hidden}.rs-stepper .steps-wrap--vertical{display:block;padding:0}.rs-stepper .steps-vertical{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}.rs-stepper .step-vertical{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:4px 12px 4px 0;border-right:2px solid var(--rs-border-color);cursor:default;text-align:right;font-family:var(--rs-font-family,Arial);font-size:11px;line-height:14px;color:var(--rs-labels-color);transition:background-color .15s,border-radius .15s}.rs-stepper .step-vertical.step-vertical--done{cursor:pointer;border-right-color:var(--rs-active-labels-color);color:var(--rs-active-labels-color)}.rs-stepper .step-vertical.step-vertical--done:hover{background-color:rgba(31,123,255,.04);border-top-left-radius:var(--rs-input-border-radius,4px);border-bottom-left-radius:var(--rs-input-border-radius,4px)}.rs-stepper .step-vertical.step-vertical--active{border-right-color:var(--rs-active-labels-color);color:var(--rs-active-labels-color)}.rs-stepper .step-vertical.step-vertical--active .step-vertical__label{font-weight:700}.rs-stepper .step-vertical__number{flex-shrink:0;font-weight:400}.rs-stepper .step-vertical__label{min-width:0;font-weight:400;word-break:break-word}.rs-stepper .step-vertical--active .step-vertical__label{font-weight:700}"]
|
|
21338
21421
|
}] }
|
|
21339
21422
|
];
|
|
21340
21423
|
/** @nocollapse */
|
|
@@ -21346,6 +21429,7 @@ RSStepperComponent.propDecorators = {
|
|
|
21346
21429
|
menu: [{ type: ViewChild, args: ["menu", { static: false },] }],
|
|
21347
21430
|
steps: [{ type: Input }],
|
|
21348
21431
|
currentStep: [{ type: Input }],
|
|
21432
|
+
orientation: [{ type: Input }],
|
|
21349
21433
|
stepClick: [{ type: Output }],
|
|
21350
21434
|
unlockedStep: [{ type: Input }],
|
|
21351
21435
|
containerRefId: [{ type: Input }],
|
|
@@ -21358,6 +21442,11 @@ if (false) {
|
|
|
21358
21442
|
RSStepperComponent.prototype.steps;
|
|
21359
21443
|
/** @type {?} */
|
|
21360
21444
|
RSStepperComponent.prototype.currentStep;
|
|
21445
|
+
/**
|
|
21446
|
+
* Layout direction: 'horizontal' (default) or 'vertical'
|
|
21447
|
+
* @type {?}
|
|
21448
|
+
*/
|
|
21449
|
+
RSStepperComponent.prototype.orientation;
|
|
21361
21450
|
/** @type {?} */
|
|
21362
21451
|
RSStepperComponent.prototype.stepClick;
|
|
21363
21452
|
/** @type {?} */
|