raise-common-lib 0.0.205 → 0.0.206

package/bundles/raise-common-lib.umd.js

@@ -21927,20 +21927,21 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var RSStepperComponent = /** @class */ (function () {
-        function RSStepperComponent(cf) {
+        function RSStepperComponent(cf, ref) {
             this.cf = cf;
+            this.ref = ref;
             this.steps = [];
             this.currentStep = 0;
             this.stepClick = new core.EventEmitter();
             this.unlockedStep = 0; //已解锁的最大步骤
+            this.showBtn = false;
+            this.isAtStart = true;
+            this.isAtEnd = false;
         }
-        //已解锁的最大步骤
         /**
          * @return {?}
          */
-        RSStepperComponent.prototype.ngOnInit = 
-        //已解锁的最大步骤
-        /**
+        RSStepperComponent.prototype.ngOnInit = /**
          * @return {?}
          */
         function () {
@@ -21954,6 +21955,19 @@
             }));
             this.syncUnlockedStep();
         };
+        /**
+         * @return {?}
+         */
+        RSStepperComponent.prototype.ngAfterViewInit = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            setTimeout((/**
+             * @return {?}
+             */
+            function () { return _this.checkBtnShow(true); }));
+        };
         /**
          * @param {?} changes
          * @return {?}
@@ -21963,8 +21977,21 @@
          * @return {?}
          */
         function (changes) {
+            var _this = this;
             if (changes["currentStep"] && !changes["currentStep"].firstChange) {
                 this.syncUnlockedStep();
+                // 当外部传入的 currentStep 变化时，滚动到对应步骤
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () { return _this.scrollToStep(); }));
+            }
+            if ((changes["steps"] && changes["steps"].currentValue) ||
+                changes["currentStep"]) {
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () { return _this.checkBtnShow(); }));
             }
         };
         // 同步unlockedStep的最大值
@@ -21986,38 +22013,192 @@
         };
         /**
          * @param {?} step
+         * @param {?=} index
          * @return {?}
          */
         RSStepperComponent.prototype.onStepClick = /**
          * @param {?} step
+         * @param {?=} index
          * @return {?}
          */
-        function (step) {
+        function (step, index) {
+            var _this = this;
             if (step.step <= this.unlockedStep) {
                 this.currentStep = step.step;
                 this.stepClick.emit(step);
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () { return _this.scrollToStep(index); }));
             }
         };
