@alauda/ui 6.5.4-beta.33 → 6.5.4-beta.34
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.
|
@@ -160,10 +160,10 @@ export class StepsComponent {
|
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
162
|
StepsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
163
|
-
StepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: StepsComponent, selector: "aui-steps", inputs: { steps: "steps", linear: "linear", currentIndex: "currentIndex", orientation: "orientation", type: "type", selectable: "selectable" }, outputs: { currentIndexChange: "currentIndexChange", selectedIndexChange: "selectedIndexChange" }, exportAs: ["auiSteps"], ngImport: i0, template: "<div\n class=\"aui-steps aui-steps--{{ orientation || 'horizontal' }} aui-steps--{{\n type || 'step'\n }}\"\n>\n <ng-container *ngFor=\"let step of steps; let i = index; let isLast = last\">\n <div\n class=\"aui-step\"\n (click)=\"select(i)\"\n [class.isLastActive]=\"isLastActive(i, steps)\"\n [class.clickable]=\"isSelectable(i)\"\n >\n <div class=\"aui-step__indicator\">\n <ng-container *ngIf=\"isProgress\">\n <ng-container [ngSwitch]=\"step.state\">\n <aui-icon\n *ngSwitchCase=\"'pending'\"\n class=\"aui-step__indicator--pending\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"rotate\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'done'\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"check\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'error'\"\n class=\"aui-step__indicator--error\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"xmark_small\"\n ></aui-icon>\n <span\n *ngSwitchDefault\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"i === activeIndex\"\n >\n {{ i + 1 }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isProgress\">\n <span\n *ngIf=\"i >= currentIndex\"\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"currentIndex === i\"\n >\n {{ i + 1 }}\n </span>\n <aui-icon\n *ngIf=\"i < currentIndex\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"_currentIndex === i\"\n icon=\"check\"\n ></aui-icon>\n </ng-container>\n <div\n *ngIf=\"!isLast && isVertical\"\n class=\"aui-steps__vertical-line aui-steps__vertical-line--{{\n step.state\n }}\"\n ></div>\n </div>\n <div\n class=\"aui-step__info aui-step__info--{{\n isProgress\n ? step.state || 'default'\n : i < _currentIndex\n ? 'done'\n : 'default'\n }}\"\n [class.aui-step__info--selected]=\"getActiveIndex() === i\"\n >\n <div class=\"aui-step__name\">\n {{ step.label }}\n </div>\n <div\n class=\"aui-step__description\"\n *ngIf=\"step.description\"\n >\n {{ step.description }}\n </div>\n </div>\n </div>\n <div\n *ngIf=\"!isLast && !isVertical\"\n class=\"aui-steps__horizontal-line\"\n ></div>\n </ng-container>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.aui-step{display:flex;align-items:center;font-weight:var(--aui-font-weight-normal)}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;display:inline-flex;color:rgb(var(--aui-color-n-4))}.aui-step__indicator--index{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:var(--aui-font-weight-bold);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__indicator--index.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--pending,.aui-step__indicator--done,.aui-step__indicator--error{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);border-width:1px;border-style:solid;border-radius:50%}.aui-step__indicator--pending{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-step__indicator--pending.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--done{color:rgb(var(--aui-color-green));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-step__indicator--done.isActive{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-step__indicator--error{color:rgb(var(--aui-color-red));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-step__indicator--error.isActive{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-step__name{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--selected,.aui-step__info--pending,.aui-step__info--done,.aui-step__info--error{color:rgb(var(--aui-color-n-1))}.aui-step__info--selected .aui-step__name{font-weight:var(--aui-font-weight-bold)}.aui-step.clickable{cursor:pointer}.aui-steps--progress .aui-step.clickable .aui-step__info:hover{color:rgb(var(--aui-color-primary))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;min-width:40px;max-width:200px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 40px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}aui-steps .aui-steps .aui-step__indicator-icon{font-size:var(--aui-icon-size-xl)}\n"], components: [{ type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
163
|
+
StepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: StepsComponent, selector: "aui-steps", inputs: { steps: "steps", linear: "linear", currentIndex: "currentIndex", orientation: "orientation", type: "type", selectable: "selectable" }, outputs: { currentIndexChange: "currentIndexChange", selectedIndexChange: "selectedIndexChange" }, exportAs: ["auiSteps"], ngImport: i0, template: "<div\n class=\"aui-steps aui-steps--{{ orientation || 'horizontal' }} aui-steps--{{\n type || 'step'\n }}\"\n>\n <ng-container *ngFor=\"let step of steps; let i = index; let isLast = last\">\n <div\n class=\"aui-step\"\n (click)=\"select(i)\"\n [class.isLastActive]=\"isLastActive(i, steps)\"\n [class.clickable]=\"isSelectable(i)\"\n >\n <div class=\"aui-step__indicator\">\n <ng-container *ngIf=\"isProgress\">\n <ng-container [ngSwitch]=\"step.state\">\n <aui-icon\n *ngSwitchCase=\"'pending'\"\n class=\"aui-step__indicator--pending\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"rotate\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'done'\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"check\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'error'\"\n class=\"aui-step__indicator--error\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"xmark_small\"\n ></aui-icon>\n <span\n *ngSwitchDefault\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"i === activeIndex\"\n >\n {{ i + 1 }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isProgress\">\n <span\n *ngIf=\"i >= currentIndex\"\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"currentIndex === i\"\n >\n {{ i + 1 }}\n </span>\n <aui-icon\n *ngIf=\"i < currentIndex\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"_currentIndex === i\"\n icon=\"check\"\n ></aui-icon>\n </ng-container>\n <div\n *ngIf=\"!isLast && isVertical\"\n class=\"aui-steps__vertical-line aui-steps__vertical-line--{{\n step.state\n }}\"\n ></div>\n </div>\n <div\n class=\"aui-step__info aui-step__info--{{\n isProgress\n ? step.state || 'default'\n : i < _currentIndex\n ? 'done'\n : 'default'\n }}\"\n [class.aui-step__info--selected]=\"getActiveIndex() === i\"\n >\n <div class=\"aui-step__name\">\n {{ step.label }}\n </div>\n <div\n class=\"aui-step__description\"\n *ngIf=\"step.description\"\n >\n {{ step.description }}\n </div>\n </div>\n </div>\n <div\n *ngIf=\"!isLast && !isVertical\"\n class=\"aui-steps__horizontal-line\"\n ></div>\n </ng-container>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.aui-step{display:flex;align-items:center;font-weight:var(--aui-font-weight-normal)}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;display:inline-flex;color:rgb(var(--aui-color-n-4))}.aui-step__indicator--index{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:var(--aui-font-weight-bold);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__indicator--index.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--pending,.aui-step__indicator--done,.aui-step__indicator--error{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);border-width:1px;border-style:solid;border-radius:50%}.aui-step__indicator--pending{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6));transform-origin:center;animation:spin 2s infinite linear}.aui-step__indicator--pending.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--done{color:rgb(var(--aui-color-green));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-step__indicator--done.isActive{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-step__indicator--error{color:rgb(var(--aui-color-red));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-step__indicator--error.isActive{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-step__name{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--selected,.aui-step__info--pending,.aui-step__info--done,.aui-step__info--error{color:rgb(var(--aui-color-n-1))}.aui-step__info--selected .aui-step__name{font-weight:var(--aui-font-weight-bold)}.aui-step.clickable{cursor:pointer}.aui-steps--progress .aui-step.clickable .aui-step__info:hover{color:rgb(var(--aui-color-primary))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;min-width:40px;max-width:200px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 40px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}aui-steps .aui-steps .aui-step__indicator-icon{font-size:var(--aui-icon-size-xl)}\n"], components: [{ type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
164
164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StepsComponent, decorators: [{
|
|
165
165
|
type: Component,
|
|
166
|
-
args: [{ selector: 'aui-steps', exportAs: 'auiSteps', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"aui-steps aui-steps--{{ orientation || 'horizontal' }} aui-steps--{{\n type || 'step'\n }}\"\n>\n <ng-container *ngFor=\"let step of steps; let i = index; let isLast = last\">\n <div\n class=\"aui-step\"\n (click)=\"select(i)\"\n [class.isLastActive]=\"isLastActive(i, steps)\"\n [class.clickable]=\"isSelectable(i)\"\n >\n <div class=\"aui-step__indicator\">\n <ng-container *ngIf=\"isProgress\">\n <ng-container [ngSwitch]=\"step.state\">\n <aui-icon\n *ngSwitchCase=\"'pending'\"\n class=\"aui-step__indicator--pending\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"rotate\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'done'\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"check\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'error'\"\n class=\"aui-step__indicator--error\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"xmark_small\"\n ></aui-icon>\n <span\n *ngSwitchDefault\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"i === activeIndex\"\n >\n {{ i + 1 }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isProgress\">\n <span\n *ngIf=\"i >= currentIndex\"\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"currentIndex === i\"\n >\n {{ i + 1 }}\n </span>\n <aui-icon\n *ngIf=\"i < currentIndex\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"_currentIndex === i\"\n icon=\"check\"\n ></aui-icon>\n </ng-container>\n <div\n *ngIf=\"!isLast && isVertical\"\n class=\"aui-steps__vertical-line aui-steps__vertical-line--{{\n step.state\n }}\"\n ></div>\n </div>\n <div\n class=\"aui-step__info aui-step__info--{{\n isProgress\n ? step.state || 'default'\n : i < _currentIndex\n ? 'done'\n : 'default'\n }}\"\n [class.aui-step__info--selected]=\"getActiveIndex() === i\"\n >\n <div class=\"aui-step__name\">\n {{ step.label }}\n </div>\n <div\n class=\"aui-step__description\"\n *ngIf=\"step.description\"\n >\n {{ step.description }}\n </div>\n </div>\n </div>\n <div\n *ngIf=\"!isLast && !isVertical\"\n class=\"aui-steps__horizontal-line\"\n ></div>\n </ng-container>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.aui-step{display:flex;align-items:center;font-weight:var(--aui-font-weight-normal)}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;display:inline-flex;color:rgb(var(--aui-color-n-4))}.aui-step__indicator--index{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:var(--aui-font-weight-bold);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__indicator--index.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--pending,.aui-step__indicator--done,.aui-step__indicator--error{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);border-width:1px;border-style:solid;border-radius:50%}.aui-step__indicator--pending{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-step__indicator--pending.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--done{color:rgb(var(--aui-color-green));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-step__indicator--done.isActive{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-step__indicator--error{color:rgb(var(--aui-color-red));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-step__indicator--error.isActive{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-step__name{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--selected,.aui-step__info--pending,.aui-step__info--done,.aui-step__info--error{color:rgb(var(--aui-color-n-1))}.aui-step__info--selected .aui-step__name{font-weight:var(--aui-font-weight-bold)}.aui-step.clickable{cursor:pointer}.aui-steps--progress .aui-step.clickable .aui-step__info:hover{color:rgb(var(--aui-color-primary))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;min-width:40px;max-width:200px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 40px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}aui-steps .aui-steps .aui-step__indicator-icon{font-size:var(--aui-icon-size-xl)}\n"] }]
|
|
166
|
+
args: [{ selector: 'aui-steps', exportAs: 'auiSteps', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"aui-steps aui-steps--{{ orientation || 'horizontal' }} aui-steps--{{\n type || 'step'\n }}\"\n>\n <ng-container *ngFor=\"let step of steps; let i = index; let isLast = last\">\n <div\n class=\"aui-step\"\n (click)=\"select(i)\"\n [class.isLastActive]=\"isLastActive(i, steps)\"\n [class.clickable]=\"isSelectable(i)\"\n >\n <div class=\"aui-step__indicator\">\n <ng-container *ngIf=\"isProgress\">\n <ng-container [ngSwitch]=\"step.state\">\n <aui-icon\n *ngSwitchCase=\"'pending'\"\n class=\"aui-step__indicator--pending\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"rotate\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'done'\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"check\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'error'\"\n class=\"aui-step__indicator--error\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"xmark_small\"\n ></aui-icon>\n <span\n *ngSwitchDefault\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"i === activeIndex\"\n >\n {{ i + 1 }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isProgress\">\n <span\n *ngIf=\"i >= currentIndex\"\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"currentIndex === i\"\n >\n {{ i + 1 }}\n </span>\n <aui-icon\n *ngIf=\"i < currentIndex\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"_currentIndex === i\"\n icon=\"check\"\n ></aui-icon>\n </ng-container>\n <div\n *ngIf=\"!isLast && isVertical\"\n class=\"aui-steps__vertical-line aui-steps__vertical-line--{{\n step.state\n }}\"\n ></div>\n </div>\n <div\n class=\"aui-step__info aui-step__info--{{\n isProgress\n ? step.state || 'default'\n : i < _currentIndex\n ? 'done'\n : 'default'\n }}\"\n [class.aui-step__info--selected]=\"getActiveIndex() === i\"\n >\n <div class=\"aui-step__name\">\n {{ step.label }}\n </div>\n <div\n class=\"aui-step__description\"\n *ngIf=\"step.description\"\n >\n {{ step.description }}\n </div>\n </div>\n </div>\n <div\n *ngIf=\"!isLast && !isVertical\"\n class=\"aui-steps__horizontal-line\"\n ></div>\n </ng-container>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.aui-step{display:flex;align-items:center;font-weight:var(--aui-font-weight-normal)}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;display:inline-flex;color:rgb(var(--aui-color-n-4))}.aui-step__indicator--index{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:var(--aui-font-weight-bold);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__indicator--index.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--pending,.aui-step__indicator--done,.aui-step__indicator--error{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);border-width:1px;border-style:solid;border-radius:50%}.aui-step__indicator--pending{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6));transform-origin:center;animation:spin 2s infinite linear}.aui-step__indicator--pending.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--done{color:rgb(var(--aui-color-green));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-step__indicator--done.isActive{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-step__indicator--error{color:rgb(var(--aui-color-red));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-step__indicator--error.isActive{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-step__name{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--selected,.aui-step__info--pending,.aui-step__info--done,.aui-step__info--error{color:rgb(var(--aui-color-n-1))}.aui-step__info--selected .aui-step__name{font-weight:var(--aui-font-weight-bold)}.aui-step.clickable{cursor:pointer}.aui-steps--progress .aui-step.clickable .aui-step__info:hover{color:rgb(var(--aui-color-primary))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;min-width:40px;max-width:200px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 40px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}aui-steps .aui-steps .aui-step__indicator-icon{font-size:var(--aui-icon-size-xl)}\n"] }]
|
|
167
167
|
}], propDecorators: { steps: [{
|
|
168
168
|
type: Input
|
|
169
169
|
}], linear: [{
|
package/fesm2015/alauda-ui.mjs
CHANGED
|
@@ -10201,10 +10201,10 @@ class StepsComponent {
|
|
|
10201
10201
|
}
|
|
10202
10202
|
}
|
|
10203
10203
|
StepsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10204
|
-
StepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: StepsComponent, selector: "aui-steps", inputs: { steps: "steps", linear: "linear", currentIndex: "currentIndex", orientation: "orientation", type: "type", selectable: "selectable" }, outputs: { currentIndexChange: "currentIndexChange", selectedIndexChange: "selectedIndexChange" }, exportAs: ["auiSteps"], ngImport: i0, template: "<div\n class=\"aui-steps aui-steps--{{ orientation || 'horizontal' }} aui-steps--{{\n type || 'step'\n }}\"\n>\n <ng-container *ngFor=\"let step of steps; let i = index; let isLast = last\">\n <div\n class=\"aui-step\"\n (click)=\"select(i)\"\n [class.isLastActive]=\"isLastActive(i, steps)\"\n [class.clickable]=\"isSelectable(i)\"\n >\n <div class=\"aui-step__indicator\">\n <ng-container *ngIf=\"isProgress\">\n <ng-container [ngSwitch]=\"step.state\">\n <aui-icon\n *ngSwitchCase=\"'pending'\"\n class=\"aui-step__indicator--pending\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"rotate\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'done'\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"check\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'error'\"\n class=\"aui-step__indicator--error\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"xmark_small\"\n ></aui-icon>\n <span\n *ngSwitchDefault\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"i === activeIndex\"\n >\n {{ i + 1 }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isProgress\">\n <span\n *ngIf=\"i >= currentIndex\"\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"currentIndex === i\"\n >\n {{ i + 1 }}\n </span>\n <aui-icon\n *ngIf=\"i < currentIndex\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"_currentIndex === i\"\n icon=\"check\"\n ></aui-icon>\n </ng-container>\n <div\n *ngIf=\"!isLast && isVertical\"\n class=\"aui-steps__vertical-line aui-steps__vertical-line--{{\n step.state\n }}\"\n ></div>\n </div>\n <div\n class=\"aui-step__info aui-step__info--{{\n isProgress\n ? step.state || 'default'\n : i < _currentIndex\n ? 'done'\n : 'default'\n }}\"\n [class.aui-step__info--selected]=\"getActiveIndex() === i\"\n >\n <div class=\"aui-step__name\">\n {{ step.label }}\n </div>\n <div\n class=\"aui-step__description\"\n *ngIf=\"step.description\"\n >\n {{ step.description }}\n </div>\n </div>\n </div>\n <div\n *ngIf=\"!isLast && !isVertical\"\n class=\"aui-steps__horizontal-line\"\n ></div>\n </ng-container>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.aui-step{display:flex;align-items:center;font-weight:var(--aui-font-weight-normal)}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;display:inline-flex;color:rgb(var(--aui-color-n-4))}.aui-step__indicator--index{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:var(--aui-font-weight-bold);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__indicator--index.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--pending,.aui-step__indicator--done,.aui-step__indicator--error{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);border-width:1px;border-style:solid;border-radius:50%}.aui-step__indicator--pending{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-step__indicator--pending.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--done{color:rgb(var(--aui-color-green));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-step__indicator--done.isActive{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-step__indicator--error{color:rgb(var(--aui-color-red));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-step__indicator--error.isActive{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-step__name{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--selected,.aui-step__info--pending,.aui-step__info--done,.aui-step__info--error{color:rgb(var(--aui-color-n-1))}.aui-step__info--selected .aui-step__name{font-weight:var(--aui-font-weight-bold)}.aui-step.clickable{cursor:pointer}.aui-steps--progress .aui-step.clickable .aui-step__info:hover{color:rgb(var(--aui-color-primary))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;min-width:40px;max-width:200px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 40px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}aui-steps .aui-steps .aui-step__indicator-icon{font-size:var(--aui-icon-size-xl)}\n"], components: [{ type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10204
|
+
StepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: StepsComponent, selector: "aui-steps", inputs: { steps: "steps", linear: "linear", currentIndex: "currentIndex", orientation: "orientation", type: "type", selectable: "selectable" }, outputs: { currentIndexChange: "currentIndexChange", selectedIndexChange: "selectedIndexChange" }, exportAs: ["auiSteps"], ngImport: i0, template: "<div\n class=\"aui-steps aui-steps--{{ orientation || 'horizontal' }} aui-steps--{{\n type || 'step'\n }}\"\n>\n <ng-container *ngFor=\"let step of steps; let i = index; let isLast = last\">\n <div\n class=\"aui-step\"\n (click)=\"select(i)\"\n [class.isLastActive]=\"isLastActive(i, steps)\"\n [class.clickable]=\"isSelectable(i)\"\n >\n <div class=\"aui-step__indicator\">\n <ng-container *ngIf=\"isProgress\">\n <ng-container [ngSwitch]=\"step.state\">\n <aui-icon\n *ngSwitchCase=\"'pending'\"\n class=\"aui-step__indicator--pending\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"rotate\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'done'\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"check\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'error'\"\n class=\"aui-step__indicator--error\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"xmark_small\"\n ></aui-icon>\n <span\n *ngSwitchDefault\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"i === activeIndex\"\n >\n {{ i + 1 }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isProgress\">\n <span\n *ngIf=\"i >= currentIndex\"\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"currentIndex === i\"\n >\n {{ i + 1 }}\n </span>\n <aui-icon\n *ngIf=\"i < currentIndex\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"_currentIndex === i\"\n icon=\"check\"\n ></aui-icon>\n </ng-container>\n <div\n *ngIf=\"!isLast && isVertical\"\n class=\"aui-steps__vertical-line aui-steps__vertical-line--{{\n step.state\n }}\"\n ></div>\n </div>\n <div\n class=\"aui-step__info aui-step__info--{{\n isProgress\n ? step.state || 'default'\n : i < _currentIndex\n ? 'done'\n : 'default'\n }}\"\n [class.aui-step__info--selected]=\"getActiveIndex() === i\"\n >\n <div class=\"aui-step__name\">\n {{ step.label }}\n </div>\n <div\n class=\"aui-step__description\"\n *ngIf=\"step.description\"\n >\n {{ step.description }}\n </div>\n </div>\n </div>\n <div\n *ngIf=\"!isLast && !isVertical\"\n class=\"aui-steps__horizontal-line\"\n ></div>\n </ng-container>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.aui-step{display:flex;align-items:center;font-weight:var(--aui-font-weight-normal)}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;display:inline-flex;color:rgb(var(--aui-color-n-4))}.aui-step__indicator--index{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:var(--aui-font-weight-bold);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__indicator--index.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--pending,.aui-step__indicator--done,.aui-step__indicator--error{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);border-width:1px;border-style:solid;border-radius:50%}.aui-step__indicator--pending{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6));transform-origin:center;animation:spin 2s infinite linear}.aui-step__indicator--pending.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--done{color:rgb(var(--aui-color-green));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-step__indicator--done.isActive{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-step__indicator--error{color:rgb(var(--aui-color-red));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-step__indicator--error.isActive{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-step__name{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--selected,.aui-step__info--pending,.aui-step__info--done,.aui-step__info--error{color:rgb(var(--aui-color-n-1))}.aui-step__info--selected .aui-step__name{font-weight:var(--aui-font-weight-bold)}.aui-step.clickable{cursor:pointer}.aui-steps--progress .aui-step.clickable .aui-step__info:hover{color:rgb(var(--aui-color-primary))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;min-width:40px;max-width:200px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 40px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}aui-steps .aui-steps .aui-step__indicator-icon{font-size:var(--aui-icon-size-xl)}\n"], components: [{ type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10205
10205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StepsComponent, decorators: [{
|
|
10206
10206
|
type: Component,
|
|
10207
|
-
args: [{ selector: 'aui-steps', exportAs: 'auiSteps', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"aui-steps aui-steps--{{ orientation || 'horizontal' }} aui-steps--{{\n type || 'step'\n }}\"\n>\n <ng-container *ngFor=\"let step of steps; let i = index; let isLast = last\">\n <div\n class=\"aui-step\"\n (click)=\"select(i)\"\n [class.isLastActive]=\"isLastActive(i, steps)\"\n [class.clickable]=\"isSelectable(i)\"\n >\n <div class=\"aui-step__indicator\">\n <ng-container *ngIf=\"isProgress\">\n <ng-container [ngSwitch]=\"step.state\">\n <aui-icon\n *ngSwitchCase=\"'pending'\"\n class=\"aui-step__indicator--pending\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"rotate\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'done'\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"check\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'error'\"\n class=\"aui-step__indicator--error\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"xmark_small\"\n ></aui-icon>\n <span\n *ngSwitchDefault\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"i === activeIndex\"\n >\n {{ i + 1 }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isProgress\">\n <span\n *ngIf=\"i >= currentIndex\"\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"currentIndex === i\"\n >\n {{ i + 1 }}\n </span>\n <aui-icon\n *ngIf=\"i < currentIndex\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"_currentIndex === i\"\n icon=\"check\"\n ></aui-icon>\n </ng-container>\n <div\n *ngIf=\"!isLast && isVertical\"\n class=\"aui-steps__vertical-line aui-steps__vertical-line--{{\n step.state\n }}\"\n ></div>\n </div>\n <div\n class=\"aui-step__info aui-step__info--{{\n isProgress\n ? step.state || 'default'\n : i < _currentIndex\n ? 'done'\n : 'default'\n }}\"\n [class.aui-step__info--selected]=\"getActiveIndex() === i\"\n >\n <div class=\"aui-step__name\">\n {{ step.label }}\n </div>\n <div\n class=\"aui-step__description\"\n *ngIf=\"step.description\"\n >\n {{ step.description }}\n </div>\n </div>\n </div>\n <div\n *ngIf=\"!isLast && !isVertical\"\n class=\"aui-steps__horizontal-line\"\n ></div>\n </ng-container>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.aui-step{display:flex;align-items:center;font-weight:var(--aui-font-weight-normal)}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;display:inline-flex;color:rgb(var(--aui-color-n-4))}.aui-step__indicator--index{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:var(--aui-font-weight-bold);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__indicator--index.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--pending,.aui-step__indicator--done,.aui-step__indicator--error{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);border-width:1px;border-style:solid;border-radius:50%}.aui-step__indicator--pending{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-step__indicator--pending.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--done{color:rgb(var(--aui-color-green));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-step__indicator--done.isActive{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-step__indicator--error{color:rgb(var(--aui-color-red));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-step__indicator--error.isActive{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-step__name{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--selected,.aui-step__info--pending,.aui-step__info--done,.aui-step__info--error{color:rgb(var(--aui-color-n-1))}.aui-step__info--selected .aui-step__name{font-weight:var(--aui-font-weight-bold)}.aui-step.clickable{cursor:pointer}.aui-steps--progress .aui-step.clickable .aui-step__info:hover{color:rgb(var(--aui-color-primary))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;min-width:40px;max-width:200px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 40px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}aui-steps .aui-steps .aui-step__indicator-icon{font-size:var(--aui-icon-size-xl)}\n"] }]
|
|
10207
|
+
args: [{ selector: 'aui-steps', exportAs: 'auiSteps', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"aui-steps aui-steps--{{ orientation || 'horizontal' }} aui-steps--{{\n type || 'step'\n }}\"\n>\n <ng-container *ngFor=\"let step of steps; let i = index; let isLast = last\">\n <div\n class=\"aui-step\"\n (click)=\"select(i)\"\n [class.isLastActive]=\"isLastActive(i, steps)\"\n [class.clickable]=\"isSelectable(i)\"\n >\n <div class=\"aui-step__indicator\">\n <ng-container *ngIf=\"isProgress\">\n <ng-container [ngSwitch]=\"step.state\">\n <aui-icon\n *ngSwitchCase=\"'pending'\"\n class=\"aui-step__indicator--pending\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"rotate\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'done'\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"check\"\n ></aui-icon>\n <aui-icon\n *ngSwitchCase=\"'error'\"\n class=\"aui-step__indicator--error\"\n [class.isActive]=\"i === activeIndex\"\n icon=\"xmark_small\"\n ></aui-icon>\n <span\n *ngSwitchDefault\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"i === activeIndex\"\n >\n {{ i + 1 }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isProgress\">\n <span\n *ngIf=\"i >= currentIndex\"\n class=\"aui-step__indicator--index\"\n [class.isActive]=\"currentIndex === i\"\n >\n {{ i + 1 }}\n </span>\n <aui-icon\n *ngIf=\"i < currentIndex\"\n class=\"aui-step__indicator--done\"\n [class.isActive]=\"_currentIndex === i\"\n icon=\"check\"\n ></aui-icon>\n </ng-container>\n <div\n *ngIf=\"!isLast && isVertical\"\n class=\"aui-steps__vertical-line aui-steps__vertical-line--{{\n step.state\n }}\"\n ></div>\n </div>\n <div\n class=\"aui-step__info aui-step__info--{{\n isProgress\n ? step.state || 'default'\n : i < _currentIndex\n ? 'done'\n : 'default'\n }}\"\n [class.aui-step__info--selected]=\"getActiveIndex() === i\"\n >\n <div class=\"aui-step__name\">\n {{ step.label }}\n </div>\n <div\n class=\"aui-step__description\"\n *ngIf=\"step.description\"\n >\n {{ step.description }}\n </div>\n </div>\n </div>\n <div\n *ngIf=\"!isLast && !isVertical\"\n class=\"aui-steps__horizontal-line\"\n ></div>\n </ng-container>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.aui-step{display:flex;align-items:center;font-weight:var(--aui-font-weight-normal)}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;display:inline-flex;color:rgb(var(--aui-color-n-4))}.aui-step__indicator--index{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:var(--aui-font-weight-bold);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__indicator--index.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--pending,.aui-step__indicator--done,.aui-step__indicator--error{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);border-width:1px;border-style:solid;border-radius:50%}.aui-step__indicator--pending{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6));transform-origin:center;animation:spin 2s infinite linear}.aui-step__indicator--pending.isActive{color:#fff;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-step__indicator--done{color:rgb(var(--aui-color-green));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-step__indicator--done.isActive{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-step__indicator--error{color:rgb(var(--aui-color-red));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-step__indicator--error.isActive{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-step__name{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--selected,.aui-step__info--pending,.aui-step__info--done,.aui-step__info--error{color:rgb(var(--aui-color-n-1))}.aui-step__info--selected .aui-step__name{font-weight:var(--aui-font-weight-bold)}.aui-step.clickable{cursor:pointer}.aui-steps--progress .aui-step.clickable .aui-step__info:hover{color:rgb(var(--aui-color-primary))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;min-width:40px;max-width:200px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 40px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}aui-steps .aui-steps .aui-step__indicator-icon{font-size:var(--aui-icon-size-xl)}\n"] }]
|
|
10208
10208
|
}], propDecorators: { steps: [{
|
|
10209
10209
|
type: Input
|
|
10210
10210
|
}], linear: [{
|