cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
186 lines • 80.8 kB
JavaScript
// step.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class StepComponent {
steps = [];
labelPosition = 'bottom'; // Padrão para horizontal
indicatorType = 'numeric';
showHiddenSteps = false;
currentStep = 1;
allowClickOnCompleted = true;
allowClickOnUpcoming = false;
type = 'horizontal'; // Nova propriedade para controlar o layout
stepClick = new EventEmitter();
constructor() { }
onStepClick(stepId, step) {
if (this.isStepClickable(step)) {
this.stepClick.emit(stepId);
}
}
// Hover event handlers
onStepMouseEnter(step) {
if (!step.disabled) {
step.hovered = true;
}
}
onStepMouseLeave(step) {
step.hovered = false;
}
isStepClickable(step) {
if (step.disabled) {
return false;
}
if (this.isCurrentStep(step)) {
return false;
}
if (this.isCompletedStep(step) && this.allowClickOnCompleted) {
return true;
}
if (this.isUpcomingStep(step) && this.allowClickOnUpcoming) {
return true;
}
return false;
}
getStepCursorClass(step) {
return this.isStepClickable(step) ? 'clickable' : '';
}
isCompletedStep(step) {
return step.status === 'completed';
}
isCurrentStep(step) {
return step.status === 'current' || step.id === this.currentStep;
}
isUpcomingStep(step) {
return step.status === 'upcoming';
}
isErrorStep(step) {
return step.status === 'error' || (!!step.errorMessage && step.errorMessage.length > 0);
}
hasHiddenStepsBefore() {
if (!this.showHiddenSteps) {
return this.steps.some(step => step.id < this.currentStep && step.disabled);
}
return false;
}
hasHiddenStepsAfter() {
if (!this.showHiddenSteps) {
return this.steps.some(step => step.id > this.currentStep && step.disabled);
}
return false;
}
hasTag(step) {
return !!step.tagType && step.tagType !== 'none';
}
hasAlertTag(step) {
return step.tagType === 'alert';
}
hasErrorTag(step) {
return step.tagType === 'error';
}
hasSuccessTag(step) {
return step.tagType === 'success';
}
getTooltipMessage(step) {
if (step.errorMessage && step.errorMessage.length > 0) {
return step.errorMessage;
}
else if (step.alertMessage && step.alertMessage.length > 0) {
return step.alertMessage;
}
else if (step.tooltip && step.tooltip.length > 0) {
return step.tooltip;
}
return '';
}
shouldReplaceIndicatorWithTag(step) {
return this.indicatorType === 'empty' && this.hasTag(step);
}
isCurrentStepWithTag(step) {
return this.isCurrentStep(step) && this.hasTag(step);
}
getPreviousStepStatus(currentId) {
const previousStep = this.steps.find(step => step.id === currentId - 1);
return previousStep ? previousStep.status : null;
}
isLast(index) {
return index === this.steps.length - 1;
}
// Métodos auxiliares para verificar o tipo de layout
isHorizontal() {
return this.type === 'horizontal';
}
isVertical() {
return this.type === 'vertical';
}
// Método para obter a classe de tooltip baseado no layout
getTooltipClass(step) {
let baseClass = 'ds-step-tooltip';
if (this.isVertical()) {
baseClass += ' ds-vertical-step-tooltip';
}
else {
baseClass += ' ds-horizontal-step-tooltip';
}
if (this.hasAlertTag(step)) {
baseClass += ' alert-tooltip';
}
else if (this.hasErrorTag(step)) {
baseClass += ' error-tooltip';
}
else {
baseClass += ' info-tooltip';
}
return baseClass;
}
// Método para selecionar a posição adequada do label com base no layout
getLabelClass(step) {
let baseClass = '';
if (this.isVertical()) {
baseClass = this.labelPosition === 'left'
? 'ds-vertical-step-label-left'
: 'ds-vertical-step-label-right';
}
else {
baseClass = this.labelPosition === 'top'
? 'ds-step-label-top'
: 'ds-step-label-bottom';
}
if (this.isCompletedStep(step))
baseClass += ' completed';
if (this.isCurrentStep(step))
baseClass += ' current';
if (this.isUpcomingStep(step))
baseClass += ' upcoming';
if (this.isErrorStep(step))
baseClass += ' error';
if (step.hovered)
baseClass += ' hovered';
return baseClass;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepComponent, selector: "cfc-step", inputs: { steps: "steps", labelPosition: "labelPosition", indicatorType: "indicatorType", showHiddenSteps: "showHiddenSteps", currentStep: "currentStep", allowClickOnCompleted: "allowClickOnCompleted", allowClickOnUpcoming: "allowClickOnUpcoming", type: "type" }, outputs: { stepClick: "stepClick" }, ngImport: i0, template: "<!-- step.component.html -->\r\n<div class=\"ds-step-container\" \r\n [class.ds-vertical-step-container]=\"isVertical()\"\r\n [class.ds-horizontal-step-container]=\"isHorizontal()\"\r\n [class.has-hidden-steps-before]=\"hasHiddenStepsBefore()\"\r\n [class.has-hidden-steps-after]=\"hasHiddenStepsAfter()\">\r\n \r\n <!-- Layout Horizontal -->\r\n <div *ngIf=\"isHorizontal()\" class=\"ds-step-timeline\">\r\n <div class=\"ds-step-wrapper\" *ngFor=\"let step of steps; let i = index; let isFirst = first; let isLast = last\">\r\n \r\n <!-- Posicionamento de r\u00F3tulos: topo -->\r\n <div *ngIf=\"labelPosition === 'top'\" class=\"ds-step-label-top\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\">\r\n {{ step.label }}\r\n </div>\r\n \r\n <div class=\"ds-step-indicator-line-container\">\r\n <!-- Timeline: linha \u00E0 esquerda -->\r\n <div *ngIf=\"!isFirst\" class=\"ds-step-line-left\"\r\n [class.completed]=\"isCompletedStep(step) || (getPreviousStepStatus(step.id) === 'completed')\"\r\n [class.current]=\"isCurrentStep(step)\">\r\n </div>\r\n \r\n <!-- Indicador de Step -->\r\n <div class=\"ds-step-indicator\" \r\n [class.completed]=\"isCompletedStep(step)\" \r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.numeric]=\"indicatorType === 'numeric'\"\r\n [class.icon]=\"indicatorType === 'icon'\"\r\n [class.custom]=\"indicatorType === 'custom'\"\r\n [class.empty]=\"indicatorType === 'empty'\"\r\n [class.disabled]=\"step.disabled\"\r\n [class.with-tag]=\"hasTag(step)\"\r\n [class.current-with-tag]=\"isCurrentStepWithTag(step)\"\r\n [class]=\"getStepCursorClass(step)\"\r\n [class.replace-with-tag]=\"shouldReplaceIndicatorWithTag(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\"\r\n (click)=\"onStepClick(step.id, step)\">\r\n \r\n <!-- Conte\u00FAdo do indicador (somente exibido quando n\u00E3o substitu\u00EDdo pela tag) -->\r\n <ng-container *ngIf=\"!shouldReplaceIndicatorWithTag(step)\">\r\n <!-- Indicador num\u00E9rico (padr\u00E3o) -->\r\n <ng-container *ngIf=\"(indicatorType === 'numeric' || (indicatorType === 'icon' && !step.icon)) && !isErrorStep(step) && !isCompletedStep(step)\">\r\n {{ step.id }}\r\n </ng-container>\r\n \r\n <!-- Indicador com \u00EDcone personalizado -->\r\n <ng-container *ngIf=\"indicatorType === 'icon' && step.icon && !isErrorStep(step) && !isCompletedStep(step)\">\r\n <i class=\"ds-step-icon\" [class]=\"step.icon\"></i>\r\n </ng-container>\r\n \r\n <!-- Indicador com conte\u00FAdo personalizado -->\r\n <ng-container *ngIf=\"indicatorType === 'custom' && step.customContent && !isErrorStep(step) && !isCompletedStep(step)\">\r\n <ng-container *ngTemplateOutlet=\"step.customContent\"></ng-container>\r\n </ng-container>\r\n \r\n <!-- \u00CDcone de conclus\u00E3o (check) para steps completados -->\r\n <ng-container *ngIf=\"isCompletedStep(step) && !isErrorStep(step)\">\r\n <i class=\"ds-step-completed-icon\">\u2713</i>\r\n </ng-container>\r\n \r\n <!-- Indicador com erro -->\r\n <ng-container *ngIf=\"isErrorStep(step)\">\r\n <i class=\"ds-step-error-icon\">\u2715</i>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <!-- Tags para o indicador (alerta, erro, conclus\u00E3o) -->\r\n <div *ngIf=\"hasTag(step)\" \r\n class=\"ds-step-tag\"\r\n [class.alert-tag]=\"hasAlertTag(step)\"\r\n [class.error-tag]=\"hasErrorTag(step)\"\r\n [class.success-tag]=\"hasSuccessTag(step)\"\r\n [class.full-indicator]=\"shouldReplaceIndicatorWithTag(step)\">\r\n <i *ngIf=\"hasAlertTag(step)\" class=\"ds-tag-icon alert-icon\">\u26A0</i>\r\n <i *ngIf=\"hasErrorTag(step)\" class=\"ds-tag-icon error-icon\">\u2715</i>\r\n <i *ngIf=\"hasSuccessTag(step)\" class=\"ds-tag-icon success-icon\">\u2713</i>\r\n </div>\r\n \r\n <!-- Tooltip para erro, alerta ou informa\u00E7\u00E3o -->\r\n <div *ngIf=\"getTooltipMessage(step)\" [class]=\"getTooltipClass(step)\">\r\n <div *ngIf=\"hasAlertTag(step) || hasErrorTag(step)\" class=\"tooltip-title\">\r\n {{ hasAlertTag(step) ? 'Aten\u00E7\u00E3o!' : 'Erro!' }}\r\n </div>\r\n <div class=\"tooltip-message\">{{ getTooltipMessage(step) }}</div>\r\n </div>\r\n </div>\r\n \r\n <!-- Timeline: linha \u00E0 direita -->\r\n <div *ngIf=\"!isLast\" class=\"ds-step-line-right\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\">\r\n </div>\r\n </div>\r\n \r\n <!-- Posi\u00E7\u00E3o do r\u00F3tulo: abaixo (padr\u00E3o) -->\r\n <div *ngIf=\"labelPosition === 'bottom'\" class=\"ds-step-label-bottom\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\">\r\n {{ step.label }}\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Layout Vertical -->\r\n <div *ngIf=\"isVertical()\" class=\"ds-vertical-step-timeline\">\r\n <div class=\"ds-vertical-step-wrapper\" *ngFor=\"let step of steps; let i = index; let isFirst = first; let isLast = last\">\r\n \r\n <!-- Posicionamento de r\u00F3tulos: esquerda -->\r\n <div *ngIf=\"labelPosition === 'left'\" class=\"ds-vertical-step-label-left\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\">\r\n {{ step.label }}\r\n </div>\r\n \r\n <div class=\"ds-vertical-step-indicator-line-container\">\r\n <!-- Timeline: linha acima -->\r\n <div *ngIf=\"!isFirst\" class=\"ds-vertical-step-line-top\"\r\n [class.completed]=\"isCompletedStep(step) || (getPreviousStepStatus(step.id) === 'completed')\"\r\n [class.current]=\"isCurrentStep(step)\">\r\n </div>\r\n \r\n <!-- Indicador de Step -->\r\n <div class=\"ds-vertical-step-indicator\" \r\n [class.completed]=\"isCompletedStep(step)\" \r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.numeric]=\"indicatorType === 'numeric'\"\r\n [class.icon]=\"indicatorType === 'icon'\"\r\n [class.custom]=\"indicatorType === 'custom'\"\r\n [class.empty]=\"indicatorType === 'empty'\"\r\n [class.disabled]=\"step.disabled\"\r\n [class.with-tag]=\"hasTag(step)\"\r\n [class.current-with-tag]=\"isCurrentStepWithTag(step)\"\r\n [class]=\"getStepCursorClass(step)\"\r\n [class.replace-with-tag]=\"shouldReplaceIndicatorWithTag(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\"\r\n (click)=\"onStepClick(step.id, step)\">\r\n \r\n <!-- Conte\u00FAdo do indicador (somente exibido quando n\u00E3o substitu\u00EDdo pela tag) -->\r\n <ng-container *ngIf=\"!shouldReplaceIndicatorWithTag(step)\">\r\n <!-- Indicador num\u00E9rico (padr\u00E3o) -->\r\n <ng-container *ngIf=\"(indicatorType === 'numeric' || (indicatorType === 'icon' && !step.icon)) && !isErrorStep(step) && !isCompletedStep(step)\">\r\n {{ step.id }}\r\n </ng-container>\r\n \r\n <!-- Indicador com \u00EDcone personalizado -->\r\n <ng-container *ngIf=\"indicatorType === 'icon' && step.icon && !isErrorStep(step) && !isCompletedStep(step)\">\r\n <i class=\"ds-step-icon\" [class]=\"step.icon\"></i>\r\n </ng-container>\r\n \r\n <!-- Indicador com conte\u00FAdo personalizado -->\r\n <ng-container *ngIf=\"indicatorType === 'custom' && step.customContent && !isErrorStep(step) && !isCompletedStep(step)\">\r\n <ng-container *ngTemplateOutlet=\"step.customContent\"></ng-container>\r\n </ng-container>\r\n \r\n <!-- \u00CDcone de conclus\u00E3o (check) para steps completados -->\r\n <ng-container *ngIf=\"isCompletedStep(step) && !isErrorStep(step)\">\r\n <i class=\"ds-step-completed-icon\">\u2713</i>\r\n </ng-container>\r\n \r\n <!-- Indicador com erro -->\r\n <ng-container *ngIf=\"isErrorStep(step)\">\r\n <i class=\"ds-step-error-icon\">\u2715</i>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <!-- Tags para o indicador (alerta, erro, conclus\u00E3o) -->\r\n <div *ngIf=\"hasTag(step)\" \r\n class=\"ds-step-tag\"\r\n [class.alert-tag]=\"hasAlertTag(step)\"\r\n [class.error-tag]=\"hasErrorTag(step)\"\r\n [class.success-tag]=\"hasSuccessTag(step)\"\r\n [class.full-indicator]=\"shouldReplaceIndicatorWithTag(step)\">\r\n <i *ngIf=\"hasAlertTag(step)\" class=\"ds-tag-icon alert-icon\">\u26A0</i>\r\n <i *ngIf=\"hasErrorTag(step)\" class=\"ds-tag-icon error-icon\">\u2715</i>\r\n <i *ngIf=\"hasSuccessTag(step)\" class=\"ds-tag-icon success-icon\">\u2713</i>\r\n </div>\r\n \r\n <!-- Tooltip para erro, alerta ou informa\u00E7\u00E3o -->\r\n <div *ngIf=\"getTooltipMessage(step)\" [class]=\"getTooltipClass(step)\">\r\n <div *ngIf=\"hasAlertTag(step) || hasErrorTag(step)\" class=\"tooltip-title\">\r\n {{ hasAlertTag(step) ? 'Aten\u00E7\u00E3o!' : 'Erro!' }}\r\n </div>\r\n <div class=\"tooltip-message\">{{ getTooltipMessage(step) }}</div>\r\n </div>\r\n </div>\r\n \r\n <!-- Timeline: linha abaixo -->\r\n <div *ngIf=\"!isLast\" class=\"ds-vertical-step-line-bottom\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\">\r\n </div>\r\n </div>\r\n \r\n <!-- Posi\u00E7\u00E3o do r\u00F3tulo: direita (padr\u00E3o para vertical) -->\r\n <div *ngIf=\"labelPosition === 'right'\" class=\"ds-vertical-step-label-right\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\">\r\n {{ step.label }}\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".ds-step-container{position:relative;padding:10px 0}.ds-step-container.has-hidden-steps-before:before,.ds-step-container.has-hidden-steps-after:after{content:\"...\";font-weight:700;color:#ccc;position:absolute}.ds-step-indicator,.ds-vertical-step-indicator{min-width:32px;width:32px;height:32px;border-radius:50%;background-color:#ccc;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;position:relative;z-index:2;cursor:default;box-sizing:border-box;flex-shrink:0;transition:background-color .2s,transform .2s,border-color .2s}.ds-step-indicator.active,.ds-vertical-step-indicator.active{box-shadow:0 0 0 3px #06c3}.ds-step-indicator.active:after,.ds-vertical-step-indicator.active:after{content:\"\";position:absolute;inset:-4px;border:2px dashed #0066cc;border-radius:50%;pointer-events:none}.ds-step-indicator.completed,.ds-vertical-step-indicator.completed{background-color:#06c}.ds-step-indicator.completed.hovered,.ds-vertical-step-indicator.completed.hovered{background-color:#0080ff;transform:scale(1.05)}.ds-step-indicator.current,.ds-vertical-step-indicator.current{background-color:#06c}.ds-step-indicator.current.hovered,.ds-vertical-step-indicator.current.hovered{background-color:#0080ff;transform:scale(1.05)}.ds-step-indicator.upcoming.hovered,.ds-vertical-step-indicator.upcoming.hovered{background-color:#d9d9d9;transform:scale(1.05)}.ds-step-indicator.error,.ds-vertical-step-indicator.error{background-color:#e60000}.ds-step-indicator.error.hovered,.ds-vertical-step-indicator.error.hovered{background-color:#ff1a1a;transform:scale(1.05)}.ds-step-indicator.empty,.ds-vertical-step-indicator.empty{background-color:transparent;border:2px solid #cccccc}.ds-step-indicator.empty.completed,.ds-vertical-step-indicator.empty.completed{border-color:#06c}.ds-step-indicator.empty.completed.hovered,.ds-vertical-step-indicator.empty.completed.hovered{border-color:#0080ff;transform:scale(1.05)}.ds-step-indicator.empty.current,.ds-vertical-step-indicator.empty.current{border-color:#06c}.ds-step-indicator.empty.current.hovered,.ds-vertical-step-indicator.empty.current.hovered{border-color:#0080ff;transform:scale(1.05)}.ds-step-indicator.empty.error,.ds-vertical-step-indicator.empty.error{border-color:#e60000}.ds-step-indicator.empty.error.hovered,.ds-vertical-step-indicator.empty.error.hovered{border-color:#ff1a1a;transform:scale(1.05)}.ds-step-indicator.empty.upcoming.hovered,.ds-vertical-step-indicator.empty.upcoming.hovered{border-color:#b3b3b3;transform:scale(1.05)}.ds-step-indicator.disabled,.ds-vertical-step-indicator.disabled{opacity:.5;cursor:not-allowed}.ds-step-indicator.clickable,.ds-vertical-step-indicator.clickable{cursor:pointer}.ds-step-indicator.clickable:hover,.ds-vertical-step-indicator.clickable:hover{opacity:.9}.ds-step-indicator.replace-with-tag,.ds-vertical-step-indicator.replace-with-tag{background-color:transparent!important;border:none!important}.ds-step-indicator.current-with-tag,.ds-vertical-step-indicator.current-with-tag{position:relative}.ds-step-indicator.current-with-tag .ds-step-tag:not(.full-indicator),.ds-vertical-step-indicator.current-with-tag .ds-step-tag:not(.full-indicator){border:1px solid #0066cc}.ds-step-indicator.hovered .ds-step-tooltip,.ds-step-indicator:hover .ds-step-tooltip,.ds-vertical-step-indicator.hovered .ds-step-tooltip,.ds-vertical-step-indicator:hover .ds-step-tooltip{display:block}.ds-step-icon,.ds-step-completed-icon,.ds-step-error-icon{font-size:16px;line-height:1}.ds-step-tag{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;z-index:3}.ds-step-tag.alert-tag{background-color:#ffc107;color:#000;border:1px solid #d39e00}.ds-step-tag.error-tag{background-color:#e60000;color:#fff;border:1px solid #b30000}.ds-step-tag.success-tag{background-color:#28a745;color:#fff;border:1px solid #1e7e34}.ds-step-tag.full-indicator{position:static;width:32px;height:32px;font-size:16px}.ds-step-tag .ds-tag-icon{font-size:10px;line-height:1}.full-indicator .ds-step-tag .ds-tag-icon{font-size:16px}.ds-step-tooltip{padding:8px 12px;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 8px #00000026;z-index:10;display:none;font-weight:400;min-width:180px;max-width:260px;position:absolute}.ds-step-tooltip.error-tooltip{background-color:#e60000;color:#fff}.ds-step-tooltip.alert-tooltip{background-color:#ffc107;color:#333}.ds-step-tooltip .tooltip-title{font-weight:700;margin-bottom:4px}.ds-step-tooltip .tooltip-message{font-size:12px;line-height:1.4}.ds-horizontal-step-container{width:100%}.ds-horizontal-step-container.has-hidden-steps-before:before{left:0;top:50%;transform:translateY(-50%)}.ds-horizontal-step-container.has-hidden-steps-after:after{right:0;top:50%;transform:translateY(-50%)}.ds-step-timeline{display:flex;flex-wrap:nowrap;align-items:center;width:100%}.ds-step-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;flex:1}.ds-step-indicator-line-container{display:flex;align-items:center;width:100%;position:relative}.ds-step-line-left,.ds-step-line-right{height:2px;background-color:#ccc;flex:1}.ds-step-line-left.completed,.ds-step-line-right.completed,.ds-step-line-left.current,.ds-step-line-right.current{background-color:#06c}.ds-step-indicator{margin:0 4px}.ds-horizontal-step-tooltip{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:10px}.ds-horizontal-step-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#ffffff transparent transparent transparent}.ds-horizontal-step-tooltip.error-tooltip:after{border-color:#e60000 transparent transparent transparent}.ds-horizontal-step-tooltip.alert-tooltip:after{border-color:#ffc107 transparent transparent transparent}.ds-step-label-top,.ds-step-label-bottom{font-size:14px;max-width:100%;color:#ccc;margin:8px 0;text-align:center;transition:color .2s;padding:2px}.ds-step-label-top.completed,.ds-step-label-bottom.completed{color:#06c}.ds-step-label-top.completed.hovered,.ds-step-label-bottom.completed.hovered{color:#0080ff}.ds-step-label-top.current,.ds-step-label-bottom.current{color:#06c;font-weight:700}.ds-step-label-top.current.hovered,.ds-step-label-bottom.current.hovered{color:#0080ff}.ds-step-label-top.error,.ds-step-label-bottom.error{color:#e60000}.ds-step-label-top.error.hovered,.ds-step-label-bottom.error.hovered{color:#ff1a1a}.ds-step-label-top.upcoming.hovered,.ds-step-label-bottom.upcoming.hovered{color:#a6a6a6}.ds-vertical-step-container{height:100%}.ds-vertical-step-container.has-hidden-steps-before:before{top:0;left:50%;transform:translate(-50%)}.ds-vertical-step-container.has-hidden-steps-after:after{bottom:0;left:50%;transform:translate(-50%)}.ds-vertical-step-timeline{display:flex;flex-direction:column;align-items:flex-start;position:relative;width:100%}.ds-vertical-step-wrapper{display:flex;align-items:center;position:relative;width:100%;margin:8px 0}.ds-vertical-step-indicator-line-container{display:flex;flex-direction:column;align-items:center}.ds-vertical-step-line-top,.ds-vertical-step-line-bottom{width:2px;background-color:#ccc;height:24px}.ds-vertical-step-line-top.completed,.ds-vertical-step-line-bottom.completed,.ds-vertical-step-line-top.current,.ds-vertical-step-line-bottom.current{background-color:#06c}.ds-vertical-step-indicator{margin:4px 0}.ds-vertical-step-tooltip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%)!important}.ds-vertical-step-tooltip:after{content:\"\";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent #ffffff transparent transparent}.ds-vertical-step-tooltip.error-tooltip:after{border-color:transparent #e60000 transparent transparent}.ds-vertical-step-tooltip.alert-tooltip:after{border-color:transparent #ffc107 transparent transparent}.ds-vertical-step-label-left,.ds-vertical-step-label-right{font-size:14px;max-width:200px;color:#ccc;margin:0 16px;transition:color .2s;padding:2px}.ds-vertical-step-label-left.completed,.ds-vertical-step-label-right.completed{color:#06c}.ds-vertical-step-label-left.completed.hovered,.ds-vertical-step-label-right.completed.hovered{color:#0080ff}.ds-vertical-step-label-left.current,.ds-vertical-step-label-right.current{color:#06c;font-weight:700}.ds-vertical-step-label-left.current.hovered,.ds-vertical-step-label-right.current.hovered{color:#0080ff}.ds-vertical-step-label-left.error,.ds-vertical-step-label-right.error{color:#e60000}.ds-vertical-step-label-left.error.hovered,.ds-vertical-step-label-right.error.hovered{color:#ff1a1a}.ds-vertical-step-label-left.upcoming.hovered,.ds-vertical-step-label-right.upcoming.hovered{color:#a6a6a6}.ds-vertical-step-label-left{text-align:right}.ds-vertical-step-label-right{text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-step', template: "<!-- step.component.html -->\r\n<div class=\"ds-step-container\" \r\n [class.ds-vertical-step-container]=\"isVertical()\"\r\n [class.ds-horizontal-step-container]=\"isHorizontal()\"\r\n [class.has-hidden-steps-before]=\"hasHiddenStepsBefore()\"\r\n [class.has-hidden-steps-after]=\"hasHiddenStepsAfter()\">\r\n \r\n <!-- Layout Horizontal -->\r\n <div *ngIf=\"isHorizontal()\" class=\"ds-step-timeline\">\r\n <div class=\"ds-step-wrapper\" *ngFor=\"let step of steps; let i = index; let isFirst = first; let isLast = last\">\r\n \r\n <!-- Posicionamento de r\u00F3tulos: topo -->\r\n <div *ngIf=\"labelPosition === 'top'\" class=\"ds-step-label-top\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\">\r\n {{ step.label }}\r\n </div>\r\n \r\n <div class=\"ds-step-indicator-line-container\">\r\n <!-- Timeline: linha \u00E0 esquerda -->\r\n <div *ngIf=\"!isFirst\" class=\"ds-step-line-left\"\r\n [class.completed]=\"isCompletedStep(step) || (getPreviousStepStatus(step.id) === 'completed')\"\r\n [class.current]=\"isCurrentStep(step)\">\r\n </div>\r\n \r\n <!-- Indicador de Step -->\r\n <div class=\"ds-step-indicator\" \r\n [class.completed]=\"isCompletedStep(step)\" \r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.numeric]=\"indicatorType === 'numeric'\"\r\n [class.icon]=\"indicatorType === 'icon'\"\r\n [class.custom]=\"indicatorType === 'custom'\"\r\n [class.empty]=\"indicatorType === 'empty'\"\r\n [class.disabled]=\"step.disabled\"\r\n [class.with-tag]=\"hasTag(step)\"\r\n [class.current-with-tag]=\"isCurrentStepWithTag(step)\"\r\n [class]=\"getStepCursorClass(step)\"\r\n [class.replace-with-tag]=\"shouldReplaceIndicatorWithTag(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\"\r\n (click)=\"onStepClick(step.id, step)\">\r\n \r\n <!-- Conte\u00FAdo do indicador (somente exibido quando n\u00E3o substitu\u00EDdo pela tag) -->\r\n <ng-container *ngIf=\"!shouldReplaceIndicatorWithTag(step)\">\r\n <!-- Indicador num\u00E9rico (padr\u00E3o) -->\r\n <ng-container *ngIf=\"(indicatorType === 'numeric' || (indicatorType === 'icon' && !step.icon)) && !isErrorStep(step) && !isCompletedStep(step)\">\r\n {{ step.id }}\r\n </ng-container>\r\n \r\n <!-- Indicador com \u00EDcone personalizado -->\r\n <ng-container *ngIf=\"indicatorType === 'icon' && step.icon && !isErrorStep(step) && !isCompletedStep(step)\">\r\n <i class=\"ds-step-icon\" [class]=\"step.icon\"></i>\r\n </ng-container>\r\n \r\n <!-- Indicador com conte\u00FAdo personalizado -->\r\n <ng-container *ngIf=\"indicatorType === 'custom' && step.customContent && !isErrorStep(step) && !isCompletedStep(step)\">\r\n <ng-container *ngTemplateOutlet=\"step.customContent\"></ng-container>\r\n </ng-container>\r\n \r\n <!-- \u00CDcone de conclus\u00E3o (check) para steps completados -->\r\n <ng-container *ngIf=\"isCompletedStep(step) && !isErrorStep(step)\">\r\n <i class=\"ds-step-completed-icon\">\u2713</i>\r\n </ng-container>\r\n \r\n <!-- Indicador com erro -->\r\n <ng-container *ngIf=\"isErrorStep(step)\">\r\n <i class=\"ds-step-error-icon\">\u2715</i>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <!-- Tags para o indicador (alerta, erro, conclus\u00E3o) -->\r\n <div *ngIf=\"hasTag(step)\" \r\n class=\"ds-step-tag\"\r\n [class.alert-tag]=\"hasAlertTag(step)\"\r\n [class.error-tag]=\"hasErrorTag(step)\"\r\n [class.success-tag]=\"hasSuccessTag(step)\"\r\n [class.full-indicator]=\"shouldReplaceIndicatorWithTag(step)\">\r\n <i *ngIf=\"hasAlertTag(step)\" class=\"ds-tag-icon alert-icon\">\u26A0</i>\r\n <i *ngIf=\"hasErrorTag(step)\" class=\"ds-tag-icon error-icon\">\u2715</i>\r\n <i *ngIf=\"hasSuccessTag(step)\" class=\"ds-tag-icon success-icon\">\u2713</i>\r\n </div>\r\n \r\n <!-- Tooltip para erro, alerta ou informa\u00E7\u00E3o -->\r\n <div *ngIf=\"getTooltipMessage(step)\" [class]=\"getTooltipClass(step)\">\r\n <div *ngIf=\"hasAlertTag(step) || hasErrorTag(step)\" class=\"tooltip-title\">\r\n {{ hasAlertTag(step) ? 'Aten\u00E7\u00E3o!' : 'Erro!' }}\r\n </div>\r\n <div class=\"tooltip-message\">{{ getTooltipMessage(step) }}</div>\r\n </div>\r\n </div>\r\n \r\n <!-- Timeline: linha \u00E0 direita -->\r\n <div *ngIf=\"!isLast\" class=\"ds-step-line-right\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\">\r\n </div>\r\n </div>\r\n \r\n <!-- Posi\u00E7\u00E3o do r\u00F3tulo: abaixo (padr\u00E3o) -->\r\n <div *ngIf=\"labelPosition === 'bottom'\" class=\"ds-step-label-bottom\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\">\r\n {{ step.label }}\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Layout Vertical -->\r\n <div *ngIf=\"isVertical()\" class=\"ds-vertical-step-timeline\">\r\n <div class=\"ds-vertical-step-wrapper\" *ngFor=\"let step of steps; let i = index; let isFirst = first; let isLast = last\">\r\n \r\n <!-- Posicionamento de r\u00F3tulos: esquerda -->\r\n <div *ngIf=\"labelPosition === 'left'\" class=\"ds-vertical-step-label-left\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\">\r\n {{ step.label }}\r\n </div>\r\n \r\n <div class=\"ds-vertical-step-indicator-line-container\">\r\n <!-- Timeline: linha acima -->\r\n <div *ngIf=\"!isFirst\" class=\"ds-vertical-step-line-top\"\r\n [class.completed]=\"isCompletedStep(step) || (getPreviousStepStatus(step.id) === 'completed')\"\r\n [class.current]=\"isCurrentStep(step)\">\r\n </div>\r\n \r\n <!-- Indicador de Step -->\r\n <div class=\"ds-vertical-step-indicator\" \r\n [class.completed]=\"isCompletedStep(step)\" \r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.numeric]=\"indicatorType === 'numeric'\"\r\n [class.icon]=\"indicatorType === 'icon'\"\r\n [class.custom]=\"indicatorType === 'custom'\"\r\n [class.empty]=\"indicatorType === 'empty'\"\r\n [class.disabled]=\"step.disabled\"\r\n [class.with-tag]=\"hasTag(step)\"\r\n [class.current-with-tag]=\"isCurrentStepWithTag(step)\"\r\n [class]=\"getStepCursorClass(step)\"\r\n [class.replace-with-tag]=\"shouldReplaceIndicatorWithTag(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\"\r\n (click)=\"onStepClick(step.id, step)\">\r\n \r\n <!-- Conte\u00FAdo do indicador (somente exibido quando n\u00E3o substitu\u00EDdo pela tag) -->\r\n <ng-container *ngIf=\"!shouldReplaceIndicatorWithTag(step)\">\r\n <!-- Indicador num\u00E9rico (padr\u00E3o) -->\r\n <ng-container *ngIf=\"(indicatorType === 'numeric' || (indicatorType === 'icon' && !step.icon)) && !isErrorStep(step) && !isCompletedStep(step)\">\r\n {{ step.id }}\r\n </ng-container>\r\n \r\n <!-- Indicador com \u00EDcone personalizado -->\r\n <ng-container *ngIf=\"indicatorType === 'icon' && step.icon && !isErrorStep(step) && !isCompletedStep(step)\">\r\n <i class=\"ds-step-icon\" [class]=\"step.icon\"></i>\r\n </ng-container>\r\n \r\n <!-- Indicador com conte\u00FAdo personalizado -->\r\n <ng-container *ngIf=\"indicatorType === 'custom' && step.customContent && !isErrorStep(step) && !isCompletedStep(step)\">\r\n <ng-container *ngTemplateOutlet=\"step.customContent\"></ng-container>\r\n </ng-container>\r\n \r\n <!-- \u00CDcone de conclus\u00E3o (check) para steps completados -->\r\n <ng-container *ngIf=\"isCompletedStep(step) && !isErrorStep(step)\">\r\n <i class=\"ds-step-completed-icon\">\u2713</i>\r\n </ng-container>\r\n \r\n <!-- Indicador com erro -->\r\n <ng-container *ngIf=\"isErrorStep(step)\">\r\n <i class=\"ds-step-error-icon\">\u2715</i>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <!-- Tags para o indicador (alerta, erro, conclus\u00E3o) -->\r\n <div *ngIf=\"hasTag(step)\" \r\n class=\"ds-step-tag\"\r\n [class.alert-tag]=\"hasAlertTag(step)\"\r\n [class.error-tag]=\"hasErrorTag(step)\"\r\n [class.success-tag]=\"hasSuccessTag(step)\"\r\n [class.full-indicator]=\"shouldReplaceIndicatorWithTag(step)\">\r\n <i *ngIf=\"hasAlertTag(step)\" class=\"ds-tag-icon alert-icon\">\u26A0</i>\r\n <i *ngIf=\"hasErrorTag(step)\" class=\"ds-tag-icon error-icon\">\u2715</i>\r\n <i *ngIf=\"hasSuccessTag(step)\" class=\"ds-tag-icon success-icon\">\u2713</i>\r\n </div>\r\n \r\n <!-- Tooltip para erro, alerta ou informa\u00E7\u00E3o -->\r\n <div *ngIf=\"getTooltipMessage(step)\" [class]=\"getTooltipClass(step)\">\r\n <div *ngIf=\"hasAlertTag(step) || hasErrorTag(step)\" class=\"tooltip-title\">\r\n {{ hasAlertTag(step) ? 'Aten\u00E7\u00E3o!' : 'Erro!' }}\r\n </div>\r\n <div class=\"tooltip-message\">{{ getTooltipMessage(step) }}</div>\r\n </div>\r\n </div>\r\n \r\n <!-- Timeline: linha abaixo -->\r\n <div *ngIf=\"!isLast\" class=\"ds-vertical-step-line-bottom\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\">\r\n </div>\r\n </div>\r\n \r\n <!-- Posi\u00E7\u00E3o do r\u00F3tulo: direita (padr\u00E3o para vertical) -->\r\n <div *ngIf=\"labelPosition === 'right'\" class=\"ds-vertical-step-label-right\"\r\n [class.completed]=\"isCompletedStep(step)\"\r\n [class.current]=\"isCurrentStep(step)\" \r\n [class.upcoming]=\"isUpcomingStep(step)\"\r\n [class.error]=\"isErrorStep(step)\"\r\n [class.hovered]=\"step.hovered\"\r\n (mouseenter)=\"onStepMouseEnter(step)\"\r\n (mouseleave)=\"onStepMouseLeave(step)\">\r\n {{ step.label }}\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".ds-step-container{position:relative;padding:10px 0}.ds-step-container.has-hidden-steps-before:before,.ds-step-container.has-hidden-steps-after:after{content:\"...\";font-weight:700;color:#ccc;position:absolute}.ds-step-indicator,.ds-vertical-step-indicator{min-width:32px;width:32px;height:32px;border-radius:50%;background-color:#ccc;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;position:relative;z-index:2;cursor:default;box-sizing:border-box;flex-shrink:0;transition:background-color .2s,transform .2s,border-color .2s}.ds-step-indicator.active,.ds-vertical-step-indicator.active{box-shadow:0 0 0 3px #06c3}.ds-step-indicator.active:after,.ds-vertical-step-indicator.active:after{content:\"\";position:absolute;inset:-4px;border:2px dashed #0066cc;border-radius:50%;pointer-events:none}.ds-step-indicator.completed,.ds-vertical-step-indicator.completed{background-color:#06c}.ds-step-indicator.completed.hovered,.ds-vertical-step-indicator.completed.hovered{background-color:#0080ff;transform:scale(1.05)}.ds-step-indicator.current,.ds-vertical-step-indicator.current{background-color:#06c}.ds-step-indicator.current.hovered,.ds-vertical-step-indicator.current.hovered{background-color:#0080ff;transform:scale(1.05)}.ds-step-indicator.upcoming.hovered,.ds-vertical-step-indicator.upcoming.hovered{background-color:#d9d9d9;transform:scale(1.05)}.ds-step-indicator.error,.ds-vertical-step-indicator.error{background-color:#e60000}.ds-step-indicator.error.hovered,.ds-vertical-step-indicator.error.hovered{background-color:#ff1a1a;transform:scale(1.05)}.ds-step-indicator.empty,.ds-vertical-step-indicator.empty{background-color:transparent;border:2px solid #cccccc}.ds-step-indicator.empty.completed,.ds-vertical-step-indicator.empty.completed{border-color:#06c}.ds-step-indicator.empty.completed.hovered,.ds-vertical-step-indicator.empty.completed.hovered{border-color:#0080ff;transform:scale(1.05)}.ds-step-indicator.empty.current,.ds-vertical-step-indicator.empty.current{border-color:#06c}.ds-step-indicator.empty.current.hovered,.ds-vertical-step-indicator.empty.current.hovered{border-color:#0080ff;transform:scale(1.05)}.ds-step-indicator.empty.error,.ds-vertical-step-indicator.empty.error{border-color:#e60000}.ds-step-indicator.empty.error.hovered,.ds-vertical-step-indicator.empty.error.hovered{border-color:#ff1a1a;transform:scale(1.05)}.ds-step-indicator.empty.upcoming.hovered,.ds-vertical-step-indicator.empty.upcoming.hovered{border-color:#b3b3b3;transform:scale(1.05)}.ds-step-indicator.disabled,.ds-vertical-step-indicator.disabled{opacity:.5;cursor:not-allowed}.ds-step-indicator.clickable,.ds-vertical-step-indicator.clickable{cursor:pointer}.ds-step-indicator.clickable:hover,.ds-vertical-step-indicator.clickable:hover{opacity:.9}.ds-step-indicator.replace-with-tag,.ds-vertical-step-indicator.replace-with-tag{background-color:transparent!important;border:none!important}.ds-step-indicator.current-with-tag,.ds-vertical-step-indicator.current-with-tag{position:relative}.ds-step-indicator.current-with-tag .ds-step-tag:not(.full-indicator),.ds-vertical-step-indicator.current-with-tag .ds-step-tag:not(.full-indicator){border:1px solid #0066cc}.ds-step-indicator.hovered .ds-step-tooltip,.ds-step-indicator:hover .ds-step-tooltip,.ds-vertical-step-indicator.hovered .ds-step-tooltip,.ds-vertical-step-indicator:hover .ds-step-tooltip{display:block}.ds-step-icon,.ds-step-completed-icon,.ds-step-error-icon{font-size:16px;line-height:1}.ds-step-tag{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;z-index:3}.ds-step-tag.alert-tag{background-color:#ffc107;color:#000;border:1px solid #d39e00}.ds-step-tag.error-tag{background-color:#e60000;color:#fff;border:1px solid #b30000}.ds-step-tag.success-tag{background-color:#28a745;color:#fff;border:1px solid #1e7e34}.ds-step-tag.full-indicator{position:static;width:32px;height:32px;font-size:16px}.ds-step-tag .ds-tag-icon{font-size:10px;line-height:1}.full-indicator .ds-step-tag .ds-tag-icon{font-size:16px}.ds-step-tooltip{padding:8px 12px;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 8px #00000026;z-index:10;display:none;font-weight:400;min-width:180px;max-width:260px;position:absolute}.ds-step-tooltip.error-tooltip{background-color:#e60000;color:#fff}.ds-step-tooltip.alert-tooltip{background-color:#ffc107;color:#333}.ds-step-tooltip .tooltip-title{font-weight:700;margin-bottom:4px}.ds-step-tooltip .tooltip-message{font-size:12px;line-height:1.4}.ds-horizontal-step-container{width:100%}.ds-horizontal-step-container.has-hidden-steps-before:before{left:0;top:50%;transform:translateY(-50%)}.ds-horizontal-step-container.has-hidden-steps-after:after{right:0;top:50%;transform:translateY(-50%)}.ds-step-timeline{display:flex;flex-wrap:nowrap;align-items:center;width:100%}.ds-step-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;flex:1}.ds-step-indicator-line-container{display:flex;align-items:center;width:100%;position:relative}.ds-step-line-left,.ds-step-line-right{height:2px;background-color:#ccc;flex:1}.ds-step-line-left.completed,.ds-step-line-right.completed,.ds-step-line-left.current,.ds-step-line-right.current{background-color:#06c}.ds-step-indicator{margin:0 4px}.ds-horizontal-step-tooltip{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:10px}.ds-horizontal-step-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#ffffff transparent transparent transparent}.ds-horizontal-step-tooltip.error-tooltip:after{border-color:#e60000 transparent transparent transparent}.ds-horizontal-step-tooltip.alert-tooltip:after{border-color:#ffc107 transparent transparent transparent}.ds-step-label-top,.ds-step-label-bottom{font-size:14px;max-width:100%;color:#ccc;margin:8px 0;text-align:center;transition:color .2s;padding:2px}.ds-step-label-top.completed,.ds-step-label-bottom.completed{color:#06c}.ds-step-label-top.completed.hovered,.ds-step-label-bottom.completed.hovered{color:#0080ff}.ds-step-label-top.current,.ds-step-label-bottom.current{color:#06c;font-weight:700}.ds-step-label-top.current.hovered,.ds-step-label-bottom.current.hovered{color:#0080ff}.ds-step-label-top.error,.ds-step-label-bottom.error{color:#e60000}.ds-step-label-top.error.hovered,.ds-step-label-bottom.error.hovered{color:#ff1a1a}.ds-step-label-top.upcoming.hovered,.ds-step-label-bottom.upcoming.hovered{color:#a6a6a6}.ds-vertical-step-container{height:100%}.ds-vertical-step-container.has-hidden-steps-before:before{top:0;left:50%;transform:translate(-50%)}.ds-vertical-step-container.has-hidden-steps-after:after{bottom:0;left:50%;transform:translate(-50%)}.ds-vertical-step-timeline{display:flex;flex-direction:column;align-items:flex-start;position:relative;width:100%}.ds-vertical-step-wrapper{display:flex;align-items:center;position:relative;width:100%;margin:8px 0}.ds-vertical-step-indicator-line-container{display:flex;flex-direction:column;align-items:center}.ds-vertical-step-line-top,.ds-vertical-step-line-bottom{width:2px;background-color:#ccc;height:24px}.ds-vertical-step-line-top.completed,.ds-vertical-step-line-bottom.completed,.ds-vertical-step-line-top.current,.ds-vertical-step-line-bottom.current{background-color:#06c}.ds-vertical-step-indicator{margin:4px 0}.ds-vertical-step-tooltip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%)!important}.ds-vertical-step-tooltip:after{content:\"\";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent #ffffff transparent transparent}.ds-vertical-step-tooltip.error-tooltip:after{border-color:transparent #e60000 transparent transparent}.ds-vertical-step-tooltip.alert-tooltip:after{border-color:transparent #ffc107 transparent transparent}.ds-vertical-step-label-left,.ds-vertical-step-label-right{font-size:14px;max-width:200px;color:#ccc;margin:0 16px;transition:color .2s;padding:2px}.ds-vertical-step-label-left.completed,.ds-vertical-step-label-right.completed{color:#06c}.ds-vertical-step-label-left.completed.hovered,.ds-vertical-step-label-right.completed.hovered{color:#0080ff}.ds-vertical-step-label-left.current,.ds-vertical-step-label-right.current{color:#06c;font-weight:700}.ds-vertical-step-label-left.current.hovered,.ds-vertical-step-label-right.current.hovered{color:#0080ff}.ds-vertical-step-label-left.error,.ds-vertical-step-label-right.error{color:#e60000}.ds-vertical-step-label-left.error.hovered,.ds-vertical-step-label-right.error.hovered{color:#ff1a1a}.ds-vertical-step-label-left.upcoming.hovered,.ds-vertical-step-label-right.upcoming.hovered{color:#a6a6a6}.ds-vertical-step-label-left{text-align:right}.ds-vertical-step-label-right{text-align:left}\n"] }]
}], ctorParameters: () => [], propDecorators: { steps: [{
type: Input
}], labelPosition: [{
type: Input
}], indicatorType: [{
type: Input
}], showHiddenSteps: [{
type: Input
}], currentStep: [{
type: Input
}], allowClickOnCompleted: [{
type: Input
}], allowClickOnUpcoming: [{
type: Input
}], type: [{
type: Input
}], stepClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL3N0ZXAvc3RlcC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL3N0ZXAvc3RlcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxvQkFBb0I7QUFDcEIsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBZSxNQUFNLGVBQWUsQ0FBQzs7O0FBY3BGLE1BQU0sT0FBTyxhQUFhO0lBQ2YsS0FBSyxHQUFlLEVBQUUsQ0FBQztJQUN2QixhQUFhLEdBQWlCLFFBQVEsQ0FBQyxDQUFFLHlCQUF5QjtJ