+        /**
+         * @private
+         * @param {?=} index
+         * @return {?}
+         */
+        RSStepperComponent.prototype.scrollToStep = /**
+         * @private
+         * @param {?=} index
+         * @return {?}
+         */
+        function (index) {
+            var _this = this;
+            if (!this.menu || !this.menu.nativeElement)
+                return;
+            /** @type {?} */
+            var menuEl = this.menu.nativeElement;
+            /** @type {?} */
+            var items = menuEl.querySelectorAll(".step");
+            /** @type {?} */
+            var targetIndex = typeof index === "number"
+                ? index
+                : this.steps.findIndex((/**
+                 * @param {?} s
+                 * @return {?}
+                 */
+                function (s) { return s.step === _this.currentStep; }));
+            if (targetIndex < 0 || targetIndex >= items.length)
+                return;
+            /** @type {?} */
+            var targetEl = (/** @type {?} */ (items[targetIndex]));
+            //获取相对位置
+            /** @type {?} */
+            var containerRect = menuEl.getBoundingClientRect();
+            /** @type {?} */
+            var elementRect = targetEl.getBoundingClientRect();
+            // 计算元素相对于容器的位置
+            /** @type {?} */
+            var elementRelativeLeft = elementRect.left - containerRect.left + menuEl.scrollLeft;
+            /** @type {?} */
+            var elementWidth = elementRect.width;
+            /** @type {?} */
+            var containerWidth = menuEl.clientWidth;
+            // 计算元素中心点相对于容器的位置
+            /** @type {?} */
+            var elementCenter = elementRelativeLeft + elementWidth / 2;
+            // 目标滚动位置：让元素中心出现在可视区域中心
+            /** @type {?} */
+            var scrollTarget = elementCenter - containerWidth / 2;
+            // 限制在有效滚动范围内
+            /** @type {?} */
+            var maxScroll = Math.max(0, menuEl.scrollWidth - containerWidth);
+            /** @type {?} */
+            var finalTarget = Math.max(0, Math.min(scrollTarget, maxScroll));
+            menuEl.scrollTo({ left: finalTarget, behavior: "smooth" });
+            this.onScroll();
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        RSStepperComponent.prototype.onResize = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            this.checkBtnShow();
+        };
+        /**
+         * @param {?=} init
+         * @return {?}
+         */
+        RSStepperComponent.prototype.checkBtnShow = /**
+         * @param {?=} init
+         * @return {?}
+         */
+        function (init) {
+            var _this = this;
+            if (!this.menu || !this.menu.nativeElement)
+                return;
+            /** @type {?} */
+            var menuEl = this.menu.nativeElement;
+            var scrollWidth = menuEl.scrollWidth, clientWidth = menuEl.clientWidth;
+            // 判断是否需要显示滚动按钮
+            /** @type {?} */
+            var threshold = clientWidth;
+            if (this.containerRefId) {
+                /** @type {?} */
+                var containerRef = document.getElementById(this.containerRefId);
+                if (containerRef) {
+                    threshold = Math.max(containerRef.offsetWidth * 0.8, 400);
+                }
+            }
+            this.showBtn = scrollWidth > threshold;
+            // 初始化时滚动到当前步骤
+            if (init) {
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () { return _this.scrollToStep(); }), 0);
+            }
+            this.onScroll();
+            this.ref.markForCheck();
+        };
+        /**
+         * @return {?}
+         */
+        RSStepperComponent.prototype.scrollLeft = /**
+         * @return {?}
+         */
+        function () {
+            var scrollLeft = this.menu.nativeElement.scrollLeft;
+            /** @type {?} */
+            var dis = scrollLeft / 100 < 2 ? scrollLeft + 10 : 100;
+            this.menu.nativeElement.scrollBy({ left: -dis, behavior: "smooth" });
+        };
+        /**
+         * @return {?}
+         */
+        RSStepperComponent.prototype.scrollRight = /**
+         * @return {?}
+         */
+        function () {
+            var _a = this.menu.nativeElement, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
+            /** @type {?} */
+            var rest = scrollWidth - clientWidth - scrollLeft;
+            /** @type {?} */
+            var dis = rest / 100 < 2 ? rest + 10 : 100;
+            this.menu.nativeElement.scrollBy({ left: dis, behavior: "smooth" });
+        };
+        /**
+         * @return {?}
+         */
+        RSStepperComponent.prototype.onScroll = /**
+         * @return {?}
+         */
+        function () {
+            var _a = this.menu.nativeElement, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
+            this.isAtStart = scrollLeft <= 1;
+            this.isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+            this.ref.markForCheck();
+        };
         RSStepperComponent.decorators = [
             { type: core.Component, args: [{
                         selector: "rs-stepper",
-                        template: "<div class=\"rs-stepper\">\r\n  <div class=\"steps-wrap\">\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)\"\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",
-                        styles: [".rs-stepper{font-family:Arial;width:100%;border-bottom:1px solid var(--rs-border-color)}.rs-stepper .steps-wrap{display:flex;align-items:center;justify-content:space-between;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;gap:8px}.rs-stepper .steps-wrap .step{flex:1}.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{padding:0 12px 12px;display:flex;align-items:center}"]
+                        template: "<div class=\"rs-stepper\">\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</div>\r\n",
+                        styles: [".rs-stepper{font-family:Arial;width:100%;border-bottom:1px solid var(--rs-border-color)}.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}"]
                     }] }
         ];
         /** @nocollapse */
         RSStepperComponent.ctorParameters = function () { return [
-            { type: CommonFunctionService }
+            { type: CommonFunctionService },
+            { type: core.ChangeDetectorRef }
         ]; };
         RSStepperComponent.propDecorators = {
+            menu: [{ type: core.ViewChild, args: ["menu", { static: false },] }],
             steps: [{ type: core.Input }],
             currentStep: [{ type: core.Input }],
             stepClick: [{ type: core.Output }],
-            unlockedStep: [{ type: core.Input }]
+            unlockedStep: [{ type: core.Input }],
+            containerRefId: [{ type: core.Input }],
+            onResize: [{ type: core.HostListener, args: ["window:resize", ["$event"],] }]
         };
         return RSStepperComponent;
     }());
     if (false) {
+        /** @type {?} */
+        RSStepperComponent.prototype.menu;
         /** @type {?} */
         RSStepperComponent.prototype.steps;
         /** @type {?} */
@@ -22027,7 +22208,20 @@
         /** @type {?} */
         RSStepperComponent.prototype.unlockedStep;
         /** @type {?} */
+        RSStepperComponent.prototype.containerRefId;
+        /** @type {?} */
+        RSStepperComponent.prototype.showBtn;
+        /** @type {?} */
+        RSStepperComponent.prototype.isAtStart;
+        /** @type {?} */
+        RSStepperComponent.prototype.isAtEnd;
+        /** @type {?} */
         RSStepperComponent.prototype.cf;
+        /**
+         * @type {?}
+         * @private
+         */
+        RSStepperComponent.prototype.ref;
     }
 
     /**