@wizco/fenixds-ngx 17.8.4 → 17.9.0

package/fesm2022/wizco-fenixds-ngx.mjs

@@ -1,10 +1,9 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, Input, Output, SkipSelf, ViewChild, ChangeDetectionStrategy, forwardRef, ContentChildren, signal } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, Input, Output, ContentChildren, ViewChild, HostListener, SkipSelf, ChangeDetectionStrategy, forwardRef, signal } from '@angular/core';
 import * as i1$1 from '@angular/common/http';
 import { HttpEventType, HttpClientModule } from '@angular/common/http';
-import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -76,11 +75,11 @@ class StepComponent {
         this.clicked.emit();
     }
     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, isStandalone: true, selector: "wco-step", inputs: { active: "active", label: "label", iconName: "iconName", bulletValue: "bulletValue", isVertical: "isVertical", lineStart: "lineStart", lineEnd: "lineEnd", status: "status", size: "size", hasClick: "hasClick" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"step\"\n  [class]=\"'step-status--' + status + ' step-size--' + size\"\n  [ngClass]=\"{\n    'step--vertical': isVertical,\n    'step--horizontal': !isVertical,\n    'step--disabled-linestart': !lineStart,\n    'step--disabled-lineend': !lineEnd,\n    'step--clicked': hasClick,\n    'step--active': active\n  }\"\n\n>\n  <div class=\"step__line step__line--start\"></div>\n  <div class=\"step__bullet\" (click)=\"clickedItem()\">\n    <div>\n      <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n      <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n      <ng-content select=\"[step-bullet-content]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"step__line step__line--end\"></div>\n  <div class=\"step__content\">\n    <div class=\"step__title\" (click)=\"clickedItem()\">\n      <span *ngIf=\"label\">{{label}}</span>\n      <ng-content select=\"[step-title]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["wco-step{display:inherit;align-items:baseline}.step{position:relative;--step-size: var(--wco-font-size-lg, 24px);--step-color: var(--wco-color-primary-600, #000);--step-background-color: var(--wco-color-primary-50, #fff);display:inline-grid;z-index:0}.step.step--active .step__title{font-weight:var(--wco-font-weight-bold, 700)}.step .step__line{width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000)}.step .step__line--start{grid-area:linestart}.step .step__content{grid-area:content}.step .step__line--end{grid-area:lineend}.step--vertical{grid-template-columns:auto 1fr;grid:\"linestart .\" \"bullet content\" \"lineend .\"}.step--vertical .step__bullet{position:relative}.step--vertical .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}.step--vertical .step__content{display:flex;align-items:center}.step--vertical .step__content .step__title{text-align:left}.step--horizontal{grid-template-columns:auto 1fr;grid:\"linestart bullet lineend\" \"content content content\";align-items:center}.step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}.step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}.step__bullet{grid-area:bullet;position:relative}.step__bullet>div{height:var(--step-size);width:var(--step-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}.step__bullet span{font-size:var(--wco-font-size-xxs, 12px);font-weight:var(--wco-font-weight-bold, 700)}.step-status--current{--step-color: #080809;--step-background-color: var(--wco-color-primary-500, #fff)}.step-status--finalized{--step-color: #080809;--step-background-color: #FFB578}.step-status--waiting{--step-color: #080809;--step-background-color: #C4C4C4}.step-status--error{--step-color: #080809;--step-background-color: #FC9393}.step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}.step.step--disabled-linestart.step--horizontal{grid:\"bullet bullet lineend\" \"content content content\"}.step.step--disabled-linestart.step--horizontal .step__bullet{justify-content:flex-start}.step.step--disabled-linestart.step--horizontal .step__title{text-align:left}.step.step--disabled-linestart .step__line--start{display:none}.step.step--disabled-lineend.step--horizontal{grid:\"linestart bullet bullet\" \"content content content\"}.step.step--disabled-lineend.step--horizontal .step__bullet{justify-content:flex-end}.step.step--disabled-lineend.step--horizontal .step__title{text-align:end}.step.step--disabled-lineend .step__line--end{display:none}.step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}.step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}.step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}.step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}.step.step--clicked .step__bullet::hover{box-shadow:var(--wco-shadow-level-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepComponent, isStandalone: true, selector: "wco-step", inputs: { active: "active", label: "label", iconName: "iconName", bulletValue: "bulletValue", isVertical: "isVertical", lineStart: "lineStart", lineEnd: "lineEnd", status: "status", size: "size", hasClick: "hasClick" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"step\"\n  [class]=\"'step-status--' + status + ' step-size--' + size\"\n  [ngClass]=\"{\n    'step--vertical': isVertical,\n    'step--horizontal': !isVertical,\n    'step--disabled-linestart': !lineStart,\n    'step--disabled-lineend': !lineEnd,\n    'step--clicked': hasClick,\n    'step--active': active\n  }\"\n\n>\n  <div class=\"step__line step__line--start\"></div>\n  <div class=\"step__bullet\" (click)=\"clickedItem()\">\n    <div>\n      <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n      <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n      <ng-content select=\"[step-bullet-content]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"step__line step__line--end\"></div>\n  <div class=\"step__content\">\n    <div class=\"step__title\" (click)=\"clickedItem()\">\n      <span *ngIf=\"label\" class=\"display-text\">{{label}}</span>\n      <ng-content select=\"[step-title]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["@layer wco.layer{wco-step{--wco-step-bullet-size: var(--wco-spacing-xs, 24px);--wco-step-icon-size: var(--wco-font-size-xs, 16px);--wco-step-line-color: var(--wco-color-neutral-500, #8D9399);--wco-step-min-width: 180px;--wco-step-max-width: 1350px;--wco-step-text-size: var(--wco-font-size-xs, 16px);display:inherit;align-items:baseline;width:100%}@media (max-width: 768px){wco-step{--wco-step-min-width: 90px;--wco-step-max-width: 100%}}}wco-step .step{position:relative;display:inline-grid;z-index:0;width:100%}wco-step .step.step--active .step__title span{font-weight:var(--wco-font-weight-bold, 700);color:var(--wco-color-neutral-900, #080809)}wco-step .step .step__line{width:2px;height:100%;background-color:var(--wco-step-line-color)}wco-step .step .step__line--start{grid-area:linestart}wco-step .step .step__content{grid-area:content}wco-step .step .step__line--end{grid-area:lineend}wco-step .step--vertical{grid-template-columns:24px 1fr!important;grid:\"linestart .\" \"bullet content\" \"lineend .\"}wco-step .step--vertical .step__bullet{position:relative}wco-step .step--vertical .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000);z-index:-1}wco-step .step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}wco-step .step--vertical .step__content{display:flex;align-items:center}wco-step .step--vertical .step__content .step__title{text-align:left}wco-step .step--horizontal{min-width:var(--wco-step-min-width);max-width:var(--wco-step-max-width);grid-template-areas:\"linestart bullet lineend\" \"content content content\";grid-template-columns:1fr auto 1fr;align-items:center}wco-step .step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}wco-step .step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-step-line-color);z-index:-1}wco-step .step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}wco-step .step--horizontal .step__content{margin-top:var(--wco-spacing-nano, 8px)}wco-step .step--horizontal .step__content span.display-text{text-wrap:balance}wco-step .step__bullet{grid-area:bullet;position:relative}wco-step .step__bullet>div{height:var(--wco-step-bullet-size);width:var(--wco-step-bullet-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}wco-step .step__bullet span{font-size:var(--wco-step-icon-size, 12px);font-weight:var(--wco-font-weight-bold, 700)}wco-step .step-status--current{--step-color: var(--wco-color-primary-text, var(--wco-color-neutral-50));--step-background-color: var(--wco-color-primary-600, #fff);--step-text-font-weight: var(--wco-font-weight-bold, 700)}wco-step .step-status--finalized{--step-color: var(--wco-color-neutral-50, #080809);--step-background-color: var(--wco-color-success-500, #116600);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--waiting{--step-color: var(--wco-color-neutral-600, #080809);--step-background-color: var(--wco-color-neutral-300, #696969);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--error{--step-color: var(--wco-color-danger-700, #FFF);--step-background-color: var(--wco-color-danger-100,#ffa0a0);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}wco-step .step .step__content .step__title span{font-weight:var(--step-text-font-weight)}wco-step .step.step--disabled-linestart .step__line--start{opacity:0}wco-step .step.step--disabled-lineend .step__line--end{opacity:0}wco-step .step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}wco-step .step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}wco-step .step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}wco-step .step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}wco-step .step.step--clicked .step__bullet::hover{box-shadow:var(--wco-shadow-level-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wco-step', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"step\"\n  [class]=\"'step-status--' + status + ' step-size--' + size\"\n  [ngClass]=\"{\n    'step--vertical': isVertical,\n    'step--horizontal': !isVertical,\n    'step--disabled-linestart': !lineStart,\n    'step--disabled-lineend': !lineEnd,\n    'step--clicked': hasClick,\n    'step--active': active\n  }\"\n\n>\n  <div class=\"step__line step__line--start\"></div>\n  <div class=\"step__bullet\" (click)=\"clickedItem()\">\n    <div>\n      <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n      <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n      <ng-content select=\"[step-bullet-content]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"step__line step__line--end\"></div>\n  <div class=\"step__content\">\n    <div class=\"step__title\" (click)=\"clickedItem()\">\n      <span *ngIf=\"label\">{{label}}</span>\n      <ng-content select=\"[step-title]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["wco-step{display:inherit;align-items:baseline}.step{position:relative;--step-size: var(--wco-font-size-lg, 24px);--step-color: var(--wco-color-primary-600, #000);--step-background-color: var(--wco-color-primary-50, #fff);display:inline-grid;z-index:0}.step.step--active .step__title{font-weight:var(--wco-font-weight-bold, 700)}.step .step__line{width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000)}.step .step__line--start{grid-area:linestart}.step .step__content{grid-area:content}.step .step__line--end{grid-area:lineend}.step--vertical{grid-template-columns:auto 1fr;grid:\"linestart .\" \"bullet content\" \"lineend .\"}.step--vertical .step__bullet{position:relative}.step--vertical .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}.step--vertical .step__content{display:flex;align-items:center}.step--vertical .step__content .step__title{text-align:left}.step--horizontal{grid-template-columns:auto 1fr;grid:\"linestart bullet lineend\" \"content content content\";align-items:center}.step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}.step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}.step__bullet{grid-area:bullet;position:relative}.step__bullet>div{height:var(--step-size);width:var(--step-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}.step__bullet span{font-size:var(--wco-font-size-xxs, 12px);font-weight:var(--wco-font-weight-bold, 700)}.step-status--current{--step-color: #080809;--step-background-color: var(--wco-color-primary-500, #fff)}.step-status--finalized{--step-color: #080809;--step-background-color: #FFB578}.step-status--waiting{--step-color: #080809;--step-background-color: #C4C4C4}.step-status--error{--step-color: #080809;--step-background-color: #FC9393}.step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}.step.step--disabled-linestart.step--horizontal{grid:\"bullet bullet lineend\" \"content content content\"}.step.step--disabled-linestart.step--horizontal .step__bullet{justify-content:flex-start}.step.step--disabled-linestart.step--horizontal .step__title{text-align:left}.step.step--disabled-linestart .step__line--start{display:none}.step.step--disabled-lineend.step--horizontal{grid:\"linestart bullet bullet\" \"content content content\"}.step.step--disabled-lineend.step--horizontal .step__bullet{justify-content:flex-end}.step.step--disabled-lineend.step--horizontal .step__title{text-align:end}.step.step--disabled-lineend .step__line--end{display:none}.step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}.step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}.step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}.step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}.step.step--clicked .step__bullet::hover{box-shadow:var(--wco-shadow-level-1)}\n"] }]
+            args: [{ selector: 'wco-step', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"step\"\n  [class]=\"'step-status--' + status + ' step-size--' + size\"\n  [ngClass]=\"{\n    'step--vertical': isVertical,\n    'step--horizontal': !isVertical,\n    'step--disabled-linestart': !lineStart,\n    'step--disabled-lineend': !lineEnd,\n    'step--clicked': hasClick,\n    'step--active': active\n  }\"\n\n>\n  <div class=\"step__line step__line--start\"></div>\n  <div class=\"step__bullet\" (click)=\"clickedItem()\">\n    <div>\n      <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n      <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n      <ng-content select=\"[step-bullet-content]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"step__line step__line--end\"></div>\n  <div class=\"step__content\">\n    <div class=\"step__title\" (click)=\"clickedItem()\">\n      <span *ngIf=\"label\" class=\"display-text\">{{label}}</span>\n      <ng-content select=\"[step-title]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["@layer wco.layer{wco-step{--wco-step-bullet-size: var(--wco-spacing-xs, 24px);--wco-step-icon-size: var(--wco-font-size-xs, 16px);--wco-step-line-color: var(--wco-color-neutral-500, #8D9399);--wco-step-min-width: 180px;--wco-step-max-width: 1350px;--wco-step-text-size: var(--wco-font-size-xs, 16px);display:inherit;align-items:baseline;width:100%}@media (max-width: 768px){wco-step{--wco-step-min-width: 90px;--wco-step-max-width: 100%}}}wco-step .step{position:relative;display:inline-grid;z-index:0;width:100%}wco-step .step.step--active .step__title span{font-weight:var(--wco-font-weight-bold, 700);color:var(--wco-color-neutral-900, #080809)}wco-step .step .step__line{width:2px;height:100%;background-color:var(--wco-step-line-color)}wco-step .step .step__line--start{grid-area:linestart}wco-step .step .step__content{grid-area:content}wco-step .step .step__line--end{grid-area:lineend}wco-step .step--vertical{grid-template-columns:24px 1fr!important;grid:\"linestart .\" \"bullet content\" \"lineend .\"}wco-step .step--vertical .step__bullet{position:relative}wco-step .step--vertical .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000);z-index:-1}wco-step .step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}wco-step .step--vertical .step__content{display:flex;align-items:center}wco-step .step--vertical .step__content .step__title{text-align:left}wco-step .step--horizontal{min-width:var(--wco-step-min-width);max-width:var(--wco-step-max-width);grid-template-areas:\"linestart bullet lineend\" \"content content content\";grid-template-columns:1fr auto 1fr;align-items:center}wco-step .step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}wco-step .step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-step-line-color);z-index:-1}wco-step .step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}wco-step .step--horizontal .step__content{margin-top:var(--wco-spacing-nano, 8px)}wco-step .step--horizontal .step__content span.display-text{text-wrap:balance}wco-step .step__bullet{grid-area:bullet;position:relative}wco-step .step__bullet>div{height:var(--wco-step-bullet-size);width:var(--wco-step-bullet-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}wco-step .step__bullet span{font-size:var(--wco-step-icon-size, 12px);font-weight:var(--wco-font-weight-bold, 700)}wco-step .step-status--current{--step-color: var(--wco-color-primary-text, var(--wco-color-neutral-50));--step-background-color: var(--wco-color-primary-600, #fff);--step-text-font-weight: var(--wco-font-weight-bold, 700)}wco-step .step-status--finalized{--step-color: var(--wco-color-neutral-50, #080809);--step-background-color: var(--wco-color-success-500, #116600);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--waiting{--step-color: var(--wco-color-neutral-600, #080809);--step-background-color: var(--wco-color-neutral-300, #696969);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--error{--step-color: var(--wco-color-danger-700, #FFF);--step-background-color: var(--wco-color-danger-100,#ffa0a0);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}wco-step .step .step__content .step__title span{font-weight:var(--step-text-font-weight)}wco-step .step.step--disabled-linestart .step__line--start{opacity:0}wco-step .step.step--disabled-lineend .step__line--end{opacity:0}wco-step .step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}wco-step .step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}wco-step .step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}wco-step .step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}wco-step .step.step--clicked .step__bullet::hover{box-shadow:var(--wco-shadow-level-1)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { active: [{
                 type: Input
             }], label: [{
@@ -130,11 +129,11 @@ class StepperComponent {
         this.stepperSelected.emit(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepperComponent, isStandalone: true, selector: "wco-stepper", inputs: { isVertical: "isVertical", stepperArray: "stepperArray" }, outputs: { stepperSelected: "stepperSelected" }, ngImport: i0, template: "<div\n  class=\"stepper-vertical\"\n  [ngClass]=\"isVertical === true ? 'stepper-vertical' : 'stepper-horizontal'\"\n  *ngIf=\"stepperArray\"\n>\n  <div class=\"stepper-component\" *ngFor=\"let items of stepperArray; let $i = index\">\n    <div class=\"stepper-component__main\">\n      <div class=\"stepper-item\" [ngClass]=\"{'stepper-item__clicked': items.clicked}\"  (click)=\"clickedItem(items,$i)\">\n        <span\n          [ngClass]=\"\n            items.showLineStart === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n        <span class=\"stepper-item__circle\" [ngClass]=\"items.className\"\n          ><span *ngIf=\"items.type === 'icon'\" class=\"icon material-icons\">{{\n            items.valueIcon\n          }}</span>\n          <span *ngIf=\"items.type === 'text'\" class=\"icon\">{{\n            items.valueBullet\n          }}</span></span\n        >\n        <span\n          [ngClass]=\"\n            items.showLineEnd === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n      </div>\n      <div class=\"stepper-label\">\n        <span\n          class=\"stepper-label__text\"\n          [ngClass]=\"items.className === 'current' ? 'dark-text' : 'light-text'\"\n          >{{ items.label }}</span\n        >\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".stepper-vertical{display:flex;align-items:flex-start;flex-direction:column}.stepper-vertical .stepper-component{display:flex;flex-direction:row;align-items:center}.stepper-vertical .stepper-component__main{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.stepper-vertical .stepper-item{display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper-vertical .stepper-item__line{display:flex;background-color:#000;height:1rem;width:1px}.stepper-vertical .stepper-item___without-line{display:flex;padding-top:1rem}.stepper-vertical .stepper-item__without-line{display:flex;padding-bottom:1rem}.stepper-vertical .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden;transition:all .3s ease-in-out;transform-origin:center center}.stepper-vertical .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-vertical .stepper-item__clicked{cursor:pointer}.stepper-vertical .stepper-item__clicked:hover .stepper-item__circle{transform:scale(1.2)}.stepper-vertical .stepper-item .finalized{background-color:#ffe1ca}.stepper-vertical .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-vertical .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-vertical .stepper-item .error{background-color:#fc9393}.stepper-vertical .stepper-label{padding-left:.5rem;font-size:1rem}.stepper-vertical .stepper-label .dark-text{font-weight:700}.stepper-vertical .stepper-label .light-text{font-weight:400}.stepper-horizontal{display:flex;align-items:flex-start;flex-direction:row}.stepper-horizontal .stepper-component{display:flex;flex-direction:column;align-items:center;width:100%}.stepper-horizontal .stepper-component__main{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center}.stepper-horizontal .stepper-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.stepper-horizontal .stepper-item__line{display:flex;background-color:#000;height:1px;width:100%}.stepper-horizontal .stepper-item__without-line{background-color:transparent;height:1px;width:100%}.stepper-horizontal .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden}.stepper-horizontal .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-horizontal .stepper-item .finalized{background-color:#ffe1ca}.stepper-horizontal .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-horizontal .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-horizontal .stepper-item .error{background-color:#fc9393}.stepper-horizontal .stepper-label{padding-top:.5rem;padding-left:0rem;font-size:.875rem;display:flex;align-items:center;justify-content:center}.stepper-horizontal .stepper-label__text{display:flex;flex-wrap:wrap;max-width:50%;text-align:center}.stepper-horizontal .stepper-label .dark-text{font-weight:700}.stepper-horizontal .stepper-label .light-text{font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepperComponent, isStandalone: true, selector: "wco-stepper", inputs: { isVertical: "isVertical", stepperArray: "stepperArray" }, outputs: { stepperSelected: "stepperSelected" }, ngImport: i0, template: "<div\n  class=\"stepper-vertical\"\n  [ngClass]=\"isVertical === true ? 'stepper-vertical' : 'stepper-horizontal'\"\n  *ngIf=\"stepperArray\"\n>\n  <div class=\"stepper-component\" *ngFor=\"let items of stepperArray; let $i = index\">\n    <div class=\"stepper-component__main\">\n      <div class=\"stepper-item\" [ngClass]=\"{'stepper-item__clicked': items.clicked}\"  (click)=\"clickedItem(items,$i)\">\n        <span\n          [ngClass]=\"\n            items.showLineStart === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n        <span class=\"stepper-item__circle\" [ngClass]=\"items.className\"\n          ><span *ngIf=\"items.type === 'icon'\" class=\"icon material-icons\">{{\n            items.valueIcon\n          }}</span>\n          <span *ngIf=\"items.type === 'text'\" class=\"icon\">{{\n            items.valueBullet\n          }}</span></span\n        >\n        <span\n          [ngClass]=\"\n            items.showLineEnd === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n      </div>\n      <div class=\"stepper-label\">\n        <span\n          class=\"stepper-label__text\"\n          [ngClass]=\"items.className === 'current' ? 'dark-text' : 'light-text'\"\n          >{{ items.label }}</span\n        >\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".stepper-vertical{display:flex;align-items:flex-start;flex-direction:column}.stepper-vertical .stepper-component{display:flex;flex-direction:row;align-items:center}.stepper-vertical .stepper-component__main{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.stepper-vertical .stepper-item{display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper-vertical .stepper-item__line{display:flex;background-color:#000;height:1rem;width:1px}.stepper-vertical .stepper-item___without-line{display:flex;padding-top:1rem}.stepper-vertical .stepper-item__without-line{display:flex;padding-bottom:1rem}.stepper-vertical .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden;transition:all .3s ease-in-out;transform-origin:center center}.stepper-vertical .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-vertical .stepper-item__clicked{cursor:pointer}.stepper-vertical .stepper-item__clicked:hover .stepper-item__circle{transform:scale(1.2)}.stepper-vertical .stepper-item .finalized{background-color:#ffe1ca}.stepper-vertical .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-vertical .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-vertical .stepper-item .error{background-color:#fc9393}.stepper-vertical .stepper-label{padding-left:.5rem;font-size:1rem}.stepper-vertical .stepper-label .dark-text{font-weight:700}.stepper-vertical .stepper-label .light-text{font-weight:400}.stepper-horizontal{display:flex;align-items:flex-start;flex-direction:row}.stepper-horizontal .stepper-component{display:flex;flex-direction:column;align-items:center;width:100%}.stepper-horizontal .stepper-component__main{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center}.stepper-horizontal .stepper-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.stepper-horizontal .stepper-item__line{display:flex;background-color:#000;height:1px;width:100%}.stepper-horizontal .stepper-item__without-line{background-color:transparent;height:1px;width:100%}.stepper-horizontal .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden}.stepper-horizontal .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-horizontal .stepper-item .finalized{background-color:#ffe1ca}.stepper-horizontal .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-horizontal .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-horizontal .stepper-item .error{background-color:#fc9393}.stepper-horizontal .stepper-label{padding-top:.5rem;padding-left:0rem;font-size:.875rem;display:flex;align-items:center;justify-content:center}.stepper-horizontal .stepper-label__text{display:flex;flex-wrap:wrap;max-width:50%;text-align:center}.stepper-horizontal .stepper-label .dark-text{font-weight:700}.stepper-horizontal .stepper-label .light-text{font-weight:400}.stepper-group__wrapper wco-step{background-color:red!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: "wco-stepper", standalone: true, imports: [CommonModule], template: "<div\n  class=\"stepper-vertical\"\n  [ngClass]=\"isVertical === true ? 'stepper-vertical' : 'stepper-horizontal'\"\n  *ngIf=\"stepperArray\"\n>\n  <div class=\"stepper-component\" *ngFor=\"let items of stepperArray; let $i = index\">\n    <div class=\"stepper-component__main\">\n      <div class=\"stepper-item\" [ngClass]=\"{'stepper-item__clicked': items.clicked}\"  (click)=\"clickedItem(items,$i)\">\n        <span\n          [ngClass]=\"\n            items.showLineStart === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n        <span class=\"stepper-item__circle\" [ngClass]=\"items.className\"\n          ><span *ngIf=\"items.type === 'icon'\" class=\"icon material-icons\">{{\n            items.valueIcon\n          }}</span>\n          <span *ngIf=\"items.type === 'text'\" class=\"icon\">{{\n            items.valueBullet\n          }}</span></span\n        >\n        <span\n          [ngClass]=\"\n            items.showLineEnd === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n      </div>\n      <div class=\"stepper-label\">\n        <span\n          class=\"stepper-label__text\"\n          [ngClass]=\"items.className === 'current' ? 'dark-text' : 'light-text'\"\n          >{{ items.label }}</span\n        >\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".stepper-vertical{display:flex;align-items:flex-start;flex-direction:column}.stepper-vertical .stepper-component{display:flex;flex-direction:row;align-items:center}.stepper-vertical .stepper-component__main{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.stepper-vertical .stepper-item{display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper-vertical .stepper-item__line{display:flex;background-color:#000;height:1rem;width:1px}.stepper-vertical .stepper-item___without-line{display:flex;padding-top:1rem}.stepper-vertical .stepper-item__without-line{display:flex;padding-bottom:1rem}.stepper-vertical .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden;transition:all .3s ease-in-out;transform-origin:center center}.stepper-vertical .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-vertical .stepper-item__clicked{cursor:pointer}.stepper-vertical .stepper-item__clicked:hover .stepper-item__circle{transform:scale(1.2)}.stepper-vertical .stepper-item .finalized{background-color:#ffe1ca}.stepper-vertical .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-vertical .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-vertical .stepper-item .error{background-color:#fc9393}.stepper-vertical .stepper-label{padding-left:.5rem;font-size:1rem}.stepper-vertical .stepper-label .dark-text{font-weight:700}.stepper-vertical .stepper-label .light-text{font-weight:400}.stepper-horizontal{display:flex;align-items:flex-start;flex-direction:row}.stepper-horizontal .stepper-component{display:flex;flex-direction:column;align-items:center;width:100%}.stepper-horizontal .stepper-component__main{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center}.stepper-horizontal .stepper-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.stepper-horizontal .stepper-item__line{display:flex;background-color:#000;height:1px;width:100%}.stepper-horizontal .stepper-item__without-line{background-color:transparent;height:1px;width:100%}.stepper-horizontal .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden}.stepper-horizontal .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-horizontal .stepper-item .finalized{background-color:#ffe1ca}.stepper-horizontal .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-horizontal .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-horizontal .stepper-item .error{background-color:#fc9393}.stepper-horizontal .stepper-label{padding-top:.5rem;padding-left:0rem;font-size:.875rem;display:flex;align-items:center;justify-content:center}.stepper-horizontal .stepper-label__text{display:flex;flex-wrap:wrap;max-width:50%;text-align:center}.stepper-horizontal .stepper-label .dark-text{font-weight:700}.stepper-horizontal .stepper-label .light-text{font-weight:400}\n"] }]
+            args: [{ selector: "wco-stepper", standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"stepper-vertical\"\n  [ngClass]=\"isVertical === true ? 'stepper-vertical' : 'stepper-horizontal'\"\n  *ngIf=\"stepperArray\"\n>\n  <div class=\"stepper-component\" *ngFor=\"let items of stepperArray; let $i = index\">\n    <div class=\"stepper-component__main\">\n      <div class=\"stepper-item\" [ngClass]=\"{'stepper-item__clicked': items.clicked}\"  (click)=\"clickedItem(items,$i)\">\n        <span\n          [ngClass]=\"\n            items.showLineStart === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n        <span class=\"stepper-item__circle\" [ngClass]=\"items.className\"\n          ><span *ngIf=\"items.type === 'icon'\" class=\"icon material-icons\">{{\n            items.valueIcon\n          }}</span>\n          <span *ngIf=\"items.type === 'text'\" class=\"icon\">{{\n            items.valueBullet\n          }}</span></span\n        >\n        <span\n          [ngClass]=\"\n            items.showLineEnd === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n      </div>\n      <div class=\"stepper-label\">\n        <span\n          class=\"stepper-label__text\"\n          [ngClass]=\"items.className === 'current' ? 'dark-text' : 'light-text'\"\n          >{{ items.label }}</span\n        >\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".stepper-vertical{display:flex;align-items:flex-start;flex-direction:column}.stepper-vertical .stepper-component{display:flex;flex-direction:row;align-items:center}.stepper-vertical .stepper-component__main{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.stepper-vertical .stepper-item{display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper-vertical .stepper-item__line{display:flex;background-color:#000;height:1rem;width:1px}.stepper-vertical .stepper-item___without-line{display:flex;padding-top:1rem}.stepper-vertical .stepper-item__without-line{display:flex;padding-bottom:1rem}.stepper-vertical .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden;transition:all .3s ease-in-out;transform-origin:center center}.stepper-vertical .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-vertical .stepper-item__clicked{cursor:pointer}.stepper-vertical .stepper-item__clicked:hover .stepper-item__circle{transform:scale(1.2)}.stepper-vertical .stepper-item .finalized{background-color:#ffe1ca}.stepper-vertical .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-vertical .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-vertical .stepper-item .error{background-color:#fc9393}.stepper-vertical .stepper-label{padding-left:.5rem;font-size:1rem}.stepper-vertical .stepper-label .dark-text{font-weight:700}.stepper-vertical .stepper-label .light-text{font-weight:400}.stepper-horizontal{display:flex;align-items:flex-start;flex-direction:row}.stepper-horizontal .stepper-component{display:flex;flex-direction:column;align-items:center;width:100%}.stepper-horizontal .stepper-component__main{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center}.stepper-horizontal .stepper-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.stepper-horizontal .stepper-item__line{display:flex;background-color:#000;height:1px;width:100%}.stepper-horizontal .stepper-item__without-line{background-color:transparent;height:1px;width:100%}.stepper-horizontal .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden}.stepper-horizontal .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-horizontal .stepper-item .finalized{background-color:#ffe1ca}.stepper-horizontal .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-horizontal .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-horizontal .stepper-item .error{background-color:#fc9393}.stepper-horizontal .stepper-label{padding-top:.5rem;padding-left:0rem;font-size:.875rem;display:flex;align-items:center;justify-content:center}.stepper-horizontal .stepper-label__text{display:flex;flex-wrap:wrap;max-width:50%;text-align:center}.stepper-horizontal .stepper-label .dark-text{font-weight:700}.stepper-horizontal .stepper-label .light-text{font-weight:400}.stepper-group__wrapper wco-step{background-color:red!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isVertical: [{
                 type: Input
             }], stepperArray: [{
@@ -143,6 +142,284 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+class StepperGroupComponent {
+    steps;
+    scrollContainer;
+    stepsWrapper;
+    /**
+     * Tamanho do stepper group
+     * 'fit' - ajusta ao conteúdo
+     * 'full' - ocupa toda a largura disponível
+     */
+    size = 'full';
+    /**
+     * Modo de exibição
+     * 'default' - modo padrão
+     * 'mini' - modo compacto (mobile)
+     */
+    mode = 'mini';
+    /**
+     * Orientação dos steps
+     * 'horizontal' - orientação horizontal (padrão)
+     * 'vertical' - orientação vertical
+     */
+    orientation = 'horizontal';
+    /**
+     * Número do step atual (começa em 1, não 0)
+     */
+    current = 1;
+    hasHorizontalScroll = false;
+    canScrollLeft = false;
+    canScrollRight = false;
+    isHorizontal = false;
+    isMiniResponsive = false;
+    get totalSteps() {
+        return this.steps?.length || 0;
+    }
+    isCurrentStep(index) {
+        return index === (this.current - 1);
+    }
+    ngOnChanges(changes) {
+        if (changes['current'] && !changes['current'].firstChange) {
+            setTimeout(() => {
+                this.scrollToCurrent();
+            }, 0);
+        }
+        if (changes['orientation'] && !changes['orientation'].firstChange) {
+            setTimeout(() => {
+                this.updateSteps();
+            }, 0);
+        }
+        if (changes['mode'] || changes['current']) {
+            this.checkMiniResponsive();
+            if (this.isMiniResponsive) {
+                setTimeout(() => {
+                    this.updateStepsVisibility();
+                }, 0);
+            }
+        }
+    }
+    ngAfterContentInit() {
+        if (this.steps) {
+            this.steps.changes.subscribe(() => {
+                this.updateSteps();
+            });
+            this.updateSteps();
+        }
+    }
+    ngAfterViewInit() {
+        this.checkMiniResponsive();
+        this.updateStepsVisibility();
+        setTimeout(() => {
+            this.checkScroll();
+            if (this.current > 0) {
+                this.scrollToCurrent();
+            }
+        }, 0);
+    }
+    updateStepsVisibility() {
+        if (!this.steps || this.steps.length === 0)
+            return;
+        if (this.isMiniResponsive) {
+            setTimeout(() => {
+                const stepElements = this.stepsWrapper?.nativeElement?.querySelectorAll('wco-step');
+                if (stepElements) {
+                    Array.from(stepElements).forEach((stepEl, index) => {
+                        const htmlElement = stepEl;
+                        const isCurrent = index === (this.current - 1);
+                        if (isCurrent) {
+                            htmlElement.style.display = '';
+                            htmlElement.classList.add('stepper-group__step--current');
+                        }
+                        else {
+                            htmlElement.style.display = 'none';
+                        }
+                    });
+                }
+            }, 0);
+        }
+        else {
+            setTimeout(() => {
+                const stepElements = this.stepsWrapper?.nativeElement?.querySelectorAll('wco-step');
+                if (stepElements) {
+                    Array.from(stepElements).forEach((stepEl) => {
+                        const htmlElement = stepEl;
+                        htmlElement.style.display = '';
+                        htmlElement.classList.remove('stepper-group__step--current');
+                    });
+                }
+            }, 0);
+        }
+    }
+    ngOnDestroy() {
+    }
+    onResize() {
+        this.checkMiniResponsive();
+    }
+    checkMiniResponsive() {
+        if (typeof window !== 'undefined') {
+            const wasMiniResponsive = this.isMiniResponsive;
+            this.isMiniResponsive = this.mode === 'mini' && window.innerWidth < 600;
+            if (wasMiniResponsive !== this.isMiniResponsive) {
+                this.updateSteps();
+                this.updateStepsVisibility();
+            }
+        }
+    }
+    updateSteps() {
+        if (!this.steps || this.steps.length === 0)
+            return;
+        this.steps.forEach((step, index) => {
+            const isFirst = index === 0;
+            const isLast = index === this.steps.length - 1;
+            const isCurrent = index === (this.current - 1);
+            if (this.orientation === 'vertical') {
+                step.isVertical = true;
+                step.lineStart = true;
+                step.lineEnd = true;
+            }
+            else {
+                step.isVertical = false;
+                step.lineStart = !isFirst;
+                step.lineEnd = !isLast;
+            }
+            if (this.mode === 'mini') {
+                step.size = 'small';
+            }
+            // Em modo mini responsivo, configurar steps para mostrar apenas o atual
+            if (this.isMiniResponsive) {
+                step.lineStart = false;
+                step.lineEnd = false;
+            }
+        });
+        this.isHorizontal = this.orientation === 'horizontal';
+        if (this.isHorizontal && !this.isMiniResponsive) {
+            setTimeout(() => {
+                this.checkScroll();
+                if (this.current > 0) {
+                    this.scrollToCurrent();
+                }
+            }, 0);
+        }
+    }
+    scrollHandler = () => this.updateArrowVisibility();
+    checkScroll() {
+        if (!this.scrollContainer?.nativeElement || !this.stepsWrapper?.nativeElement) {
+            return;
+        }
+        const container = this.scrollContainer.nativeElement;
+        const wrapper = this.stepsWrapper.nativeElement;
+        const gapMargin = 8; // Respiro para não adicionar scroll sem necessidade;
+        this.hasHorizontalScroll =
+            (wrapper.scrollWidth - gapMargin) > container.clientWidth;
+        if (this.hasHorizontalScroll) {
+            this.updateArrowVisibility();
+            container.removeEventListener('scroll', this.scrollHandler);
+            container.addEventListener('scroll', this.scrollHandler);
+        }
+        else {
+            this.canScrollLeft = false;
+            this.canScrollRight = false;
+            container.removeEventListener('scroll', this.scrollHandler);
+        }
+    }
+    updateArrowVisibility() {
+        if (!this.scrollContainer?.nativeElement)
+            return;
+        const container = this.scrollContainer.nativeElement;
+        const scrollLeft = container.scrollLeft;
+        const scrollWidth = container.scrollWidth;
+        const clientWidth = container.clientWidth;
+        this.canScrollLeft = scrollLeft > 0;
+        this.canScrollRight = scrollLeft < scrollWidth - clientWidth - 1;
+    }
+    scrollToCurrent() {
+        if (!this.scrollContainer?.nativeElement || !this.steps || this.current < 1) {
+            return;
+        }
+        const stepIndex = this.current - 1;
+        if (stepIndex < 0 || stepIndex >= this.steps.length)
+            return;
+        setTimeout(() => {
+            if (!this.scrollContainer?.nativeElement || !this.stepsWrapper?.nativeElement)
+                return;
+            const container = this.scrollContainer.nativeElement;
+            const wrapper = this.stepsWrapper.nativeElement;
+            const stepElements = wrapper.querySelectorAll('wco-step');
+            if (stepIndex >= stepElements.length)
+                return;
+            const stepElement = stepElements[stepIndex];
+            if (!stepElement)
+                return;
+            const stepRect = stepElement.getBoundingClientRect();
+            const wrapperRect = wrapper.getBoundingClientRect();
+            if (stepRect.width === 0 || stepRect.height === 0) {
+                setTimeout(() => this.scrollToCurrent(), 50);
+                return;
+            }
+            const stepLeftRelativeToWrapper = stepRect.left - wrapperRect.left + container.scrollLeft;
+            const stepCenter = stepLeftRelativeToWrapper + (stepRect.width / 2);
+            const containerCenter = container.clientWidth / 2;
+            const targetScrollLeft = stepCenter - containerCenter;
+            const maxScrollLeft = container.scrollWidth - container.clientWidth;
+            const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft));
+            container.scrollTo({
+                left: finalScrollLeft,
+                behavior: 'smooth',
+            });
+            setTimeout(() => {
+                this.updateArrowVisibility();
+            }, 300);
+        }, 150);
+    }
+    scrollLeft() {
+        if (!this.scrollContainer?.nativeElement || !this.canScrollLeft)
+            return;
+        const container = this.scrollContainer.nativeElement;
+        const scrollAmount = container.clientWidth * 0.8;
+        container.scrollBy({
+            left: -scrollAmount,
+            behavior: 'smooth',
+        });
+    }
+    scrollRight() {
+        if (!this.scrollContainer?.nativeElement || !this.canScrollRight)
+            return;
+        const container = this.scrollContainer.nativeElement;
+        const scrollAmount = container.clientWidth * 0.8;
+        container.scrollBy({
+            left: scrollAmount,
+            behavior: 'smooth',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepperGroupComponent, isStandalone: true, selector: "wco-stepper-group", inputs: { size: "size", mode: "mode", orientation: "orientation", current: "current" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "steps", predicate: StepComponent }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "stepsWrapper", first: true, predicate: ["stepsWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"stepper-group\"\n  [ngClass]=\"{\n    'stepper-group--fit': size === 'fit',\n    'stepper-group--full': size === 'full',\n    'stepper-group--mini': mode === 'mini',\n    'stepper-group--default': mode === 'default',\n    'stepper-group--horizontal': orientation === 'horizontal',\n    'stepper-group--vertical': orientation === 'vertical',\n    'stepper-group--mini-responsive': isMiniResponsive\n  }\"\n>\n  <div *ngIf=\"isMiniResponsive\" class=\"stepper-group__mini-header\">\n    <span class=\"stepper-group__mini-text\">Passo {{ current }} de {{ totalSteps }}</span>\n  </div>\n\n  <button \n    *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n    class=\"stepper-group__arrow stepper-group__arrow--left wco-btn btn-primary btn-basic btn-icon btn-sm\"\n    (click)=\"scrollLeft()\"\n    [disabled]=\"!canScrollLeft\"\n    [class.stepper-group__arrow--disabled]=\"!canScrollLeft\"\n    aria-label=\"Voltar\"\n  >\n    <span class=\"material-icons\">chevron_left</span>\n  </button>\n\n  <div #scrollContainer class=\"stepper-group__container\">\n    <div #stepsWrapper class=\"stepper-group__wrapper\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <button \n    *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n    class=\"stepper-group__arrow stepper-group__arrow--right wco-btn btn-primary btn-basic btn-icon btn-sm\"\n    (click)=\"scrollRight()\"\n    [disabled]=\"!canScrollRight\"\n    [class.stepper-group__arrow--disabled]=\"!canScrollRight\"\n    aria-label=\"Avan\u00E7ar\"\n  >\n    <span class=\"material-icons\">chevron_right</span>\n  </button>\n</div>\n", styles: [".stepper-group{position:relative;display:flex;align-items:center;width:100%}.stepper-group--fit{width:fit-content}.stepper-group--full{width:100%}.stepper-group--full .stepper-group__wrapper{width:100%;justify-content:center}.stepper-group__container{flex:1;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.stepper-group__container::-webkit-scrollbar{display:none}.stepper-group__wrapper{display:flex;align-items:baseline;white-space:nowrap;min-width:min-content}.stepper-group--vertical{flex-direction:column;align-items:flex-start}.stepper-group--vertical .stepper-group__container{overflow-x:visible;overflow-y:visible}.stepper-group--vertical .stepper-group__wrapper{flex-direction:column;align-items:flex-start;white-space:normal;width:100%}.stepper-group--vertical wco-step:first-child .step__line--start{opacity:0}.stepper-group--vertical wco-step:last-child .step__line--end{opacity:0}.stepper-group__arrow:hover:not(:disabled){opacity:1;background-color:var(--wco-color-neutral-100, #f5f5f5)}.stepper-group__arrow:active:not(:disabled){opacity:.6}.stepper-group__arrow:focus:not(:disabled){outline:2px solid var(--wco-color-primary-500, #f56c00);outline-offset:2px}.stepper-group__arrow:disabled,.stepper-group__arrow--disabled{opacity:.2;cursor:not-allowed}.stepper-group__arrow--left{margin-right:var(--wco-spacing-xs, 8px)}.stepper-group__arrow--right{margin-left:var(--wco-spacing-xs, 8px)}@media (max-width: 600px){.stepper-group--mini .stepper-group__wrapper{gap:var(--wco-spacing-xs, 8px)}.stepper-group--mini .stepper-group__arrow{display:none}.stepper-group--mini.stepper-group--horizontal .stepper-group__container{overflow-x:auto;-webkit-overflow-scrolling:touch}}.stepper-group--mini-responsive{flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive .stepper-group__mini-header{width:100%}.stepper-group--mini-responsive .stepper-group__mini-text{font-size:var(--wco-font-size-xxs, 14px);color:var(--wco-color-neutral-700, #4B5563);font-weight:var(--wco-font-weight-500, 500);letter-spacing:.35px}.stepper-group--mini-responsive .stepper-group__container{width:100%;overflow:visible}.stepper-group--mini-responsive .stepper-group__wrapper{width:100%;flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive wco-step:not(.stepper-group__step--current){display:none!important}.stepper-group--mini-responsive wco-step.stepper-group__step--current{width:100%}.stepper-group--mini-responsive wco-step .step--horizontal{grid-template-columns:min-content min-content;grid-template-areas:\"content bullet\" \"linestart lineend\"}.stepper-group--mini-responsive wco-step .step--horizontal .step__content{padding-left:0;margin-top:var(--wco-spacing-quark, 4px)}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title{text-align:left}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title span{font-size:var(--wco-font-size-xs, 16px);font-weight:var(--wco-font-weight-bold, 700)}.stepper-group--default .stepper-group__wrapper{gap:0}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper:has(wco-step:nth-child(3)){--wco-step-group-max-width: 350px;--wco-step-groud-width: max-content}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper:not(:has(wco-step:nth-child(3))){--wco-step-group-max-width: 100%;--wco-step-groud-width: 100%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step{max-width:var(--wco-step-group-max-width);width:var(--wco-step-groud-width)}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal{grid-template-columns:80px auto 1fr}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal .step__bullet:before{left:99%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal .step__content{grid-column:2/3}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal{grid-template-columns:1fr auto 80px}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal .step__bullet:before{left:initial}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal .step__content{grid-column:2/3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wco-stepper-group', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"stepper-group\"\n  [ngClass]=\"{\n    'stepper-group--fit': size === 'fit',\n    'stepper-group--full': size === 'full',\n    'stepper-group--mini': mode === 'mini',\n    'stepper-group--default': mode === 'default',\n    'stepper-group--horizontal': orientation === 'horizontal',\n    'stepper-group--vertical': orientation === 'vertical',\n    'stepper-group--mini-responsive': isMiniResponsive\n  }\"\n>\n  <div *ngIf=\"isMiniResponsive\" class=\"stepper-group__mini-header\">\n    <span class=\"stepper-group__mini-text\">Passo {{ current }} de {{ totalSteps }}</span>\n  </div>\n\n  <button \n    *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n    class=\"stepper-group__arrow stepper-group__arrow--left wco-btn btn-primary btn-basic btn-icon btn-sm\"\n    (click)=\"scrollLeft()\"\n    [disabled]=\"!canScrollLeft\"\n    [class.stepper-group__arrow--disabled]=\"!canScrollLeft\"\n    aria-label=\"Voltar\"\n  >\n    <span class=\"material-icons\">chevron_left</span>\n  </button>\n\n  <div #scrollContainer class=\"stepper-group__container\">\n    <div #stepsWrapper class=\"stepper-group__wrapper\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <button \n    *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n    class=\"stepper-group__arrow stepper-group__arrow--right wco-btn btn-primary btn-basic btn-icon btn-sm\"\n    (click)=\"scrollRight()\"\n    [disabled]=\"!canScrollRight\"\n    [class.stepper-group__arrow--disabled]=\"!canScrollRight\"\n    aria-label=\"Avan\u00E7ar\"\n  >\n    <span class=\"material-icons\">chevron_right</span>\n  </button>\n</div>\n", styles: [".stepper-group{position:relative;display:flex;align-items:center;width:100%}.stepper-group--fit{width:fit-content}.stepper-group--full{width:100%}.stepper-group--full .stepper-group__wrapper{width:100%;justify-content:center}.stepper-group__container{flex:1;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.stepper-group__container::-webkit-scrollbar{display:none}.stepper-group__wrapper{display:flex;align-items:baseline;white-space:nowrap;min-width:min-content}.stepper-group--vertical{flex-direction:column;align-items:flex-start}.stepper-group--vertical .stepper-group__container{overflow-x:visible;overflow-y:visible}.stepper-group--vertical .stepper-group__wrapper{flex-direction:column;align-items:flex-start;white-space:normal;width:100%}.stepper-group--vertical wco-step:first-child .step__line--start{opacity:0}.stepper-group--vertical wco-step:last-child .step__line--end{opacity:0}.stepper-group__arrow:hover:not(:disabled){opacity:1;background-color:var(--wco-color-neutral-100, #f5f5f5)}.stepper-group__arrow:active:not(:disabled){opacity:.6}.stepper-group__arrow:focus:not(:disabled){outline:2px solid var(--wco-color-primary-500, #f56c00);outline-offset:2px}.stepper-group__arrow:disabled,.stepper-group__arrow--disabled{opacity:.2;cursor:not-allowed}.stepper-group__arrow--left{margin-right:var(--wco-spacing-xs, 8px)}.stepper-group__arrow--right{margin-left:var(--wco-spacing-xs, 8px)}@media (max-width: 600px){.stepper-group--mini .stepper-group__wrapper{gap:var(--wco-spacing-xs, 8px)}.stepper-group--mini .stepper-group__arrow{display:none}.stepper-group--mini.stepper-group--horizontal .stepper-group__container{overflow-x:auto;-webkit-overflow-scrolling:touch}}.stepper-group--mini-responsive{flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive .stepper-group__mini-header{width:100%}.stepper-group--mini-responsive .stepper-group__mini-text{font-size:var(--wco-font-size-xxs, 14px);color:var(--wco-color-neutral-700, #4B5563);font-weight:var(--wco-font-weight-500, 500);letter-spacing:.35px}.stepper-group--mini-responsive .stepper-group__container{width:100%;overflow:visible}.stepper-group--mini-responsive .stepper-group__wrapper{width:100%;flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive wco-step:not(.stepper-group__step--current){display:none!important}.stepper-group--mini-responsive wco-step.stepper-group__step--current{width:100%}.stepper-group--mini-responsive wco-step .step--horizontal{grid-template-columns:min-content min-content;grid-template-areas:\"content bullet\" \"linestart lineend\"}.stepper-group--mini-responsive wco-step .step--horizontal .step__content{padding-left:0;margin-top:var(--wco-spacing-quark, 4px)}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title{text-align:left}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title span{font-size:var(--wco-font-size-xs, 16px);font-weight:var(--wco-font-weight-bold, 700)}.stepper-group--default .stepper-group__wrapper{gap:0}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper:has(wco-step:nth-child(3)){--wco-step-group-max-width: 350px;--wco-step-groud-width: max-content}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper:not(:has(wco-step:nth-child(3))){--wco-step-group-max-width: 100%;--wco-step-groud-width: 100%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step{max-width:var(--wco-step-group-max-width);width:var(--wco-step-groud-width)}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal{grid-template-columns:80px auto 1fr}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal .step__bullet:before{left:99%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal .step__content{grid-column:2/3}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal{grid-template-columns:1fr auto 80px}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal .step__bullet:before{left:initial}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal .step__content{grid-column:2/3}\n"] }]
+        }], propDecorators: { steps: [{
+                type: ContentChildren,
+                args: [StepComponent]
+            }], scrollContainer: [{
+                type: ViewChild,
+                args: ['scrollContainer', { static: false }]
+            }], stepsWrapper: [{
+                type: ViewChild,
+                args: ['stepsWrapper', { static: false }]
+            }], size: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], current: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
 class UploadComponent {
     http;
     /* Texto de descrição do arquivo */
@@ -577,41 +854,37 @@ class MsgBoxFeedbackComponent {
      * @param {boolean} hideClose
      */
     hideClose = false;
+    /*
+     * Texto do botão
+     * @param {string} textButton
+     */
+    textButton;
     /*
      * Evento emitido ao fechar o componente
      * @param {EventEmitter<any>}
      */
     onClose = new EventEmitter();
+    /*
+     * Evento emitido ao clicar no botão
+     * @param {EventEmitter<any>}
+     */
+    clickButton = new EventEmitter();
     constructor() { }
     close() {
         this.onClose.emit(true);
     }
+    handleClickButton() {
+        this.clickButton.emit(true);
+    }
+    get hasButton() {
+        return !!this.textButton && this.clickButton.observers.length > 0;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MsgBoxFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MsgBoxFeedbackComponent, isStandalone: true, selector: "wco-msg-box-feedback", inputs: { shadow: "shadow", mode: "mode", title: "title", message: "message", type: "type", hideClose: "hideClose" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div \n  [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n  [className]=\"shadow ? 'mode-shadow' : ''\"\n  @fadeSlideInOut>\n  <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n    <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n    <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n    <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n    <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n  </div>\n  <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n      stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n  </svg>\n  <div class=\"box-feedback--content\">\n    <div class=\"box-feedback--header\"> \n      <h6 class=\"display-6 bold\">\n        {{ title }}\n      </h6>\n      <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n        <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n        </svg>\n      </a>\n    </div>\n    <p class=\"display-p\">{{ message }}</p>\n  </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-sm);border:4px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
-            trigger('fadeSlideInOut', [
-                transition(':enter', [
-                    style({ opacity: 0, transform: 'translateY(10px)' }),
-                    animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
-                ]),
-                transition(':leave', [
-                    animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
-                ]),
-            ]),
-        ], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MsgBoxFeedbackComponent, isStandalone: true, selector: "wco-msg-box-feedback", inputs: { shadow: "shadow", mode: "mode", title: "title", message: "message", type: "type", hideClose: "hideClose", textButton: "textButton" }, outputs: { onClose: "onClose", clickButton: "clickButton" }, ngImport: i0, template: "<div \n  [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n  [className]=\"shadow ? 'mode-shadow' : ''\"\n>\n  <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n    <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n    <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n    <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n    <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n  </div>\n  <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n      stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n  </svg>\n  <div class=\"box-feedback--content\">\n    <div class=\"box-feedback--header\"> \n      <h6 class=\"display-6 bold\">\n        {{ title }}\n      </h6>\n      <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n        <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n        </svg>\n      </a>\n    </div>\n    <p class=\"display-p\">{{ message }}</p>\n    <ng-content></ng-content>\n    <div class=\"flex gap-xxs justify-end mt-xs\" *ngIf=\"hasButton\">\n      <button \n        class=\"btn btn-sm btn-link btn-primary\"\n        (click)=\"handleClickButton()\"\n        type=\"button\">\n        {{ textButton }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-md);border:2px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MsgBoxFeedbackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wco-msg-box-feedback', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, animations: [
-                        trigger('fadeSlideInOut', [
-                            transition(':enter', [
-                                style({ opacity: 0, transform: 'translateY(10px)' }),
-                                animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
-                            ]),
-                            transition(':leave', [
-                                animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
-                            ]),
-                        ]),
-                    ], template: "<div \n  [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n  [className]=\"shadow ? 'mode-shadow' : ''\"\n  @fadeSlideInOut>\n  <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n    <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n    <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n    <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n    <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n  </div>\n  <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n      stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n  </svg>\n  <div class=\"box-feedback--content\">\n    <div class=\"box-feedback--header\"> \n      <h6 class=\"display-6 bold\">\n        {{ title }}\n      </h6>\n      <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n        <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n        </svg>\n      </a>\n    </div>\n    <p class=\"display-p\">{{ message }}</p>\n  </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-sm);border:4px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"] }]
+            args: [{ selector: 'wco-msg-box-feedback', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div \n  [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n  [className]=\"shadow ? 'mode-shadow' : ''\"\n>\n  <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n    <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n    <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n    <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n    <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n  </div>\n  <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n      stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n  </svg>\n  <div class=\"box-feedback--content\">\n    <div class=\"box-feedback--header\"> \n      <h6 class=\"display-6 bold\">\n        {{ title }}\n      </h6>\n      <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n        <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n        </svg>\n      </a>\n    </div>\n    <p class=\"display-p\">{{ message }}</p>\n    <ng-content></ng-content>\n    <div class=\"flex gap-xxs justify-end mt-xs\" *ngIf=\"hasButton\">\n      <button \n        class=\"btn btn-sm btn-link btn-primary\"\n        (click)=\"handleClickButton()\"\n        type=\"button\">\n        {{ textButton }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-md);border:2px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { shadow: [{
                 type: Input
             }], mode: [{
@@ -624,8 +897,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], hideClose: [{
                 type: Input
+            }], textButton: [{
+                type: Input
             }], onClose: [{
                 type: Output
+            }], clickButton: [{
+                type: Output
             }] } });
 
 class TabsComponent {
@@ -1918,5 +2195,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, TableComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent };
+export { MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, StepperGroupComponent, TableComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent };
 //# sourceMappingURL=wizco-fenixds-ngx.mjs.map