@dev-tcloud/tcloud-ui 7.3.5 → 7.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +44 -3
  2. package/fesm2022/dev-tcloud-tcloud-ui.mjs +46 -204
  3. package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
  4. package/js/tcloud-ui-app.js +78 -78
  5. package/package.json +1 -2
  6. package/types/dev-tcloud-tcloud-ui.d.ts +4 -28
package/fesm2022/dev-tcloud-tcloud-ui.mjs CHANGED
@@ -3,7 +3,6 @@ import { Injectable, Component, EventEmitter, Input, Output, InjectionToken, Opt
3
3
  import * as i1$1 from '@angular/common';
4
4
  import { DatePipe, CommonModule } from '@angular/common';
5
5
  import { Subject, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, map } from 'rxjs';
6
- import { trigger, state, style, transition, animate, AnimationBuilder } from '@angular/animations';
7
6
  import * as i1 from '@angular/forms';
8
7
  import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, NG_VALIDATORS, Validators, FormGroup } from '@angular/forms';
9
8
  import * as i1$2 from '@angular/router';
@@ -61,23 +60,11 @@ class TCloudUiAccordionBodyComponent {
61
60
  });
62
61
  }
63
62
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiAccordionBodyComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
64
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TCloudUiAccordionBodyComponent, isStandalone: true, selector: "tcloud-ui-accordion-body", ngImport: i0, template: "<div class=\"tcloud-ui-accordion-body tc-accordion-content bg-default\" [class.show]=\"show\" [@expandAccordion]=\"(show) ? 'open' : 'close' \">\n <ng-content></ng-content>\n</div>", styles: [".show{display:block!important;padding-top:15px;padding-bottom:15px}.tc-accordion-content{overflow:hidden}\n"], animations: [
65
- trigger('expandAccordion', [
66
- state('close', style({ height: '0' })),
67
- state('open', style({ height: '*' })),
68
- transition('close <=> open', animate('0.35s ease-in-out')),
69
- ]),
70
- ] }); }
63
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TCloudUiAccordionBodyComponent, isStandalone: true, selector: "tcloud-ui-accordion-body", ngImport: i0, template: "<div class=\"tcloud-ui-accordion-body tc-accordion-content bg-default\" [class.show]=\"show\">\n <div class=\"tc-accordion-content__inner\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".tc-accordion-content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .35s ease-in-out}.tc-accordion-content.show{grid-template-rows:1fr}.tc-accordion-content__inner{min-height:0;overflow:hidden}.tc-accordion-content.show .tc-accordion-content__inner{padding-top:15px;padding-bottom:15px}\n"] }); }
71
64
  }
72
65
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiAccordionBodyComponent, decorators: [{
73
66
  type: Component,
74
- args: [{ selector: 'tcloud-ui-accordion-body', animations: [
75
- trigger('expandAccordion', [
76
- state('close', style({ height: '0' })),
77
- state('open', style({ height: '*' })),
78
- transition('close <=> open', animate('0.35s ease-in-out')),
79
- ]),
80
- ], imports: [], template: "<div class=\"tcloud-ui-accordion-body tc-accordion-content bg-default\" [class.show]=\"show\" [@expandAccordion]=\"(show) ? 'open' : 'close' \">\n <ng-content></ng-content>\n</div>", styles: [".show{display:block!important;padding-top:15px;padding-bottom:15px}.tc-accordion-content{overflow:hidden}\n"] }]
67
+ args: [{ selector: 'tcloud-ui-accordion-body', imports: [], template: "<div class=\"tcloud-ui-accordion-body tc-accordion-content bg-default\" [class.show]=\"show\">\n <div class=\"tc-accordion-content__inner\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".tc-accordion-content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .35s ease-in-out}.tc-accordion-content.show{grid-template-rows:1fr}.tc-accordion-content__inner{min-height:0;overflow:hidden}.tc-accordion-content.show .tc-accordion-content__inner{padding-top:15px;padding-bottom:15px}\n"] }]
81
68
  }], ctorParameters: () => [{ type: TCloudUiAccordionService }] });
82
69
 
