raise-common-lib 0.0.205 → 0.0.206

package/fesm5/raise-common-lib.js

@@ -21735,20 +21735,21 @@ if (false) {
  * @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 EventEmitter();
         this.unlockedStep = 0; //已解锁的最大步骤
+        this.showBtn = false;
+        this.isAtStart = true;
+        this.isAtEnd = false;
     }
-    //已解锁的最大步骤
     /**
      * @return {?}
      */
-    RSStepperComponent.prototype.ngOnInit = 
-    //已解锁的最大步骤
-    /**
+    RSStepperComponent.prototype.ngOnInit = /**
      * @return {?}
      */
     function () {
@@ -21762,6 +21763,19 @@ var RSStepperComponent = /** @class */ (function () {
         }));
         this.syncUnlockedStep();
     };
+    /**
+     * @return {?}
+     */
+    RSStepperComponent.prototype.ngAfterViewInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        setTimeout((/**
+         * @return {?}
+         */
+        function () { return _this.checkBtnShow(true); }));
+    };
     /**
      * @param {?} changes
      * @return {?}
@@ -21771,8 +21785,21 @@ var RSStepperComponent = /** @class */ (function () {
      * @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的最大值
@@ -21794,38 +21821,192 @@ var RSStepperComponent = /** @class */ (function () {
     };
     /**
      * @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: 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: ChangeDetectorRef }
     ]; };
     RSStepperComponent.propDecorators = {
+        menu: [{ type: ViewChild, args: ["menu", { static: false },] }],
         steps: [{ type: Input }],
         currentStep: [{ type: Input }],
         stepClick: [{ type: Output }],
-        unlockedStep: [{ type: Input }]
+        unlockedStep: [{ type: Input }],
+        containerRefId: [{ type: Input }],
+        onResize: [{ type: HostListener, args: ["window:resize", ["$event"],] }]
     };
     return RSStepperComponent;
 }());
 if (false) {
+    /** @type {?} */
+    RSStepperComponent.prototype.menu;
     /** @type {?} */
     RSStepperComponent.prototype.steps;
     /** @type {?} */
@@ -21835,7 +22016,20 @@ if (false) {
     /** @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;
 }
 
 /**