systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
44 lines • 9.63 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class WizardStep {
}
export class WizardStepsComponent {
get currentStep() {
return this._currentStep;
}
set currentStep(value) {
this._currentStep = value;
this.currentStepChange.emit(this._currentStep);
}
doAction(step) {
this.action.emit(step);
}
constructor() {
this.steps = [];
this.roundedStep = true;
this.allowNavigation = false;
this._currentStep = 1;
this.currentStepChange = new EventEmitter();
this.action = new EventEmitter();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: WizardStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: WizardStepsComponent, selector: "systelab-wizard-steps", inputs: { steps: "steps", roundedStep: "roundedStep", allowNavigation: "allowNavigation", currentStep: "currentStep" }, outputs: { currentStepChange: "currentStepChange", action: "action" }, ngImport: i0, template: "<div class=\"slab-steps-wizard\">\n <div class=\"slab-row\">\n @for (step of steps; track step.step; let first = $first; let last = $last;) {\n <div class=\"slab-step\">\n <div class=\"slab-step-button-container\">\n <div class=\"step-line step-line-left\" [class.slab-step-visited]=\"step.step < currentStep && step.visited || step.step == currentStep\"\n [class.slab-step-first]=\"first\">\n </div>\n <button (click)=\"doAction(step)\" [disabled]=\"(!allowNavigation && step.step < currentStep) || step.step > currentStep\" class=\"btn cursor\"\n [class.btn-outline-primary]=\"step.step > currentStep && !step.visited\"\n [class.btn-primary]=\"step.step < currentStep && step.visited || step.step == currentStep\"\n [class.slab-step-round]=\"roundedStep\">{{step.step}}</button>\n <div class=\"step-line step-line-right\" [class.slab-step-visited]=\"step.step < currentStep && step.visited\"\n [class.slab-step-last]=\"last\">\n </div>\n </div>\n <p class=\"slab-step-text\">{{step.description}}</p>\n <p *ngIf=\"step.optionalText\" class=\"slab-step-optional-text\">{{step.optionalText}}</p>\n\n </div>\n }\n </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: WizardStepsComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-wizard-steps', template: "<div class=\"slab-steps-wizard\">\n <div class=\"slab-row\">\n @for (step of steps; track step.step; let first = $first; let last = $last;) {\n <div class=\"slab-step\">\n <div class=\"slab-step-button-container\">\n <div class=\"step-line step-line-left\" [class.slab-step-visited]=\"step.step < currentStep && step.visited || step.step == currentStep\"\n [class.slab-step-first]=\"first\">\n </div>\n <button (click)=\"doAction(step)\" [disabled]=\"(!allowNavigation && step.step < currentStep) || step.step > currentStep\" class=\"btn cursor\"\n [class.btn-outline-primary]=\"step.step > currentStep && !step.visited\"\n [class.btn-primary]=\"step.step < currentStep && step.visited || step.step == currentStep\"\n [class.slab-step-round]=\"roundedStep\">{{step.step}}</button>\n <div class=\"step-line step-line-right\" [class.slab-step-visited]=\"step.step < currentStep && step.visited\"\n [class.slab-step-last]=\"last\">\n </div>\n </div>\n <p class=\"slab-step-text\">{{step.description}}</p>\n <p *ngIf=\"step.optionalText\" class=\"slab-step-optional-text\">{{step.optionalText}}</p>\n\n </div>\n }\n </div>\n</div>\n\n" }]
}], ctorParameters: () => [], propDecorators: { steps: [{
type: Input
}], roundedStep: [{
type: Input
}], allowNavigation: [{
type: Input
}], currentStep: [{
type: Input
}], currentStepChange: [{
type: Output
}], action: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2l6YXJkLXN0ZXBzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi93aXphcmQtc3RlcHMvd2l6YXJkLXN0ZXBzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi93aXphcmQtc3RlcHMvd2l6YXJkLXN0ZXBzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQUV2RSxNQUFNLE9BQU8sVUFBVTtDQUt0QjtBQU1ELE1BQU0sT0FBTyxvQkFBb0I7SUFNaEMsSUFDSSxXQUFXO1FBQ2QsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQzFCLENBQUM7SUFJRCxJQUFJLFdBQVcsQ0FBQyxLQUFhO1FBQzVCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO1FBQzFCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ2hELENBQUM7SUFJTSxRQUFRLENBQUMsSUFBSTtRQUNuQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN4QixDQUFDO0lBRUQ7UUF0QlMsVUFBSyxHQUFzQixFQUFFLENBQUM7UUFDOUIsZ0JBQVcsR0FBRyxJQUFJLENBQUM7UUFDbkIsb0JBQWUsR0FBRyxLQUFLLENBQUM7UUFDekIsaUJBQVksR0FBRyxDQUFDLENBQUM7UUFNZixzQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBT3ZDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBT3RDLENBQUM7OEdBekJXLG9CQUFvQjtrR0FBcEIsb0JBQW9CLDRQQ2JqQyxtN0NBd0JBOzsyRkRYYSxvQkFBb0I7a0JBSmhDLFNBQVM7K0JBQ0ksdUJBQXVCO3dEQUszQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUdGLFdBQVc7c0JBRGQsS0FBSztnQkFLSSxpQkFBaUI7c0JBQTFCLE1BQU07Z0JBT0csTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGNsYXNzIFdpemFyZFN0ZXAge1xuXHRzdGVwOiBudW1iZXI7XG5cdGRlc2NyaXB0aW9uOiBzdHJpbmc7XG5cdG9wdGlvbmFsVGV4dD86IHN0cmluZztcblx0dmlzaXRlZDogYm9vbGVhbjtcbn1cblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAgICAnc3lzdGVsYWItd2l6YXJkLXN0ZXBzJyxcblx0dGVtcGxhdGVVcmw6ICcuL3dpemFyZC1zdGVwcy5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgV2l6YXJkU3RlcHNDb21wb25lbnQge1xuXG5cdEBJbnB1dCgpIHN0ZXBzOiBBcnJheTxXaXphcmRTdGVwPiA9IFtdO1xuXHRASW5wdXQoKSByb3VuZGVkU3RlcCA9IHRydWU7XG5cdEBJbnB1dCgpIGFsbG93TmF2aWdhdGlvbiA9IGZhbHNlO1xuXHRwcml2YXRlIF9jdXJyZW50U3RlcCA9IDE7XG5cdEBJbnB1dCgpXG5cdGdldCBjdXJyZW50U3RlcCgpOiBudW1iZXIge1xuXHRcdHJldHVybiB0aGlzLl9jdXJyZW50U3RlcDtcblx0fVxuXG5cdEBPdXRwdXQoKSBjdXJyZW50U3RlcENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuXHRzZXQgY3VycmVudFN0ZXAodmFsdWU6IG51bWJlcikge1xuXHRcdHRoaXMuX2N1cnJlbnRTdGVwID0gdmFsdWU7XG5cdFx0dGhpcy5jdXJyZW50U3RlcENoYW5nZS5lbWl0KHRoaXMuX2N1cnJlbnRTdGVwKTtcblx0fVxuXG5cdEBPdXRwdXQoKSBhY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cblx0cHVibGljIGRvQWN0aW9uKHN0ZXApIHtcblx0XHR0aGlzLmFjdGlvbi5lbWl0KHN0ZXApO1xuXHR9XG5cblx0Y29uc3RydWN0b3IoKSB7XG5cdH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJzbGFiLXN0ZXBzLXdpemFyZFwiPlxuICAgIDxkaXYgY2xhc3M9XCJzbGFiLXJvd1wiPlxuICAgICAgICBAZm9yIChzdGVwIG9mIHN0ZXBzOyB0cmFjayBzdGVwLnN0ZXA7IGxldCBmaXJzdCA9ICRmaXJzdDsgbGV0IGxhc3QgPSAkbGFzdDspIHtcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzbGFiLXN0ZXBcIj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2xhYi1zdGVwLWJ1dHRvbi1jb250YWluZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtbGluZSBzdGVwLWxpbmUtbGVmdFwiIFtjbGFzcy5zbGFiLXN0ZXAtdmlzaXRlZF09XCJzdGVwLnN0ZXAgPCBjdXJyZW50U3RlcCAmJiBzdGVwLnZpc2l0ZWQgfHwgc3RlcC5zdGVwID09IGN1cnJlbnRTdGVwXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICBbY2xhc3Muc2xhYi1zdGVwLWZpcnN0XT1cImZpcnN0XCI+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8YnV0dG9uIChjbGljayk9XCJkb0FjdGlvbihzdGVwKVwiIFtkaXNhYmxlZF09XCIoIWFsbG93TmF2aWdhdGlvbiAgJiYgc3RlcC5zdGVwIDwgY3VycmVudFN0ZXApIHx8IHN0ZXAuc3RlcCA+IGN1cnJlbnRTdGVwXCIgY2xhc3M9XCJidG4gY3Vyc29yXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBbY2xhc3MuYnRuLW91dGxpbmUtcHJpbWFyeV09XCJzdGVwLnN0ZXAgPiBjdXJyZW50U3RlcCAmJiAhc3RlcC52aXNpdGVkXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBbY2xhc3MuYnRuLXByaW1hcnldPVwic3RlcC5zdGVwIDwgY3VycmVudFN0ZXAgJiYgc3RlcC52aXNpdGVkIHx8IHN0ZXAuc3RlcCA9PSBjdXJyZW50U3RlcFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW2NsYXNzLnNsYWItc3RlcC1yb3VuZF09XCJyb3VuZGVkU3RlcFwiPnt7c3RlcC5zdGVwfX08L2J1dHRvbj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtbGluZSBzdGVwLWxpbmUtcmlnaHRcIiBbY2xhc3Muc2xhYi1zdGVwLXZpc2l0ZWRdPVwic3RlcC5zdGVwIDwgY3VycmVudFN0ZXAgJiYgc3RlcC52aXNpdGVkXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICBbY2xhc3Muc2xhYi1zdGVwLWxhc3RdPVwibGFzdFwiPlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8cCBjbGFzcz1cInNsYWItc3RlcC10ZXh0XCI+e3tzdGVwLmRlc2NyaXB0aW9ufX08L3A+XG4gICAgICAgICAgICAgICAgPHAgKm5nSWY9XCJzdGVwLm9wdGlvbmFsVGV4dFwiIGNsYXNzPVwic2xhYi1zdGVwLW9wdGlvbmFsLXRleHRcIj57e3N0ZXAub3B0aW9uYWxUZXh0fX08L3A+XG5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgPC9kaXY+XG48L2Rpdj5cblxuIl19