83
70
  class TCloudUiAccordionTitleComponent {
@@ -3619,18 +3606,6 @@ class TCloudUiModalComponent {
3619
3606
  this.param_confirm.confirmText = this._confirmText;
3620
3607
  this.param_confirm.confirm = this._confirm;
3621
3608
  }
3622
- get animationParams() {
3623
- if (this.position === 'left') {
3624
- return { value: this.position, params: { enterTransform: 'translateX(-30%)', leaveTransform: 'translateX(-30%)' } };
3625
- }
3626
- if (this.position === 'right') {
3627
- return { value: this.position, params: { enterTransform: 'translateX(30%)', leaveTransform: 'translateX(30%)' } };
3628
- }
3629
- if (this.position === 'bottom') {
3630
- return { value: this.position, params: { enterTransform: 'translateY(30%)', leaveTransform: 'translateY(30%)' } };
3631
- }
3632
- return { value: this.position, params: { enterTransform: 'translateY(-38%)', leaveTransform: 'translateY(-38%)' } };
3633
- }
3634
3609
  set sticky(v) {
3635
3610
  this._sticky = v;
3636
3611
  this.tcloudModalService.setSticky(this._sticky);
@@ -3773,34 +3748,14 @@ class TCloudUiModalComponent {
3773
3748
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiModalComponent, isStandalone: true, selector: "tcloud-ui-modal", inputs: { confirm: "confirm", confirmText: "confirmText", confirmInput: "confirmInput", autoClose: "autoClose", title: "title", maxWidth: "maxWidth", position: "position", sticky: "sticky", window: "window", open: "open", loading: "loading" }, outputs: { openChange: "openChange", toConfirm: "toConfirm", toCancel: "toCancel", toAction: "toAction" }, providers: [
3774
3749
  TcloudModalService,
3775
3750
  TCloudUiLayoutService
3776
- ], ngImport: i0, template: "@if (control_open) {\n <div class=\"tc-background-modal\" >{{ checkIsOpen() }}</div>\n}\n\n@if (open) {\n <div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n @if( layout === 'classic'){\n <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n @if (!loading) {\n <i class=\"fas fa-times\"></i>\n }\n @if (loading) {\n <i class=\"fas fa-spinner fa-spin\"></i>\n }\n </button>\n }@else{\n <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n @if (!loading) {\n <i class=\"fas fa-times\"></i>\n }\n @if (loading) {\n <i class=\"fas fa-spinner fa-spin\"></i>\n }\n </button>\n }\n </div>\n @if (title) {\n <h4 [innerHTML]=\"title\"></h4>\n }\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n}\n\n<!-- Ex: Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid var(--c-neutral-300);position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);padding:12px;border-radius:8px;margin:auto;width:100%;transition:max-width .3s ease-out}@media(prefers-reduced-motion:reduce){.tc-modal{transition:none}}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky>.tc-modal{border-radius:0}.sub-modal.is-sticky.position-left>.tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right>.tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom>.tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center>.tc-modal,.sub-modal.is-sticky.position-bottom>.tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--c-neutral-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:var(--c-neutral-500)!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
3777
- trigger('fade', [
3778
- transition('void => *', [
3779
- style({ opacity: 0, transform: '{{enterTransform}}' }),
3780
- animate('0.3s ease-out', style({ opacity: 1, transform: 'translate(0, 0)' }))
3781
- ], { params: { enterTransform: 'translateY(-38%)' } }),
3782
- transition('* => void', [
3783
- animate('0.3s ease-out', style({ opacity: 0, transform: '{{leaveTransform}}' }))
3784
- ], { params: { leaveTransform: 'translateY(-38%)' } })
3785
- ])
3786
- ] }); }
3751
+ ], ngImport: i0, template: "@if (control_open) {\n <div class=\"tc-background-modal\" >{{ checkIsOpen() }}</div>\n}\n\n@if (open) {\n <div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" animate.enter=\"modal-fade-enter\" animate.leave=\"modal-fade-leave\">\n <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n @if( layout === 'classic'){\n <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n @if (!loading) {\n <i class=\"fas fa-times\"></i>\n }\n @if (loading) {\n <i class=\"fas fa-spinner fa-spin\"></i>\n }\n </button>\n }@else{\n <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n @if (!loading) {\n <i class=\"fas fa-times\"></i>\n }\n @if (loading) {\n <i class=\"fas fa-spinner fa-spin\"></i>\n }\n </button>\n }\n </div>\n @if (title) {\n <h4 [innerHTML]=\"title\"></h4>\n }\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n}\n\n<!-- Ex: Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid var(--c-neutral-300);position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.sub-modal{--modal-enter-from: translateY(-38%);--modal-leave-to: translateY(-38%)}.sub-modal.position-left{--modal-enter-from: translateX(-30%);--modal-leave-to: translateX(-30%)}.sub-modal.position-right{--modal-enter-from: translateX(30%);--modal-leave-to: translateX(30%)}.sub-modal.position-bottom{--modal-enter-from: translateY(30%);--modal-leave-to: translateY(30%)}.sub-modal.modal-fade-enter{animation:tcModalFadeIn .3s ease-out}.sub-modal.modal-fade-leave{animation:tcModalFadeOut .3s ease-out}@keyframes tcModalFadeIn{0%{opacity:0;transform:var(--modal-enter-from)}to{opacity:1;transform:translate(0)}}@keyframes tcModalFadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--modal-leave-to)}}@media(prefers-reduced-motion:reduce){.sub-modal.modal-fade-enter,.sub-modal.modal-fade-leave{animation:none}}.tc-modal{position:relative;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);padding:12px;border-radius:8px;margin:auto;width:100%;transition:max-width .3s ease-out}@media(prefers-reduced-motion:reduce){.tc-modal{transition:none}}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky>.tc-modal{border-radius:0}.sub-modal.is-sticky.position-left>.tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right>.tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom>.tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center>.tc-modal,.sub-modal.is-sticky.position-bottom>.tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--c-neutral-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:var(--c-neutral-500)!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
3787
3752
  }
