raise-common-lib 0.0.205 → 0.0.206

package/fesm2015/raise-common-lib.js

@@ -21027,15 +21027,19 @@ if (false) {
 class RSStepperComponent {
     /**
      * @param {?} cf
+     * @param {?} ref
      */
-    constructor(cf) {
+    constructor(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 {?}
      */
@@ -21049,6 +21053,15 @@ class RSStepperComponent {
         }));
         this.syncUnlockedStep();
     }
+    /**
+     * @return {?}
+     */
+    ngAfterViewInit() {
+        setTimeout((/**
+         * @return {?}
+         */
+        () => this.checkBtnShow(true)));
+    }
     /**
      * @param {?} changes
      * @return {?}
@@ -21056,6 +21069,18 @@ class RSStepperComponent {
     ngOnChanges(changes) {
         if (changes["currentStep"] && !changes["currentStep"].firstChange) {
             this.syncUnlockedStep();
+            // 当外部传入的 currentStep 变化时，滚动到对应步骤
+            setTimeout((/**
+             * @return {?}
+             */
+            () => this.scrollToStep()));
+        }
+        if ((changes["steps"] && changes["steps"].currentValue) ||
+            changes["currentStep"]) {
+            setTimeout((/**
+             * @return {?}
+             */
+            () => this.checkBtnShow()));
         }
     }
     // 同步unlockedStep的最大值
@@ -21070,33 +21095,161 @@ class RSStepperComponent {
     }
     /**
      * @param {?} step
+     * @param {?=} index
      * @return {?}
      */
-    onStepClick(step) {
+    onStepClick(step, index) {
         if (step.step <= this.unlockedStep) {
             this.currentStep = step.step;
             this.stepClick.emit(step);
+            setTimeout((/**
+             * @return {?}
+             */
+            () => this.scrollToStep(index)));
+        }
+    }
+    /**
+     * @private
+     * @param {?=} index
+     * @return {?}
+     */
+    scrollToStep(index) {
+        if (!this.menu || !this.menu.nativeElement)
+            return;
+        /** @type {?} */
+        const menuEl = this.menu.nativeElement;
+        /** @type {?} */
+        const items = menuEl.querySelectorAll(".step");
+        /** @type {?} */
+        const targetIndex = typeof index === "number"
+            ? index
+            : this.steps.findIndex((/**
+             * @param {?} s
+             * @return {?}
+             */
+            (s) => s.step === this.currentStep));
+        if (targetIndex < 0 || targetIndex >= items.length)
+            return;
+        /** @type {?} */
+        const targetEl = (/** @type {?} */ (items[targetIndex]));
+        //获取相对位置
+        /** @type {?} */
+        const containerRect = menuEl.getBoundingClientRect();
+        /** @type {?} */
+        const elementRect = targetEl.getBoundingClientRect();
+        // 计算元素相对于容器的位置
+        /** @type {?} */
+        const elementRelativeLeft = elementRect.left - containerRect.left + menuEl.scrollLeft;
+        /** @type {?} */
+        const elementWidth = elementRect.width;
+        /** @type {?} */
+        const containerWidth = menuEl.clientWidth;
+        // 计算元素中心点相对于容器的位置
+        /** @type {?} */
+        const elementCenter = elementRelativeLeft + elementWidth / 2;
+        // 目标滚动位置：让元素中心出现在可视区域中心
+        /** @type {?} */
+        const scrollTarget = elementCenter - containerWidth / 2;
+        // 限制在有效滚动范围内
+        /** @type {?} */
+        const maxScroll = Math.max(0, menuEl.scrollWidth - containerWidth);
+        /** @type {?} */
+        const finalTarget = Math.max(0, Math.min(scrollTarget, maxScroll));
+        menuEl.scrollTo({ left: finalTarget, behavior: "smooth" });
+        this.onScroll();
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    onResize(event) {
+        this.checkBtnShow();
+    }
+    /**
+     * @param {?=} init
+     * @return {?}
+     */
+    checkBtnShow(init) {
+        if (!this.menu || !this.menu.nativeElement)
+            return;
+        /** @type {?} */
+        const menuEl = this.menu.nativeElement;
+        const { scrollWidth, clientWidth } = menuEl;
+        // 判断是否需要显示滚动按钮
+        /** @type {?} */
+        let threshold = clientWidth;
+        if (this.containerRefId) {
+            /** @type {?} */
+            const containerRef = document.getElementById(this.containerRefId);
+            if (containerRef) {
+                threshold = Math.max(containerRef.offsetWidth * 0.8, 400);
+            }
         }
+        this.showBtn = scrollWidth > threshold;
+        // 初始化时滚动到当前步骤
+        if (init) {
+            setTimeout((/**
+             * @return {?}
+             */
+            () => this.scrollToStep()), 0);
+        }
+        this.onScroll();
+        this.ref.markForCheck();
+    }
+    /**
+     * @return {?}
+     */
+    scrollLeft() {
+        const { scrollLeft } = this.menu.nativeElement;
+        /** @type {?} */
+        const dis = scrollLeft / 100 < 2 ? scrollLeft + 10 : 100;
+        this.menu.nativeElement.scrollBy({ left: -dis, behavior: "smooth" });
+    }
+    /**
+     * @return {?}
+     */
+    scrollRight() {
+        const { scrollLeft, scrollWidth, clientWidth } = this.menu.nativeElement;
+        /** @type {?} */
+        const rest = scrollWidth - clientWidth - scrollLeft;
+        /** @type {?} */
+        const dis = rest / 100 < 2 ? rest + 10 : 100;
+        this.menu.nativeElement.scrollBy({ left: dis, behavior: "smooth" });
+    }
+    /**
+     * @return {?}
+     */
+    onScroll() {
+        const { scrollLeft, scrollWidth, clientWidth } = this.menu.nativeElement;
+        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 = () => [
-    { 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"],] }]
 };
 if (false) {
+    /** @type {?} */
+    RSStepperComponent.prototype.menu;
     /** @type {?} */
     RSStepperComponent.prototype.steps;
     /** @type {?} */
@@ -21106,7 +21259,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;
 }
 
 /**