@crediblefinance/credible-ui
Version:
Credible's standard UI library
32 lines • 13.2 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CfVerticalProgressBarComponent {
selectedIndex = 0;
currentState = '';
steps = [];
currentStep = 0;
changeStep = new EventEmitter();
theme = 'dark';
constructor() { }
ngOnInit() {
}
changeStepHandler(index) {
this.changeStep.emit(index);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfVerticalProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfVerticalProgressBarComponent, selector: "cf-vertical-progress-bar", inputs: { steps: "steps", currentStep: "currentStep", theme: "theme" }, outputs: { changeStep: "changeStep" }, ngImport: i0, template: "<div class=\"cf-vertical-progress-bar\" [ngClass]=\"theme\">\n <div class=\"step-container\" *ngFor=\"let step of steps; let i = index\">\n <div class=\"step-heading\">\n <div class=\"step\" [ngClass]=\"{\n 'step-active': i === currentStep,\n 'step-complete': step.completed\n }\" (click)=\"changeStepHandler(i)\">\n <div class=\"step-counter\">\n <span *ngIf=\"!step.completed\" style=\"bottom: 5px; position: relative;\">{{ i + 1 }}</span>\n <i class=\"fa-solid fa-check\" *ngIf=\"step.completed\"></i>\n </div>\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </div>\n\n <div class=\"step-content\">\n {{ step.content }}\n </div>\n </div>\n</div>", styles: [".cf-vertical-progress-bar .step-container{padding-left:0rem;padding-right:1rem;padding-bottom:.5rem}.cf-vertical-progress-bar .step-container .step-heading{display:flex;justify-content:left;margin-top:0;gap:.5rem}.cf-vertical-progress-bar .step-container .step-heading .step{display:flex;gap:.5rem;align-items:center}.cf-vertical-progress-bar .step-container .step-heading .step:hover{cursor:pointer}.cf-vertical-progress-bar .step-container .step-heading .step .step-counter{border-radius:50%;background-color:#24252b;color:#d3d3d3;width:30px;height:30px;font-size:.9rem;align-items:center;text-align:center;display:grid}.cf-vertical-progress-bar .step-container .step-heading .step .step-title{color:#d3d3d3}.cf-vertical-progress-bar .step-container .step-heading .step .step-divider{color:#d3d3d3;width:100px}.cf-vertical-progress-bar .step-container .step-heading .step:last-child .step-divider{display:none!important}.cf-vertical-progress-bar .step-container .step-heading .step-active .step-counter{font-weight:500}.cf-vertical-progress-bar .step-container .step-heading .step-active .step-title{color:#fff;font-weight:500}.cf-vertical-progress-bar .step-container .step-heading .step-complete .step-counter{background-color:#cf0;color:#000;width:25px;height:25px}.cf-vertical-progress-bar .step-container .step-heading .step-complete .step-title{color:#cf0}.cf-vertical-progress-bar .step-container .step-content{padding-left:1rem;margin-left:.75rem;margin-top:1rem;min-height:1rem}.cf-vertical-progress-bar .step-container:last-child .step-content{border-left:none}.cf-vertical-progress-bar.dark .step-container .step-heading .step .step-counter{background-color:#24252b;color:#d3d3d3}.cf-vertical-progress-bar.dark .step-container .step-heading .step .step-title,.cf-vertical-progress-bar.dark .step-container .step-heading .step .step-divider{color:#d3d3d3}.cf-vertical-progress-bar.dark .step-container .step-heading .step-active .step-title{color:#fff}.cf-vertical-progress-bar.dark .step-container .step-heading .step-complete .step-counter{background-color:#cf0;color:#000}.cf-vertical-progress-bar.dark .step-container .step-heading .step-complete .step-title{color:#cf0;font-weight:400}.cf-vertical-progress-bar.dark .step-container .step-content{border-left:.1px solid grey;color:#d3d3d3}.cf-vertical-progress-bar.light .step-container .step-heading .step .step-counter{background-color:#d3d3d3;color:#000}.cf-vertical-progress-bar.light .step-container .step-heading .step .step-title,.cf-vertical-progress-bar.light .step-container .step-heading .step .step-divider{color:gray}.cf-vertical-progress-bar.light .step-container .step-heading .step-active .step-title{color:#000}.cf-vertical-progress-bar.light .step-container .step-heading .step-complete .step-counter{background-color:#cf0;color:#000}.cf-vertical-progress-bar.light .step-container .step-heading .step-complete .step-title{color:#000;font-weight:700}.cf-vertical-progress-bar.light .step-container .step-content{color:gray;border-left:.2px solid lightgrey}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfVerticalProgressBarComponent, decorators: [{
type: Component,
args: [{ selector: 'cf-vertical-progress-bar', template: "<div class=\"cf-vertical-progress-bar\" [ngClass]=\"theme\">\n <div class=\"step-container\" *ngFor=\"let step of steps; let i = index\">\n <div class=\"step-heading\">\n <div class=\"step\" [ngClass]=\"{\n 'step-active': i === currentStep,\n 'step-complete': step.completed\n }\" (click)=\"changeStepHandler(i)\">\n <div class=\"step-counter\">\n <span *ngIf=\"!step.completed\" style=\"bottom: 5px; position: relative;\">{{ i + 1 }}</span>\n <i class=\"fa-solid fa-check\" *ngIf=\"step.completed\"></i>\n </div>\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </div>\n\n <div class=\"step-content\">\n {{ step.content }}\n </div>\n </div>\n</div>", styles: [".cf-vertical-progress-bar .step-container{padding-left:0rem;padding-right:1rem;padding-bottom:.5rem}.cf-vertical-progress-bar .step-container .step-heading{display:flex;justify-content:left;margin-top:0;gap:.5rem}.cf-vertical-progress-bar .step-container .step-heading .step{display:flex;gap:.5rem;align-items:center}.cf-vertical-progress-bar .step-container .step-heading .step:hover{cursor:pointer}.cf-vertical-progress-bar .step-container .step-heading .step .step-counter{border-radius:50%;background-color:#24252b;color:#d3d3d3;width:30px;height:30px;font-size:.9rem;align-items:center;text-align:center;display:grid}.cf-vertical-progress-bar .step-container .step-heading .step .step-title{color:#d3d3d3}.cf-vertical-progress-bar .step-container .step-heading .step .step-divider{color:#d3d3d3;width:100px}.cf-vertical-progress-bar .step-container .step-heading .step:last-child .step-divider{display:none!important}.cf-vertical-progress-bar .step-container .step-heading .step-active .step-counter{font-weight:500}.cf-vertical-progress-bar .step-container .step-heading .step-active .step-title{color:#fff;font-weight:500}.cf-vertical-progress-bar .step-container .step-heading .step-complete .step-counter{background-color:#cf0;color:#000;width:25px;height:25px}.cf-vertical-progress-bar .step-container .step-heading .step-complete .step-title{color:#cf0}.cf-vertical-progress-bar .step-container .step-content{padding-left:1rem;margin-left:.75rem;margin-top:1rem;min-height:1rem}.cf-vertical-progress-bar .step-container:last-child .step-content{border-left:none}.cf-vertical-progress-bar.dark .step-container .step-heading .step .step-counter{background-color:#24252b;color:#d3d3d3}.cf-vertical-progress-bar.dark .step-container .step-heading .step .step-title,.cf-vertical-progress-bar.dark .step-container .step-heading .step .step-divider{color:#d3d3d3}.cf-vertical-progress-bar.dark .step-container .step-heading .step-active .step-title{color:#fff}.cf-vertical-progress-bar.dark .step-container .step-heading .step-complete .step-counter{background-color:#cf0;color:#000}.cf-vertical-progress-bar.dark .step-container .step-heading .step-complete .step-title{color:#cf0;font-weight:400}.cf-vertical-progress-bar.dark .step-container .step-content{border-left:.1px solid grey;color:#d3d3d3}.cf-vertical-progress-bar.light .step-container .step-heading .step .step-counter{background-color:#d3d3d3;color:#000}.cf-vertical-progress-bar.light .step-container .step-heading .step .step-title,.cf-vertical-progress-bar.light .step-container .step-heading .step .step-divider{color:gray}.cf-vertical-progress-bar.light .step-container .step-heading .step-active .step-title{color:#000}.cf-vertical-progress-bar.light .step-container .step-heading .step-complete .step-counter{background-color:#cf0;color:#000}.cf-vertical-progress-bar.light .step-container .step-heading .step-complete .step-title{color:#000;font-weight:700}.cf-vertical-progress-bar.light .step-container .step-content{color:gray;border-left:.2px solid lightgrey}\n"] }]
}], ctorParameters: () => [], propDecorators: { steps: [{
type: Input
}], currentStep: [{
type: Input
}], changeStep: [{
type: Output
}], theme: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2YtdmVydGljYWwtcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NyZWRpYmxlLXVpL3NyYy9saWIvY2YtdmVydGljYWwtcHJvZ3Jlc3MtYmFyL2NmLXZlcnRpY2FsLXByb2dyZXNzLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLXZlcnRpY2FsLXByb2dyZXNzLWJhci9jZi12ZXJ0aWNhbC1wcm9ncmVzcy1iYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUM5QixNQUFNLEVBQ1QsTUFBTSxlQUFlLENBQUM7OztBQVF2QixNQUFNLE9BQU8sOEJBQThCO0lBQ3ZDLGFBQWEsR0FBVyxDQUFDLENBQUM7SUFDMUIsWUFBWSxHQUFHLEVBQUUsQ0FBQztJQUNULEtBQUssR0FBeUIsRUFBRSxDQUFDO0lBQ2pDLFdBQVcsR0FBVyxDQUFDLENBQUM7SUFDdkIsVUFBVSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7SUFDekMsS0FBSyxHQUFXLE1BQU0sQ0FBQztJQUVoQyxnQkFBZ0IsQ0FBQztJQUVqQixRQUFRO0lBRVIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEtBQWE7UUFDM0IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDaEMsQ0FBQzt1R0FoQlEsOEJBQThCOzJGQUE5Qiw4QkFBOEIsK0tDWDNDLDIzQkFtQk07OzJGRFJPLDhCQUE4QjtrQkFMMUMsU0FBUzsrQkFDSSwwQkFBMEI7d0RBTzNCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU07Z0JBQ0UsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCxcbiAgICBPdXRwdXRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgSVByb2dyZXNzU3RlcCBmcm9tICcuL0lQcm9ncmVzc1N0ZXAuaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdjZi12ZXJ0aWNhbC1wcm9ncmVzcy1iYXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9jZi12ZXJ0aWNhbC1wcm9ncmVzcy1iYXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2NmLXZlcnRpY2FsLXByb2dyZXNzLWJhci5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIENmVmVydGljYWxQcm9ncmVzc0JhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgc2VsZWN0ZWRJbmRleDogbnVtYmVyID0gMDtcbiAgICBjdXJyZW50U3RhdGUgPSAnJztcbiAgICBASW5wdXQoKSBzdGVwczogQXJyYXk8SVByb2dyZXNzU3RlcD4gPSBbXTtcbiAgICBASW5wdXQoKSBjdXJyZW50U3RlcDogbnVtYmVyID0gMDtcbiAgICBAT3V0cHV0KCkgY2hhbmdlU3RlcCA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuICAgIEBJbnB1dCgpIHRoZW1lOiBzdHJpbmcgPSAnZGFyayc7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG5cbiAgICB9XG5cbiAgICBjaGFuZ2VTdGVwSGFuZGxlcihpbmRleDogbnVtYmVyKSB7XG4gICAgICAgIHRoaXMuY2hhbmdlU3RlcC5lbWl0KGluZGV4KTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY2YtdmVydGljYWwtcHJvZ3Jlc3MtYmFyXCIgW25nQ2xhc3NdPVwidGhlbWVcIj5cbiAgICA8ZGl2IGNsYXNzPVwic3RlcC1jb250YWluZXJcIiAqbmdGb3I9XCJsZXQgc3RlcCBvZiBzdGVwczsgbGV0IGkgPSBpbmRleFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic3RlcC1oZWFkaW5nXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic3RlcFwiIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAnc3RlcC1hY3RpdmUnOiBpID09PSBjdXJyZW50U3RlcCxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAnc3RlcC1jb21wbGV0ZSc6IHN0ZXAuY29tcGxldGVkXG4gICAgICAgICAgICAgICAgICAgICAgICB9XCIgKGNsaWNrKT1cImNoYW5nZVN0ZXBIYW5kbGVyKGkpXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtY291bnRlclwiPlxuICAgICAgICAgICAgICAgICAgICA8c3BhbiAqbmdJZj1cIiFzdGVwLmNvbXBsZXRlZFwiIHN0eWxlPVwiYm90dG9tOiA1cHg7IHBvc2l0aW9uOiByZWxhdGl2ZTtcIj57eyBpICsgMSB9fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgPGkgY2xhc3M9XCJmYS1zb2xpZCBmYS1jaGVja1wiICpuZ0lmPVwic3RlcC5jb21wbGV0ZWRcIj48L2k+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtdGl0bGVcIj57eyBzdGVwLmxhYmVsIH19PC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtY29udGVudFwiPlxuICAgICAgICAgICAge3sgc3RlcC5jb250ZW50IH19XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+Il19