3788
3753
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiModalComponent, decorators: [{
3789
3754
  type: Component,
3790
3755
  args: [{ selector: 'tcloud-ui-modal', providers: [
3791
3756
  TcloudModalService,
3792
3757
  TCloudUiLayoutService
3793
- ], animations: [
3794
- trigger('fade', [
3795
- transition('void => *', [
3796
- style({ opacity: 0, transform: '{{enterTransform}}' }),
3797
- animate('0.3s ease-out', style({ opacity: 1, transform: 'translate(0, 0)' }))
3798
- ], { params: { enterTransform: 'translateY(-38%)' } }),
3799
- transition('* => void', [
3800
- animate('0.3s ease-out', style({ opacity: 0, transform: '{{leaveTransform}}' }))
3801
- ], { params: { leaveTransform: 'translateY(-38%)' } })
3802
- ])
3803
- ], standalone: true, imports: [CommonModule], template: "@if (control_open) {\n <div class=\"tc-background-modal\" >{{ checkIsOpen() }}</div>\n}\n\n@if (open) {\n <div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n @if( layout === 'classic'){\n <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n @if (!loading) {\n <i class=\"fas fa-times\"></i>\n }\n @if (loading) {\n <i class=\"fas fa-spinner fa-spin\"></i>\n }\n </button>\n }@else{\n <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n @if (!loading) {\n <i class=\"fas fa-times\"></i>\n }\n @if (loading) {\n <i class=\"fas fa-spinner fa-spin\"></i>\n }\n </button>\n }\n </div>\n @if (title) {\n <h4 [innerHTML]=\"title\"></h4>\n }\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n}\n\n<!-- Ex: Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid var(--c-neutral-300);position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);padding:12px;border-radius:8px;margin:auto;width:100%;transition:max-width .3s ease-out}@media(prefers-reduced-motion:reduce){.tc-modal{transition:none}}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky>.tc-modal{border-radius:0}.sub-modal.is-sticky.position-left>.tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right>.tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom>.tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center>.tc-modal,.sub-modal.is-sticky.position-bottom>.tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--c-neutral-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:var(--c-neutral-500)!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"] }]
3758
+ ], standalone: true, imports: [CommonModule], template: "@if (control_open) {\n <div class=\"tc-background-modal\" >{{ checkIsOpen() }}</div>\n}\n\n@if (open) {\n <div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" animate.enter=\"modal-fade-enter\" animate.leave=\"modal-fade-leave\">\n <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n @if( layout === 'classic'){\n <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n @if (!loading) {\n <i class=\"fas fa-times\"></i>\n }\n @if (loading) {\n <i class=\"fas fa-spinner fa-spin\"></i>\n }\n </button>\n }@else{\n <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n @if (!loading) {\n <i class=\"fas fa-times\"></i>\n }\n @if (loading) {\n <i class=\"fas fa-spinner fa-spin\"></i>\n }\n </button>\n }\n </div>\n @if (title) {\n <h4 [innerHTML]=\"title\"></h4>\n }\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n}\n\n<!-- Ex: Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!--\n<tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n</tcloud-ui-modal>\n\n<button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid var(--c-neutral-300);position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.sub-modal{--modal-enter-from: translateY(-38%);--modal-leave-to: translateY(-38%)}.sub-modal.position-left{--modal-enter-from: translateX(-30%);--modal-leave-to: translateX(-30%)}.sub-modal.position-right{--modal-enter-from: translateX(30%);--modal-leave-to: translateX(30%)}.sub-modal.position-bottom{--modal-enter-from: translateY(30%);--modal-leave-to: translateY(30%)}.sub-modal.modal-fade-enter{animation:tcModalFadeIn .3s ease-out}.sub-modal.modal-fade-leave{animation:tcModalFadeOut .3s ease-out}@keyframes tcModalFadeIn{0%{opacity:0;transform:var(--modal-enter-from)}to{opacity:1;transform:translate(0)}}@keyframes tcModalFadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:var(--modal-leave-to)}}@media(prefers-reduced-motion:reduce){.sub-modal.modal-fade-enter,.sub-modal.modal-fade-leave{animation:none}}.tc-modal{position:relative;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);padding:12px;border-radius:8px;margin:auto;width:100%;transition:max-width .3s ease-out}@media(prefers-reduced-motion:reduce){.tc-modal{transition:none}}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky>.tc-modal{border-radius:0}.sub-modal.is-sticky.position-left>.tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right>.tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom>.tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center>.tc-modal,.sub-modal.is-sticky.position-bottom>.tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--c-neutral-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:var(--c-neutral-500)!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"] }]
3804
3759
  }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { confirm: [{
3805
3760
  type: Input
3806
3761
  }], confirmText: [{
@@ -5129,27 +5084,11 @@ class TCloudUiLineStepTitleComponent {
5129
5084
  return this.steps.filter(x => x.completed).length;
5130
5085
  }
5131
5086
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiLineStepTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5132
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiLineStepTitleComponent, isStandalone: true, selector: "tcloud-ui-line-step-title", inputs: { showStepCounter: "showStepCounter", steps: "steps", currentStep: "currentStep" }, ngImport: i0, template: "<div class=\"tcloud-ui-line-step\">\n <div class=\"steps-title-wrapper\">\n @for (step of steps; track step; let i = $index) {\n <span\n class=\"step-title\"\n [ngStyle]=\"{ 'flex-basis' : 100 / steps.length + '%' }\"\n [ngClass]=\"{ 'completed' : currentStep ? i < currentStep : step.completed }\">\n @if (showStepCounter) {\n {{i + 1}}.\n } {{step.title}}\n </span>\n }\n </div>\n\n <div class=\"line-wrapper\">\n <div class=\"background-line\"></div>\n <div\n @progressBarEntering\n class=\"progress-line\"\n [ngStyle]=\"{ 'width.%' : currentStep ? ((currentStep / steps.length) * 100) : ((completedSteps / steps.length) * 100) }\">\n </div>\n </div>\n </div>\n", styles: [".tcloud-ui-line-step{width:100%}.tcloud-ui-line-step .steps-title-wrapper{display:flex;font-size:13px;margin-bottom:16px}.tcloud-ui-line-step .steps-title-wrapper .step-title{transition:.3s ease}.tcloud-ui-line-step .steps-title-wrapper .step-title.completed{color:var(--tc-primary)}.tcloud-ui-line-step .line-wrapper{height:8px;position:relative;width:100%}.tcloud-ui-line-step .line-wrapper .background-line{background-color:var(--tc-gray-300);border-radius:8px;height:8px;left:0;position:absolute;top:0;width:100%}.tcloud-ui-line-step .line-wrapper .progress-line{background-color:var(--tc-primary);border-radius:8px;height:8px;left:0;position:absolute;top:0;transition:.75s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
5133
- trigger('progressBarEntering', [
5134
- state('in', style({ width: '*' })),
5135
- transition('void => *', [
5136
- style({ width: 0 }),
5137
- animate('1.5s 0s ease')
5138
- ])
5139
- ])
5140
- ] }); }
5087
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiLineStepTitleComponent, isStandalone: true, selector: "tcloud-ui-line-step-title", inputs: { showStepCounter: "showStepCounter", steps: "steps", currentStep: "currentStep" }, ngImport: i0, template: "<div class=\"tcloud-ui-line-step\">\n <div class=\"steps-title-wrapper\">\n @for (step of steps; track step; let i = $index) {\n <span\n class=\"step-title\"\n [ngStyle]=\"{ 'flex-basis' : 100 / steps.length + '%' }\"\n [ngClass]=\"{ 'completed' : currentStep ? i < currentStep : step.completed }\">\n @if (showStepCounter) {\n {{i + 1}}.\n } {{step.title}}\n </span>\n }\n </div>\n\n <div class=\"line-wrapper\">\n <div class=\"background-line\"></div>\n <div\n @progressBarEntering\n class=\"progress-line\"\n [ngStyle]=\"{ 'width.%' : currentStep ? ((currentStep / steps.length) * 100) : ((completedSteps / steps.length) * 100) }\">\n </div>\n </div>\n </div>\n", styles: [".tcloud-ui-line-step{width:100%}.tcloud-ui-line-step .steps-title-wrapper{display:flex;font-size:13px;margin-bottom:16px}.tcloud-ui-line-step .steps-title-wrapper .step-title{transition:.3s ease}.tcloud-ui-line-step .steps-title-wrapper .step-title.completed{color:var(--tc-primary)}.tcloud-ui-line-step .line-wrapper{height:8px;position:relative;width:100%}.tcloud-ui-line-step .line-wrapper .background-line{background-color:var(--tc-gray-300);border-radius:8px;height:8px;left:0;position:absolute;top:0;width:100%}.tcloud-ui-line-step .line-wrapper .progress-line{background-color:var(--tc-primary);border-radius:8px;height:8px;left:0;position:absolute;top:0;transition:.75s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
5141
5088
  }
