@dev-tcloud/tcloud-ui 5.1.4 → 5.1.6

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.
@@ -7028,7 +7028,8 @@ class TcRevButtonDirective {
7028
7028
  });
7029
7029
  }
7030
7030
  setClasses() {
7031
- this._el.nativeElement.className = 'tc-rev-btn';
7031
+ const tokenList = this._el.nativeElement.classList;
7032
+ tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
7032
7033
  let tcRevButton = this.tcRevButton();
7033
7034
  if (!tcRevButton) {
7034
7035
  tcRevButton = 'filled';
@@ -7429,7 +7430,8 @@ class TcRevIconButtonDirective {
7429
7430
  });
7430
7431
  }
7431
7432
  setClasses() {
7432
- this._el.nativeElement.className = 'tc-rev-btn tc-rev-btn-icon';
7433
+ const tokenList = this._el.nativeElement.classList;
7434
+ tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
7433
7435
  let tcRevIconButton = this.tcRevIconButton();
7434
7436
  if (!tcRevIconButton) {
7435
7437
  tcRevIconButton = 'filled';
@@ -8016,12 +8018,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
8016
8018
 
8017
8019
  class TcRevWizardStepsComponent {
8018
8020
  constructor() {
8021
+ this.onStepClick = output();
8019
8022
  this.direction = input('horizontal');
8020
8023
  this.currentStep = input(0);
8024
+ this.stepClickable = input(false);
8021
8025
  this.steps = input.required();
8022
8026
  }
8027
+ handleStepClick(step, isNext, index) {
8028
+ if (this.stepClickable() && !isNext) {
8029
+ this.onStepClick.emit({ step, index });
8030
+ }
8031
+ }
8023
8032
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevWizardStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8024
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevWizardStepsComponent, isStandalone: true, selector: "tc-rev-wizard-steps", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div>\n\n<!-- <div class=\"tcloud-ui-line-step\">\n <div class=\"steps-title-wrapper\">\n <ng-container *ngFor=\"let step of steps; let i = index\">\n <span\n class=\"step-title\"\n [ngStyle]=\"{ 'flex-basis' : 100 / steps.length + '%' }\"\n [ngClass]=\"{ 'completed' : currentStep ? i < currentStep : step.completed }\">\n <ng-container *ngIf=\"showStepCounter\">{{i + 1}}.</ng-container> {{step.title}}\n </span>\n </ng-container>\n </div>\n\n <div class=\"line-wrapper\">\n <div class=\"background-line\"></div>\n <div\n @progressBarEntering\n class=\"progress-line\"\n [ngStyle]=\"{ 'width.%' : currentStep ? ((currentStep / steps.length) * 100) : ((completedSteps / steps.length) * 100) }\">\n </div>\n </div>\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-16)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{align-items:center;display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step.vertical{flex-direction:row-reverse;text-align:right}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;transition:all .3s ease;width:var(--size-40);min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:1px solid var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step-divider{background-color:var(--c-neutral-500);transition:all .3s ease}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.completed{background-color:var(--c-primary-500)}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.horizontal{align-self:center;height:3px;width:92px}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.vertical{align-self:flex-end;height:92px;margin-right:18px;width:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
8033
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevWizardStepsComponent, isStandalone: true, selector: "tc-rev-wizard-steps", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, stepClickable: { classPropertyName: "stepClickable", publicName: "stepClickable", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onStepClick: "onStepClick" }, ngImport: i0, template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tc-rev-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description{color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
8025
8034
  trigger('progressBarEntering', [
8026
8035
  state('in', style({ width: '*' })),
8027
8036
  transition('void => *', [
@@ -8041,7 +8050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
8041
8050
  animate('1.5s 0s ease')
8042
8051
  ])
8043
8052
  ])
8044
- ], template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div>\n\n<!-- <div class=\"tcloud-ui-line-step\">\n <div class=\"steps-title-wrapper\">\n <ng-container *ngFor=\"let step of steps; let i = index\">\n <span\n class=\"step-title\"\n [ngStyle]=\"{ 'flex-basis' : 100 / steps.length + '%' }\"\n [ngClass]=\"{ 'completed' : currentStep ? i < currentStep : step.completed }\">\n <ng-container *ngIf=\"showStepCounter\">{{i + 1}}.</ng-container> {{step.title}}\n </span>\n </ng-container>\n </div>\n\n <div class=\"line-wrapper\">\n <div class=\"background-line\"></div>\n <div\n @progressBarEntering\n class=\"progress-line\"\n [ngStyle]=\"{ 'width.%' : currentStep ? ((currentStep / steps.length) * 100) : ((completedSteps / steps.length) * 100) }\">\n </div>\n </div>\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-16)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{align-items:center;display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step.vertical{flex-direction:row-reverse;text-align:right}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;transition:all .3s ease;width:var(--size-40);min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:1px solid var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step-divider{background-color:var(--c-neutral-500);transition:all .3s ease}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.completed{background-color:var(--c-primary-500)}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.horizontal{align-self:center;height:3px;width:92px}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.vertical{align-self:flex-end;height:92px;margin-right:18px;width:3px}\n"] }]
8053
+ ], template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tc-rev-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description{color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-400)}\n"] }]
8045
8054
  }] });
8046
8055
 
8047
8056
  class TcRevBreadcrumbService {