5142
5089
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiLineStepTitleComponent, decorators: [{
5143
5090
  type: Component,
5144
- args: [{ selector: 'tcloud-ui-line-step-title', animations: [
5145
- trigger('progressBarEntering', [
5146
- state('in', style({ width: '*' })),
5147
- transition('void => *', [
5148
- style({ width: 0 }),
5149
- animate('1.5s 0s ease')
5150
- ])
5151
- ])
5152
- ], standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-line-step\">\n <div class=\"steps-title-wrapper\">\n @for (step of steps; track step; let i = $index) {\n <span\n class=\"step-title\"\n [ngStyle]=\"{ 'flex-basis' : 100 / steps.length + '%' }\"\n [ngClass]=\"{ 'completed' : currentStep ? i < currentStep : step.completed }\">\n @if (showStepCounter) {\n {{i + 1}}.\n } {{step.title}}\n </span>\n }\n </div>\n\n <div class=\"line-wrapper\">\n <div class=\"background-line\"></div>\n <div\n @progressBarEntering\n class=\"progress-line\"\n [ngStyle]=\"{ 'width.%' : currentStep ? ((currentStep / steps.length) * 100) : ((completedSteps / steps.length) * 100) }\">\n </div>\n </div>\n </div>\n", styles: [".tcloud-ui-line-step{width:100%}.tcloud-ui-line-step .steps-title-wrapper{display:flex;font-size:13px;margin-bottom:16px}.tcloud-ui-line-step .steps-title-wrapper .step-title{transition:.3s ease}.tcloud-ui-line-step .steps-title-wrapper .step-title.completed{color:var(--tc-primary)}.tcloud-ui-line-step .line-wrapper{height:8px;position:relative;width:100%}.tcloud-ui-line-step .line-wrapper .background-line{background-color:var(--tc-gray-300);border-radius:8px;height:8px;left:0;position:absolute;top:0;width:100%}.tcloud-ui-line-step .line-wrapper .progress-line{background-color:var(--tc-primary);border-radius:8px;height:8px;left:0;position:absolute;top:0;transition:.75s ease}\n"] }]
5091
+ args: [{ selector: 'tcloud-ui-line-step-title', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-line-step\">\n <div class=\"steps-title-wrapper\">\n @for (step of steps; track step; let i = $index) {\n <span\n class=\"step-title\"\n [ngStyle]=\"{ 'flex-basis' : 100 / steps.length + '%' }\"\n [ngClass]=\"{ 'completed' : currentStep ? i < currentStep : step.completed }\">\n @if (showStepCounter) {\n {{i + 1}}.\n } {{step.title}}\n </span>\n }\n </div>\n\n <div class=\"line-wrapper\">\n <div class=\"background-line\"></div>\n <div\n @progressBarEntering\n class=\"progress-line\"\n [ngStyle]=\"{ 'width.%' : currentStep ? ((currentStep / steps.length) * 100) : ((completedSteps / steps.length) * 100) }\">\n </div>\n </div>\n </div>\n", styles: [".tcloud-ui-line-step{width:100%}.tcloud-ui-line-step .steps-title-wrapper{display:flex;font-size:13px;margin-bottom:16px}.tcloud-ui-line-step .steps-title-wrapper .step-title{transition:.3s ease}.tcloud-ui-line-step .steps-title-wrapper .step-title.completed{color:var(--tc-primary)}.tcloud-ui-line-step .line-wrapper{height:8px;position:relative;width:100%}.tcloud-ui-line-step .line-wrapper .background-line{background-color:var(--tc-gray-300);border-radius:8px;height:8px;left:0;position:absolute;top:0;width:100%}.tcloud-ui-line-step .line-wrapper .progress-line{background-color:var(--tc-primary);border-radius:8px;height:8px;left:0;position:absolute;top:0;transition:.75s ease}\n"] }]
5153
5092
  }], propDecorators: { showStepCounter: [{
5154
5093
  type: Input
5155
5094
  }], steps: [{
@@ -8322,8 +8261,6 @@ class TCloudUiDeviceUtilsService {
8322
8261
  this.menuHost = null;
8323
8262
  this.embeddedView = null;
8324
8263
  this.appRef = inject(ApplicationRef);
8325
- this.animationBuilder = inject(AnimationBuilder);
8326
- this.player = null;
8327
8264
  this.renderer = rendererFactory.createRenderer(null, null);
8328
8265
  window.addEventListener('resize', () => {
8329
8266
  this.widthScreen.set(window.innerWidth);
@@ -8347,23 +8284,30 @@ class TCloudUiDeviceUtilsService {
8347
8284
  this.embeddedView.rootNodes.forEach((node) => {
8348
8285
  this.renderer.appendChild(this.menuHost, node);
8349
8286
  });
8350
- const fadeIn = this.animationBuilder.build([
8351
- style({ opacity: 0 }),
8352
- animate('200ms ease', style({ opacity: 1 })),
8353
- ]);
8354
- this.player = fadeIn.create(this.menuHost);
8355
- this.player.play();
8287
+ // Fade in via CSS (sem @angular/animations). O host já inicia com opacity 0.
8288
+ this.renderer.setStyle(this.menuHost, 'transition', 'opacity 200ms ease');
8289
+ requestAnimationFrame(() => {
8290
+ if (this.menuHost) {
8291
+ this.renderer.setStyle(this.menuHost, 'opacity', '1');
8292
+ }
8293
+ });
8356
8294
  }
8357
8295
  closeDropdownDevice() {
8358
8296
  if (!this.menuHost)
8359
8297
  return;
8360
- const fadeOut = this.animationBuilder.build([
8361
- style({ opacity: 1 }),
8362
- animate('200ms ease', style({ opacity: 0 })),
8363
- ]);
8364
- this.player = fadeOut.create(this.menuHost);
8365
- this.player.play();
8366
- this.player.onDone(() => {
8298
+ const host = this.menuHost;
8299
+ let finished = false;
8300
+ let unlisten = null;
8301
+ let fallback = null;
8302
+ // Fade out via CSS; ao terminar a transição (ou via fallback), limpa o host.
8303
+ const finish = () => {
8304
+ if (finished)
8305
+ return;
8306
+ finished = true;
8307
+ if (unlisten)
8308
+ unlisten();
8309
+ if (fallback)
8310
+ clearTimeout(fallback);
8367
8311
  this.renderer.removeStyle(document.body, 'overflow');
8368
8312
  this.renderer.removeStyle(document.body, 'touch-action');
8369
8313
  if (this.embeddedView) {
@@ -8371,10 +8315,15 @@ class TCloudUiDeviceUtilsService {
8371
8315
  this.embeddedView.destroy();
8372
8316
  this.embeddedView = null;
8373
8317
  }
8374
- this.renderer.removeChild(document.body, this.menuHost);
8375
- this.menuHost = null;
8376
- this.player = null;
8377
- });
8318
+ this.renderer.removeChild(document.body, host);
8319
+ if (this.menuHost === host) {
8320
+ this.menuHost = null;
8321
+ }
8322
+ };
8323
+ unlisten = this.renderer.listen(host, 'transitionend', finish);
8324
+ fallback = setTimeout(finish, 250);
8325
+ this.renderer.setStyle(host, 'transition', 'opacity 200ms ease');
8326
+ this.renderer.setStyle(host, 'opacity', '0');
8378
8327
  }
8379
8328
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDeviceUtilsService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
8380
8329
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDeviceUtilsService, providedIn: 'root' }); }
@@ -10067,27 +10016,11 @@ class TCloudUiWizardStepsComponent {
10067
10016
  }
10068
10017
  }
10069
10018
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiWizardStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10070
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiWizardStepsComponent, isStandalone: true, selector: "tcloud-ui-wizard-steps", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, stepClickable: { classPropertyName: "stepClickable", publicName: "stepClickable", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onStepClick: "onStepClick" }, ngImport: i0, template: "<div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tcloud-ui-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tcloud-ui-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tcloud-ui-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tcloud-ui-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tcloud-ui-wizard-steps--horizontal{flex-direction:row}.tcloud-ui-wizard-steps--vertical{flex-direction:column}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step{display:flex;gap:var(--size-8)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__info{max-width:13.25rem}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__description{color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__description{color:var(--c-neutral-400)}\n"], animations: [
10071
- trigger('progressBarEntering', [
10072
- state('in', style({ width: '*' })),
10073
- transition('void => *', [
10074
- style({ width: 0 }),
10075
- animate('1.5s 0s ease')
10076
- ])
10077
- ])
10078
- ] }); }
10019
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiWizardStepsComponent, isStandalone: true, selector: "tcloud-ui-wizard-steps", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, stepClickable: { classPropertyName: "stepClickable", publicName: "stepClickable", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onStepClick: "onStepClick" }, ngImport: i0, template: "<div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tcloud-ui-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tcloud-ui-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tcloud-ui-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tcloud-ui-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tcloud-ui-wizard-steps--horizontal{flex-direction:row}.tcloud-ui-wizard-steps--vertical{flex-direction:column}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step{display:flex;gap:var(--size-8)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__info{max-width:13.25rem}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__description{color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__description{color:var(--c-neutral-400)}\n"] }); }
10079
10020
  }
10080
10021
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiWizardStepsComponent, decorators: [{
10081
10022
  type: Component,
10082
- args: [{ selector: 'tcloud-ui-wizard-steps', imports: [], animations: [
10083
- trigger('progressBarEntering', [
10084
- state('in', style({ width: '*' })),
10085
- transition('void => *', [
10086
- style({ width: 0 }),
10087
- animate('1.5s 0s ease')
10088
- ])
10089
- ])
10090
- ], template: "<div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tcloud-ui-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tcloud-ui-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tcloud-ui-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tcloud-ui-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tcloud-ui-wizard-steps--horizontal{flex-direction:row}.tcloud-ui-wizard-steps--vertical{flex-direction:column}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step{display:flex;gap:var(--size-8)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__info{max-width:13.25rem}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__description{color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__description{color:var(--c-neutral-400)}\n"] }]
10023
+ args: [{ selector: 'tcloud-ui-wizard-steps', imports: [], template: "<div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tcloud-ui-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tcloud-ui-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tcloud-ui-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tcloud-ui-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tcloud-ui-wizard-steps--horizontal{flex-direction:row}.tcloud-ui-wizard-steps--vertical{flex-direction:column}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step{display:flex;gap:var(--size-8)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__info{max-width:13.25rem}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__description{color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__description{color:var(--c-neutral-400)}\n"] }]
10091
10024
  }], propDecorators: { onStepClick: [{ type: i0.Output, args: ["onStepClick"] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }], stepClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepClickable", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }] } });
10092
10025
 
10093
10026
  class TCloudUiSearchInputComponent {
@@ -10311,31 +10244,11 @@ class TCloudUiDialogComponent {
10311
10244
  return this;
10312
10245
  }
10313
10246
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10314
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiDialogComponent, isStandalone: true, selector: "tcloud-ui-dialog", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (hasInputConfirmation)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:3000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--c-neutral-50);color:var(--c-neutral-700)}.container-dialog .container-header{display:flex;justify-content:space-between;align-items:center}.container-dialog .container-header .tc-title{font-size:18px;font-weight:700}.container-dialog .container-header .container-close-button{width:40px;height:40px;border-radius:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-neutral-600);border:1px solid var(--c-neutral-300)}.container-dialog .container-input-confirmation{display:grid;gap:8px}.container-dialog .container-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.container-dialog .container-footer button{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TcRevSmallLoadingComponent, selector: "tc-rev-small-loading", inputs: ["width", "marginTop", "marginBottom", "marginRight", "marginLeft"] }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }], animations: [
10315
- trigger('fade', [
10316
- state('visible', style({ opacity: 1 })),
10317
- state('hide', style({ opacity: 0, top: '-38%' })),
10318
- transition('void => visible', [
10319
- style({ opacity: 0, top: '-38%' }),
10320
- animate('0.3s ease-out')
10321
- ]),
10322
- transition('visible => hide', animate('0.3s ease-out'))
10323
- ])
10324
- ] }); }
10247
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiDialogComponent, isStandalone: true, selector: "tcloud-ui-dialog", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [class.dialog-hide]=\"animation === 'hide'\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (hasInputConfirmation)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:3000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--c-neutral-50);color:var(--c-neutral-700);opacity:1;transition:opacity .3s ease-out,top .3s ease-out}.container-dialog .container-header{display:flex;justify-content:space-between;align-items:center}.container-dialog .container-header .tc-title{font-size:18px;font-weight:700}.container-dialog .container-header .container-close-button{width:40px;height:40px;border-radius:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-neutral-600);border:1px solid var(--c-neutral-300)}.container-dialog .container-input-confirmation{display:grid;gap:8px}.container-dialog .container-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.container-dialog .container-footer button{width:100%}.container-dialog.dialog-hide{opacity:0;top:-38%}@starting-style{.container-dialog{opacity:0;top:-38%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TcRevSmallLoadingComponent, selector: "tc-rev-small-loading", inputs: ["width", "marginTop", "marginBottom", "marginRight", "marginLeft"] }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
10325
10248
  }
10326
10249
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDialogComponent, decorators: [{
10327
10250
  type: Component,
10328
- args: [{ selector: 'tcloud-ui-dialog', animations: [
10329
- trigger('fade', [
10330
- state('visible', style({ opacity: 1 })),
10331
- state('hide', style({ opacity: 0, top: '-38%' })),
10332
- transition('void => visible', [
10333
- style({ opacity: 0, top: '-38%' }),
10334
- animate('0.3s ease-out')
10335
- ]),
10336
- transition('visible => hide', animate('0.3s ease-out'))
10337
- ])
10338
- ], standalone: true, imports: [CommonModule, ReactiveFormsModule, I18nTranslatePipe, TCloudUiLoadingComponent, TcRevSmallLoadingComponent], template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (hasInputConfirmation)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:3000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--c-neutral-50);color:var(--c-neutral-700)}.container-dialog .container-header{display:flex;justify-content:space-between;align-items:center}.container-dialog .container-header .tc-title{font-size:18px;font-weight:700}.container-dialog .container-header .container-close-button{width:40px;height:40px;border-radius:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-neutral-600);border:1px solid var(--c-neutral-300)}.container-dialog .container-input-confirmation{display:grid;gap:8px}.container-dialog .container-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.container-dialog .container-footer button{width:100%}\n"] }]
10251
+ args: [{ selector: 'tcloud-ui-dialog', standalone: true, imports: [CommonModule, ReactiveFormsModule, I18nTranslatePipe, TCloudUiLoadingComponent, TcRevSmallLoadingComponent], template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [class.dialog-hide]=\"animation === 'hide'\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (hasInputConfirmation)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:3000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--c-neutral-50);color:var(--c-neutral-700);opacity:1;transition:opacity .3s ease-out,top .3s ease-out}.container-dialog .container-header{display:flex;justify-content:space-between;align-items:center}.container-dialog .container-header .tc-title{font-size:18px;font-weight:700}.container-dialog .container-header .container-close-button{width:40px;height:40px;border-radius:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-neutral-600);border:1px solid var(--c-neutral-300)}.container-dialog .container-input-confirmation{display:grid;gap:8px}.container-dialog .container-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.container-dialog .container-footer button{width:100%}.container-dialog.dialog-hide{opacity:0;top:-38%}@starting-style{.container-dialog{opacity:0;top:-38%}}\n"] }]
10339
10252
  }], propDecorators: { onKeydownHandler: [{
10340
10253
  type: HostListener,
10341
10254
  args: ['document:keydown.escape', ['$event']]
@@ -10989,6 +10902,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
10989
10902
  * Função provider para configurar o TCloud UI em aplicações standalone do Angular.
10990
10903
  * Use esta função no `main.ts` ou em `app.config.ts` com `bootstrapApplication`.
10991
10904
  *
10905
+ * As animações da lib usam CSS (`animate.enter`/`animate.leave` e transições), então
10906
+ * não é necessário `provideAnimations()` nem `@angular/animations`.
10907
+ *
10992
10908
  * @param config - Configuração opcional do TCloud UI
10993
10909
  * @returns EnvironmentProviders para uso em aplicações standalone
10994
10910
  *
@@ -12402,69 +12318,11 @@ class TcRevSideDrawerComponent {
12402
12318
  _ev.stopPropagation();
12403
12319
  }
12404
12320
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TcRevSideDrawerComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
12405
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TcRevSideDrawerComponent, isStandalone: true, selector: "tc-rev-side-drawer", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onCloseDrawer: "onCloseDrawer" }, ngImport: i0, template: "@if(isDesktop()){\n <div\n [@backdropAnimation]\n class=\"tc-rev-side-drawer-overlay\"\n (click)=\"handleClickOverlay()\">\n </div>\n}\n\n@if (isOpen) {\n <div\n [@drawerAnimation]=\"isDesktop() ? 'desktop' : 'mobile'\"\n class=\"tc-rev-side-drawer-content\"\n [style.width]=\"isMobile() ? '100%' : null\"\n (click)=\"handleClickContent($event)\"\n [style]=\"xAxis()\">\n <div class=\"tc-rev-side-drawer-content__header\">\n <h2 class=\"mar-none f-h2 f-weight-600\">{{title()}}</h2>\n <button\n tcRevIconButton=\"outline\" color=\"dark\"\n [disabled]=\"loading()\"\n (click)=\"handleClickOverlay()\">\n <i class=\"fa-light fa-times\"></i>\n </button>\n </div>\n <ng-content></ng-content>\n </div>\n}", styles: [":host{display:block}.tc-rev-side-drawer-overlay{background-color:#00000080;inset:0;position:fixed;height:100vh;z-index:3000}.tc-rev-side-drawer-content{background-color:var(--c-neutral-50);height:100vh;position:fixed;z-index:3001;top:0}.tc-rev-side-drawer-content__header{align-items:center;color:var(--c-neutral-700);display:flex;font-family:var(--f-family);gap:var(--size-16);justify-content:space-between;padding:var(--size-16);padding-bottom:0}\n"], dependencies: [{ kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }], animations: [
12406
- trigger('drawerAnimation', [
12407
- transition('void => desktop', [
12408
- style({ transform: 'translateX(100%)', opacity: 0 }),
12409
- animate('250ms', style({ transform: 'translateX(0)', opacity: 1 })),
12410
- ]),
12411
- transition('desktop => void', [
12412
- style({ transform: 'translateX(0)', opacity: 1 }),
12413
- animate('250ms', style({ transform: 'translateX(100%)', opacity: 0 })),
12414
- ]),
12415
- transition('void => mobile', [
12416
- style({ opacity: 0 }),
12417
- animate('200ms ease', style({ opacity: 1 })),
12418
- ]),
12419
- transition('mobile => void', [
12420
- style({ opacity: 1 }),
12421
- animate('200ms ease', style({ opacity: 0 })),
12422
- ]),
12423
- ]),
12424
- trigger('backdropAnimation', [
12425
- transition(':enter', [
12426
- style({ opacity: 0 }),
12427
- animate('100ms', style({ opacity: 1 })),
12428
- ]),
12429
- transition(':leave', [
12430
- style({ opacity: 1 }),
12431
- animate('250ms', style({ opacity: 0 })),
12432
- ]),
12433
- ]),
12434
- ] }); }
12321
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TcRevSideDrawerComponent, isStandalone: true, selector: "tc-rev-side-drawer", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onCloseDrawer: "onCloseDrawer" }, ngImport: i0, template: "@if(isDesktop() && isOpen){\n <div\n animate.enter=\"drawer-backdrop-enter\"\n animate.leave=\"drawer-backdrop-leave\"\n class=\"tc-rev-side-drawer-overlay\"\n (click)=\"handleClickOverlay()\">\n </div>\n}\n\n@if (isOpen) {\n <div\n [animate.enter]=\"isDesktop() ? 'drawer-enter-desktop' : 'drawer-enter-mobile'\"\n [animate.leave]=\"isDesktop() ? 'drawer-leave-desktop' : 'drawer-leave-mobile'\"\n class=\"tc-rev-side-drawer-content\"\n [style.width]=\"isMobile() ? '100%' : null\"\n (click)=\"handleClickContent($event)\"\n [style]=\"xAxis()\">\n <div class=\"tc-rev-side-drawer-content__header\">\n <h2 class=\"mar-none f-h2 f-weight-600\">{{title()}}</h2>\n <button\n tcRevIconButton=\"outline\" color=\"dark\"\n [disabled]=\"loading()\"\n (click)=\"handleClickOverlay()\">\n <i class=\"fa-light fa-times\"></i>\n </button>\n </div>\n <ng-content></ng-content>\n </div>\n}", styles: [":host{display:block}.tc-rev-side-drawer-overlay{background-color:#00000080;inset:0;position:fixed;height:100vh;z-index:3000}.tc-rev-side-drawer-overlay.drawer-backdrop-enter{animation:tcDrawerBackdropIn .1s ease}.tc-rev-side-drawer-overlay.drawer-backdrop-leave{animation:tcDrawerBackdropOut .25s ease}.tc-rev-side-drawer-content.drawer-enter-desktop{animation:tcDrawerSlideIn .25s ease}.tc-rev-side-drawer-content.drawer-leave-desktop{animation:tcDrawerSlideOut .25s ease}.tc-rev-side-drawer-content.drawer-enter-mobile{animation:tcDrawerFadeIn .2s ease}.tc-rev-side-drawer-content.drawer-leave-mobile{animation:tcDrawerFadeOut .2s ease}@keyframes tcDrawerBackdropIn{0%{opacity:0}to{opacity:1}}@keyframes tcDrawerBackdropOut{0%{opacity:1}to{opacity:0}}@keyframes tcDrawerSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes tcDrawerSlideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes tcDrawerFadeIn{0%{opacity:0}to{opacity:1}}@keyframes tcDrawerFadeOut{0%{opacity:1}to{opacity:0}}.tc-rev-side-drawer-content{background-color:var(--c-neutral-50);height:100vh;position:fixed;z-index:3001;top:0}.tc-rev-side-drawer-content__header{align-items:center;color:var(--c-neutral-700);display:flex;font-family:var(--f-family);gap:var(--size-16);justify-content:space-between;padding:var(--size-16);padding-bottom:0}\n"], dependencies: [{ kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
12435
12322
  }
12436
12323
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TcRevSideDrawerComponent, decorators: [{
12437
12324
  type: Component,
12438
- args: [{ selector: 'tc-rev-side-drawer', imports: [TcRevIconButtonDirective], animations: [
12439
- trigger('drawerAnimation', [
12440
- transition('void => desktop', [
12441
- style({ transform: 'translateX(100%)', opacity: 0 }),
12442
- animate('250ms', style({ transform: 'translateX(0)', opacity: 1 })),
12443
- ]),
12444
- transition('desktop => void', [
12445
- style({ transform: 'translateX(0)', opacity: 1 }),
12446
- animate('250ms', style({ transform: 'translateX(100%)', opacity: 0 })),
12447
- ]),
12448
- transition('void => mobile', [
12449
- style({ opacity: 0 }),
12450
- animate('200ms ease', style({ opacity: 1 })),
12451
- ]),
12452
- transition('mobile => void', [
12453
- style({ opacity: 1 }),
12454
- animate('200ms ease', style({ opacity: 0 })),
12455
- ]),
12456
- ]),
12457
- trigger('backdropAnimation', [
12458
- transition(':enter', [
12459
- style({ opacity: 0 }),
12460
- animate('100ms', style({ opacity: 1 })),
12461
- ]),
12462
- transition(':leave', [
12463
- style({ opacity: 1 }),
12464
- animate('250ms', style({ opacity: 0 })),
12465
- ]),
12466
- ]),
12467
- ], template: "@if(isDesktop()){\n <div\n [@backdropAnimation]\n class=\"tc-rev-side-drawer-overlay\"\n (click)=\"handleClickOverlay()\">\n </div>\n}\n\n@if (isOpen) {\n <div\n [@drawerAnimation]=\"isDesktop() ? 'desktop' : 'mobile'\"\n class=\"tc-rev-side-drawer-content\"\n [style.width]=\"isMobile() ? '100%' : null\"\n (click)=\"handleClickContent($event)\"\n [style]=\"xAxis()\">\n <div class=\"tc-rev-side-drawer-content__header\">\n <h2 class=\"mar-none f-h2 f-weight-600\">{{title()}}</h2>\n <button\n tcRevIconButton=\"outline\" color=\"dark\"\n [disabled]=\"loading()\"\n (click)=\"handleClickOverlay()\">\n <i class=\"fa-light fa-times\"></i>\n </button>\n </div>\n <ng-content></ng-content>\n </div>\n}", styles: [":host{display:block}.tc-rev-side-drawer-overlay{background-color:#00000080;inset:0;position:fixed;height:100vh;z-index:3000}.tc-rev-side-drawer-content{background-color:var(--c-neutral-50);height:100vh;position:fixed;z-index:3001;top:0}.tc-rev-side-drawer-content__header{align-items:center;color:var(--c-neutral-700);display:flex;font-family:var(--f-family);gap:var(--size-16);justify-content:space-between;padding:var(--size-16);padding-bottom:0}\n"] }]
12325
+ args: [{ selector: 'tc-rev-side-drawer', imports: [TcRevIconButtonDirective], template: "@if(isDesktop() && isOpen){\n <div\n animate.enter=\"drawer-backdrop-enter\"\n animate.leave=\"drawer-backdrop-leave\"\n class=\"tc-rev-side-drawer-overlay\"\n (click)=\"handleClickOverlay()\">\n </div>\n}\n\n@if (isOpen) {\n <div\n [animate.enter]=\"isDesktop() ? 'drawer-enter-desktop' : 'drawer-enter-mobile'\"\n [animate.leave]=\"isDesktop() ? 'drawer-leave-desktop' : 'drawer-leave-mobile'\"\n class=\"tc-rev-side-drawer-content\"\n [style.width]=\"isMobile() ? '100%' : null\"\n (click)=\"handleClickContent($event)\"\n [style]=\"xAxis()\">\n <div class=\"tc-rev-side-drawer-content__header\">\n <h2 class=\"mar-none f-h2 f-weight-600\">{{title()}}</h2>\n <button\n tcRevIconButton=\"outline\" color=\"dark\"\n [disabled]=\"loading()\"\n (click)=\"handleClickOverlay()\">\n <i class=\"fa-light fa-times\"></i>\n </button>\n </div>\n <ng-content></ng-content>\n </div>\n}", styles: [":host{display:block}.tc-rev-side-drawer-overlay{background-color:#00000080;inset:0;position:fixed;height:100vh;z-index:3000}.tc-rev-side-drawer-overlay.drawer-backdrop-enter{animation:tcDrawerBackdropIn .1s ease}.tc-rev-side-drawer-overlay.drawer-backdrop-leave{animation:tcDrawerBackdropOut .25s ease}.tc-rev-side-drawer-content.drawer-enter-desktop{animation:tcDrawerSlideIn .25s ease}.tc-rev-side-drawer-content.drawer-leave-desktop{animation:tcDrawerSlideOut .25s ease}.tc-rev-side-drawer-content.drawer-enter-mobile{animation:tcDrawerFadeIn .2s ease}.tc-rev-side-drawer-content.drawer-leave-mobile{animation:tcDrawerFadeOut .2s ease}@keyframes tcDrawerBackdropIn{0%{opacity:0}to{opacity:1}}@keyframes tcDrawerBackdropOut{0%{opacity:1}to{opacity:0}}@keyframes tcDrawerSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes tcDrawerSlideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes tcDrawerFadeIn{0%{opacity:0}to{opacity:1}}@keyframes tcDrawerFadeOut{0%{opacity:1}to{opacity:0}}.tc-rev-side-drawer-content{background-color:var(--c-neutral-50);height:100vh;position:fixed;z-index:3001;top:0}.tc-rev-side-drawer-content__header{align-items:center;color:var(--c-neutral-700);display:flex;font-family:var(--f-family);gap:var(--size-16);justify-content:space-between;padding:var(--size-16);padding-bottom:0}\n"] }]
12468
12326
  }], ctorParameters: () => [{ type: Document, decorators: [{
12469
12327
  type: Inject,
12470
12328
  args: [DOCUMENT]
@@ -12704,27 +12562,11 @@ class TcRevWizardStepsComponent {
12704
12562
  }
12705
12563
  }
12706
12564
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TcRevWizardStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12707
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TcRevWizardStepsComponent, isStandalone: true, selector: "tc-rev-wizard-steps", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, stepClickable: { classPropertyName: "stepClickable", publicName: "stepClickable", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onStepClick: "onStepClick" }, ngImport: i0, template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tc-rev-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description{color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-400)}\n"], animations: [
12708
- trigger('progressBarEntering', [
12709
- state('in', style({ width: '*' })),
12710
- transition('void => *', [
12711
- style({ width: 0 }),
12712
- animate('1.5s 0s ease')
12713
- ])
12714
- ])
12715
- ] }); }
12565
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TcRevWizardStepsComponent, isStandalone: true, selector: "tc-rev-wizard-steps", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, stepClickable: { classPropertyName: "stepClickable", publicName: "stepClickable", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onStepClick: "onStepClick" }, ngImport: i0, template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tc-rev-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description{color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-400)}\n"] }); }
12716
12566
  }
12717
12567
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TcRevWizardStepsComponent, decorators: [{
12718
12568
  type: Component,
12719
- args: [{ selector: 'tc-rev-wizard-steps', imports: [], animations: [
12720
- trigger('progressBarEntering', [
12721
- state('in', style({ width: '*' })),
12722
- transition('void => *', [
12723
- style({ width: 0 }),
12724
- animate('1.5s 0s ease')
12725
- ])
12726
- ])
12727
- ], template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tc-rev-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description{color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-400)}\n"] }]
12569
+ args: [{ selector: 'tc-rev-wizard-steps', imports: [], template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tc-rev-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description{color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-400)}\n"] }]
12728
12570
  }], propDecorators: { onStepClick: [{ type: i0.Output, args: ["onStepClick"] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }], stepClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepClickable", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }] } });
12729
12571
 
12730
12572
  class TcRevBreadcrumbService {