@dev-tcloud/tcloud-ui 6.6.4 → 6.8.1

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 (28) hide show
  1. package/fesm2022/dev-tcloud-tcloud-ui.mjs +1464 -746
  2. package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
  3. package/lib/_modules/tcloud-ui-breadcrumb/tcloud-ui-breadcrumb.component.d.ts +12 -0
  4. package/lib/_modules/tcloud-ui-breadcrumb/tcloud-ui-breadcrumb.service.d.ts +16 -0
  5. package/lib/_modules/tcloud-ui-card/tcloud-ui-card.component.d.ts +12 -0
  6. package/lib/_modules/tcloud-ui-card-accordion/tcloud-ui-card-accordion.component.d.ts +23 -0
  7. package/lib/_modules/tcloud-ui-card-title/tcloud-ui-card-title.component.d.ts +6 -0
  8. package/lib/_modules/tcloud-ui-checkbox/tcloud-ui-checkbox.directive.d.ts +6 -0
  9. package/lib/_modules/tcloud-ui-dropdown/tcloud-ui-dropdown.component.d.ts +46 -0
  10. package/lib/_modules/tcloud-ui-dropdown-multi/tcloud-ui-dropdown-multi.component.d.ts +44 -0
  11. package/lib/_modules/tcloud-ui-empty-content/tcloud-ui-empty-content.component.d.ts +5 -0
  12. package/lib/_modules/tcloud-ui-faq/tcloud-ui-faq.component.d.ts +12 -0
  13. package/lib/_modules/tcloud-ui-input-container/tcloud-ui-input-container.component.d.ts +10 -0
  14. package/lib/_modules/tcloud-ui-linha-logo/tcloud-ui-linha-logo.component.d.ts +4 -1
  15. package/lib/_modules/tcloud-ui-message/tcloud-ui-message.component.d.ts +7 -0
  16. package/lib/_modules/tcloud-ui-skeleton-loading/tcloud-ui-skeleton-loading.component.d.ts +17 -0
  17. package/lib/_modules/tcloud-ui-sub-navbar/tcloud-ui-sub-navbar.component.d.ts +1 -1
  18. package/lib/_modules/tcloud-ui-tab-group/tcloud-ui-tab-group.component.d.ts +12 -0
  19. package/lib/_modules/tcloud-ui-tab-group/tcloud-ui-tab-item/tcloud-ui-tab-item.component.d.ts +10 -0
  20. package/lib/_modules/tcloud-ui-tag/tag-colors.enum.d.ts +29 -0
  21. package/lib/_modules/tcloud-ui-tag/tcloud-ui-tag.component.d.ts +10 -0
  22. package/lib/_modules/tcloud-ui-toast/tcloud-ui-toast.component.d.ts +8 -0
  23. package/lib/revitalizacao/components/tc-rev-input-container/tc-rev-input-container.component.d.ts +1 -1
  24. package/lib/revitalizacao/components/tc-rev-tooltip/tc-rev-tooltip.directive.d.ts +1 -1
  25. package/lib/tcloud-ui.module.d.ts +70 -53
  26. package/package.json +1 -1
  27. package/public-api.d.ts +19 -2
  28. package/scss/tcloud-ui/components/_tcloud-ui-checkbox.scss +116 -0
@@ -1,8 +1,8 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, InjectionToken, Optional, Inject, input, effect, Directive, Pipe, ViewEncapsulation, signal, inject, HostListener, ChangeDetectorRef, ChangeDetectionStrategy, NgModule, makeEnvironmentProviders, output, ContentChildren, computed, ApplicationRef, model, viewChild } from '@angular/core';
2
+ import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, InjectionToken, Optional, Inject, input, effect, Directive, Pipe, ViewEncapsulation, signal, inject, HostListener, ChangeDetectorRef, ChangeDetectionStrategy, computed, ApplicationRef, output, model, ContentChildren, NgModule, makeEnvironmentProviders, viewChild } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
5
- import { Subject, Subscription, debounceTime, distinctUntilChanged, map, BehaviorSubject } from 'rxjs';
5
+ import { Subject, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, map } from 'rxjs';
6
6
  import { trigger, state, style, transition, animate, AnimationBuilder } from '@angular/animations';
7
7
  import * as i2 from '@angular/forms';
8
8
  import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, NG_VALIDATORS, FormGroup, Validators } from '@angular/forms';
@@ -72,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
72
72
  state('open', style({ height: '*' })),
73
73
  transition('close <=> open', animate('0.35s ease-in-out')),
74
74
  ]),
75
- ], standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-accordion-body tc-accordion-content\" [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"] }]
75
+ ], imports: [CommonModule], template: "<div class=\"tcloud-ui-accordion-body tc-accordion-content\" [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"] }]
76
76
  }], ctorParameters: () => [{ type: TCloudUiAccordionService }] });
77
77
 
78
78
  class TCloudUiAccordionTitleComponent {
@@ -122,7 +122,7 @@ class TCloudUiAccordionTitleComponent {
122
122
  }
123
123
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiAccordionTitleComponent, decorators: [{
124
124
  type: Component,
125
- args: [{ selector: 'tcloud-ui-accordion-title', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-accordion-title tc-accordion-title\">\n <table class=\"tc-accordion-table\">\n <tr>\n <td class=\"area-title\" (click)=\"toggle_title()\" >\n <ng-content></ng-content>\n </td>\n <td class=\"tc-accordion-actions\">\n <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n </button>\n </td>\n </tr>\n </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--tc-primary)}.area-title{width:100;cursor:pointer;color:var(--tc-primary)}\n"] }]
125
+ args: [{ selector: 'tcloud-ui-accordion-title', imports: [CommonModule], template: "<div class=\"tcloud-ui-accordion-title tc-accordion-title\">\n <table class=\"tc-accordion-table\">\n <tr>\n <td class=\"area-title\" (click)=\"toggle_title()\" >\n <ng-content></ng-content>\n </td>\n <td class=\"tc-accordion-actions\">\n <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n </button>\n </td>\n </tr>\n </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--tc-primary)}.area-title{width:100;cursor:pointer;color:var(--tc-primary)}\n"] }]
126
126
  }], ctorParameters: () => [{ type: TCloudUiAccordionService }] });
127
127
 
128
128
  class TCloudUiAccordionComponent {
@@ -179,13 +179,13 @@ class TCloudUiAccordionComponent {
179
179
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiAccordionComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
180
180
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiAccordionComponent, isStandalone: true, selector: "tcloud-ui-accordion", inputs: { disabled: "disabled", show: "show", loading: "loading" }, outputs: { onAction: "onAction" }, providers: [
181
181
  TCloudUiAccordionService
182
- ], ngImport: i0, template: "<div class=\"tcloud-ui-accordion tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
182
+ ], ngImport: i0, template: "<div class=\"tcloud-ui-accordion tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n <ng-content></ng-content>\n</div>", styles: [".tc-accordion{background-color:#fff;border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
183
183
  }
184
184
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiAccordionComponent, decorators: [{
185
185
  type: Component,
186
186
  args: [{ selector: 'tcloud-ui-accordion', providers: [
187
187
  TCloudUiAccordionService
188
- ], standalone: true, imports: [CommonModule, TCloudUiAccordionBodyComponent, TCloudUiAccordionTitleComponent], template: "<div class=\"tcloud-ui-accordion tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"] }]
188
+ ], imports: [CommonModule, TCloudUiAccordionBodyComponent, TCloudUiAccordionTitleComponent], template: "<div class=\"tcloud-ui-accordion tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n <ng-content></ng-content>\n</div>", styles: [".tc-accordion{background-color:#fff;border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"] }]
189
189
  }], ctorParameters: () => [{ type: TCloudUiAccordionService }], propDecorators: { disabled: [{
190
190
  type: Input
191
191
  }], show: [{
@@ -368,7 +368,7 @@ class TCloudUiDataListOptionComponent {
368
368
  }
369
369
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDataListOptionComponent, decorators: [{
370
370
  type: Component,
371
- args: [{ selector: 'tcloud-ui-data-list-option', standalone: true, imports: [CommonModule], template: "<button \n [disabled]=\"disabled\"\n [title]=\"select_options.description\"\n id=\"{{id}}\"\n [attr.data-description]=\"select_options.description\"\n [attr.data-actived-value]=\"actived_value\"\n class=\"tcloud-ui-data-list-option dropdown-item\" \n [class.null-value]=\"value === undefined || value === null || value === ''\"\n [class.active]=\"value === actived_value\" \n [class.option-disabled]=\"disabled\"\n type=\"button\" \n [value]=\"value\"\n (click)=\"setSelectedItem(value)\" >\n <ng-content></ng-content>\n</button>\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}.option-disabled{background-color:#fff!important;color:#b5b5b5!important;cursor:not-allowed!important}\n"] }]
371
+ args: [{ selector: 'tcloud-ui-data-list-option', imports: [CommonModule], template: "<button \n [disabled]=\"disabled\"\n [title]=\"select_options.description\"\n id=\"{{id}}\"\n [attr.data-description]=\"select_options.description\"\n [attr.data-actived-value]=\"actived_value\"\n class=\"tcloud-ui-data-list-option dropdown-item\" \n [class.null-value]=\"value === undefined || value === null || value === ''\"\n [class.active]=\"value === actived_value\" \n [class.option-disabled]=\"disabled\"\n type=\"button\" \n [value]=\"value\"\n (click)=\"setSelectedItem(value)\" >\n <ng-content></ng-content>\n</button>\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}.option-disabled{background-color:#fff!important;color:#b5b5b5!important;cursor:not-allowed!important}\n"] }]
372
372
  }], ctorParameters: () => [{ type: DataListService }], propDecorators: { disabled: [{
373
373
  type: Input
374
374
  }], value: [{
@@ -739,7 +739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
739
739
  args: [{ selector: 'tcloud-ui-data-list', providers: [
740
740
  DataListService,
741
741
  CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7
742
- ], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListOptionComponent, TCloudUiFormDirective], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list tc-dropdown\" [class.disabled]=\"disabled || loading\">\n <div *ngIf=\"loading\" class=\"loading-area\">\n <i class=\"fas fa-spinner fa-spin\"></i>\n </div>\n <!-- [attr.data-bs-toggle]=\"'dropdown'\" -->\n <button \n tcloudForm\n #_option\n [class.input-hidden]=\"!showInput\"\n [class.in-border]=\"border\"\n [class.loading-box]=\"loading\"\n [disabled]=\"disabled || loading\"\n class=\"dropdown-toggle button-select no-margin-bottom area-text\" \n type=\"button\" \n id=\"{{ id }}\" \n \n [attr.aria-haspopup]=\"'true'\" \n [attr.aria-expanded]=\"'false'\" \n (click)=\"toOpen();toInput(_option)\" >\n\n <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\n {{ selected_description }}\n <span><i class=\"fas fa-angle-down\"></i></span>\n </button>\n <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\n\n <div class=\"line-search\" *ngIf=\"search\">\n <table class=\"box-search\">\n <tr>\n\n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n\n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n \n <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\n <ng-content></ng-content> \n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <ng-container *ngFor=\"let item of listItems\">\n <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\n </ng-container>\n </ng-container> \n </div>\n </div>\n</div>\n\n<div *ngIf=\"formulario\">\n <form [formGroup]=\"formulario\" style=\"display: none;\" >\n <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\n </form>\n</div>\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"] }]
742
+ ], imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListOptionComponent, TCloudUiFormDirective], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list tc-dropdown\" [class.disabled]=\"disabled || loading\">\n <div *ngIf=\"loading\" class=\"loading-area\">\n <i class=\"fas fa-spinner fa-spin\"></i>\n </div>\n <!-- [attr.data-bs-toggle]=\"'dropdown'\" -->\n <button \n tcloudForm\n #_option\n [class.input-hidden]=\"!showInput\"\n [class.in-border]=\"border\"\n [class.loading-box]=\"loading\"\n [disabled]=\"disabled || loading\"\n class=\"dropdown-toggle button-select no-margin-bottom area-text\" \n type=\"button\" \n id=\"{{ id }}\" \n \n [attr.aria-haspopup]=\"'true'\" \n [attr.aria-expanded]=\"'false'\" \n (click)=\"toOpen();toInput(_option)\" >\n\n <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\n {{ selected_description }}\n <span><i class=\"fas fa-angle-down\"></i></span>\n </button>\n <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\n\n <div class=\"line-search\" *ngIf=\"search\">\n <table class=\"box-search\">\n <tr>\n\n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n\n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n \n <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\n <ng-content></ng-content> \n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <ng-container *ngFor=\"let item of listItems\">\n <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\n </ng-container>\n </ng-container> \n </div>\n </div>\n</div>\n\n<div *ngIf=\"formulario\">\n <form [formGroup]=\"formulario\" style=\"display: none;\" >\n <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\n </form>\n</div>\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"] }]
743
743
  }], ctorParameters: () => [{ type: DataListService }, { type: i2.FormBuilder }], propDecorators: { placeholder: [{
744
744
  type: Input
745
745
  }], disabled: [{
@@ -2894,6 +2894,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
2894
2894
  type: Output
2895
2895
  }] } });
2896
2896
 
2897
+ class TCloudUiInputContainerComponent {
2898
+ constructor() {
2899
+ this.fullWidth = input(false);
2900
+ this.inputId = input('');
2901
+ this.label = input('');
2902
+ this.labelPosition = input('top');
2903
+ this.required = input(false);
2904
+ }
2905
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiInputContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2906
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiInputContainerComponent, isStandalone: true, selector: "tcloud-ui-input-container", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"{{ 'tcloud-ui-input-container ' + 'label-' + this.labelPosition() }}\"\n [class.full-width]=\"this.fullWidth()\">\n @if (this.label()) {\n @if (this.inputId()) {\n <label\n class=\"tcloud-ui-input-label cursor-pointer\" [for]=\"this.inputId()\">\n {{this.label()}}\n @if (this.required()) {\n <ng-container *ngTemplateOutlet=\"required\" />\n }\n </label>\n }\n @else {\n <label\n class=\"tcloud-ui-input-label\">\n {{this.label()}}\n @if (this.required()) {\n <ng-container *ngTemplateOutlet=\"required\" />\n }\n </label>\n }\n }\n <ng-content />\n</div>\n\n\n<ng-template #required>\n <span class=\"c-danger-500\">*</span>\n</ng-template>\n", styles: [":host{display:block}.tcloud-ui-input-container{display:inline-flex;gap:var(--size-4)}.tcloud-ui-input-container.full-width{width:100%}.tcloud-ui-input-container .tcloud-ui-input-label{font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);color:var(--c-neutral-700);line-height:var(--l-height-20);margin:0}.tcloud-ui-input-container.label-top{flex-direction:column}.tcloud-ui-input-container.label-right{align-items:center;flex-direction:row-reverse}.tcloud-ui-input-container.label-bottom{flex-direction:column-reverse}.tcloud-ui-input-container.label-left{align-items:center;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
2907
+ }
2908
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiInputContainerComponent, decorators: [{
2909
+ type: Component,
2910
+ args: [{ selector: 'tcloud-ui-input-container', imports: [CommonModule], template: "<div\n class=\"{{ 'tcloud-ui-input-container ' + 'label-' + this.labelPosition() }}\"\n [class.full-width]=\"this.fullWidth()\">\n @if (this.label()) {\n @if (this.inputId()) {\n <label\n class=\"tcloud-ui-input-label cursor-pointer\" [for]=\"this.inputId()\">\n {{this.label()}}\n @if (this.required()) {\n <ng-container *ngTemplateOutlet=\"required\" />\n }\n </label>\n }\n @else {\n <label\n class=\"tcloud-ui-input-label\">\n {{this.label()}}\n @if (this.required()) {\n <ng-container *ngTemplateOutlet=\"required\" />\n }\n </label>\n }\n }\n <ng-content />\n</div>\n\n\n<ng-template #required>\n <span class=\"c-danger-500\">*</span>\n</ng-template>\n", styles: [":host{display:block}.tcloud-ui-input-container{display:inline-flex;gap:var(--size-4)}.tcloud-ui-input-container.full-width{width:100%}.tcloud-ui-input-container .tcloud-ui-input-label{font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);color:var(--c-neutral-700);line-height:var(--l-height-20);margin:0}.tcloud-ui-input-container.label-top{flex-direction:column}.tcloud-ui-input-container.label-right{align-items:center;flex-direction:row-reverse}.tcloud-ui-input-container.label-bottom{flex-direction:column-reverse}.tcloud-ui-input-container.label-left{align-items:center;flex-direction:row}\n"] }]
2911
+ }] });
2912
+
2897
2913
  class Step {
2898
2914
  constructor() {
2899
2915
  this.status = '';
@@ -2985,15 +3001,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
2985
3001
  }] } });
2986
3002
 
2987
3003
  class TCloudUiLinhaLogoComponent {
3004
+ set product(value) {
3005
+ if ((`${value}`).toLowerCase() !== this._product) {
3006
+ this._product = value;
3007
+ this.toInit();
3008
+ }
3009
+ }
3010
+ get product() {
3011
+ return this._product;
3012
+ }
2988
3013
  constructor() {
2989
3014
  this.url = `h` + `t` + `t` + `p` + `s` + `:` + `/` + `/` + `ateleia` + `-` + `email` + `.s3` + `-` + `sa` + `-` + `east` + `-` + `1` + `.` + `amazonaws` + `.` + `com` + `/`;
2990
- this.product = '';
3015
+ this._product = '';
2991
3016
  this.logo_name = '';
2992
3017
  this.product_name = '';
2993
3018
  this.alt_product_name = '';
2994
3019
  this.font_size = '';
2995
3020
  }
2996
3021
  ngOnInit() {
3022
+ }
3023
+ toInit() {
2997
3024
  this.logo_name = this.getLogoName();
2998
3025
  this.product_name = this.getProductName();
2999
3026
  this.alt_product_name = (this.product_name).toUpperCase();
@@ -4496,6 +4523,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
4496
4523
  type: Output
4497
4524
  }] } });
4498
4525
 
4526
+ class TCloudUiToastComponent {
4527
+ constructor() {
4528
+ this.type = input('info');
4529
+ this.fullWidth = input(false);
4530
+ this.size = input('md');
4531
+ }
4532
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4533
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TCloudUiToastComponent, isStandalone: true, selector: "tcloud-ui-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tcloud-ui-toast c-neutral-700\">\n <div\n class=\"tcloud-ui-toast__icon\"\n [ngClass]=\"[\n 'tcloud-ui-toast__icon--' + type(),\n 'tcloud-ui-toast__icon--' + size()\n ]\"\n >\n <ng-content select=\"[icon]\" />\n </div>\n\n <div\n class=\"tcloud-ui-toast__content\"\n [ngClass]=\"[\n 'tcloud-ui-toast__content--' + type(),\n 'tcloud-ui-toast__content--' + size()\n ]\"\n [class.full-width]=\"fullWidth()\"\n >\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block}.tcloud-ui-toast{display:flex}.tcloud-ui-toast__icon{align-items:center;border-radius:var(--bor-radius-8) 0 0 var(--bor-radius-8);display:flex;justify-content:center}.tcloud-ui-toast__icon--info{background-color:var(--c-primary-500)}.tcloud-ui-toast__icon--success{background-color:var(--c-success-500)}.tcloud-ui-toast__icon--alert{background-color:var(--c-alert-500)}.tcloud-ui-toast__icon--danger{background-color:var(--c-danger-500)}.tcloud-ui-toast__icon--sm{font-size:var(--f-size-20);padding:var(--size-14)}.tcloud-ui-toast__icon--md{font-size:var(--f-size-24);padding:var(--size-16)}.tcloud-ui-toast__icon--lg{font-size:var(--f-size-24);padding:var(--size-18)}.tcloud-ui-toast__content{align-items:center;border-radius:0 var(--bor-radius-8) var(--bor-radius-8) 0;display:flex;font-family:var(--f-family)}.tcloud-ui-toast__content--info{background-color:var(--c-primary-300)}.tcloud-ui-toast__content--success{background-color:var(--c-success-300)}.tcloud-ui-toast__content--alert{background-color:var(--c-alert-300)}.tcloud-ui-toast__content--danger{background-color:var(--c-danger-300)}.tcloud-ui-toast__content--sm{padding:var(--size-12);font-size:var(--f-size-12);line-height:var(--l-height-16)}.tcloud-ui-toast__content--md{padding:var(--size-16);font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-toast__content--lg{padding:var(--size-18);font-size:var(--f-size-16);line-height:var(--l-height-24)}.tcloud-ui-toast__content.full-width{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
4534
+ }
4535
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiToastComponent, decorators: [{
4536
+ type: Component,
4537
+ args: [{ selector: 'tcloud-ui-toast', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-toast c-neutral-700\">\n <div\n class=\"tcloud-ui-toast__icon\"\n [ngClass]=\"[\n 'tcloud-ui-toast__icon--' + type(),\n 'tcloud-ui-toast__icon--' + size()\n ]\"\n >\n <ng-content select=\"[icon]\" />\n </div>\n\n <div\n class=\"tcloud-ui-toast__content\"\n [ngClass]=\"[\n 'tcloud-ui-toast__content--' + type(),\n 'tcloud-ui-toast__content--' + size()\n ]\"\n [class.full-width]=\"fullWidth()\"\n >\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block}.tcloud-ui-toast{display:flex}.tcloud-ui-toast__icon{align-items:center;border-radius:var(--bor-radius-8) 0 0 var(--bor-radius-8);display:flex;justify-content:center}.tcloud-ui-toast__icon--info{background-color:var(--c-primary-500)}.tcloud-ui-toast__icon--success{background-color:var(--c-success-500)}.tcloud-ui-toast__icon--alert{background-color:var(--c-alert-500)}.tcloud-ui-toast__icon--danger{background-color:var(--c-danger-500)}.tcloud-ui-toast__icon--sm{font-size:var(--f-size-20);padding:var(--size-14)}.tcloud-ui-toast__icon--md{font-size:var(--f-size-24);padding:var(--size-16)}.tcloud-ui-toast__icon--lg{font-size:var(--f-size-24);padding:var(--size-18)}.tcloud-ui-toast__content{align-items:center;border-radius:0 var(--bor-radius-8) var(--bor-radius-8) 0;display:flex;font-family:var(--f-family)}.tcloud-ui-toast__content--info{background-color:var(--c-primary-300)}.tcloud-ui-toast__content--success{background-color:var(--c-success-300)}.tcloud-ui-toast__content--alert{background-color:var(--c-alert-300)}.tcloud-ui-toast__content--danger{background-color:var(--c-danger-300)}.tcloud-ui-toast__content--sm{padding:var(--size-12);font-size:var(--f-size-12);line-height:var(--l-height-16)}.tcloud-ui-toast__content--md{padding:var(--size-16);font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-toast__content--lg{padding:var(--size-18);font-size:var(--f-size-16);line-height:var(--l-height-24)}.tcloud-ui-toast__content.full-width{flex-grow:1}\n"] }]
4538
+ }] });
4539
+
4499
4540
  class TCloudUiLineStepTitleComponent {
4500
4541
  constructor() {
4501
4542
  this.showStepCounter = true;
@@ -5203,11 +5244,11 @@ class TCloudUiReorderItemsComponent {
5203
5244
  return items;
5204
5245
  }
5205
5246
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiReorderItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5206
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiReorderItemsComponent, isStandalone: true, selector: "tcloud-ui-reorder-items", inputs: { items: "items" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n <table class=\"table-sort-items\">\n\n \n\n\n <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n <tr>\n\n <td class=\"area-name-description-item\">\n {{ item }}\n <div *ngIf=\"get_description(item)\" class=\"item-description\">\n {{ get_description(item) }}\n </div>\n </td>\n\n <td class=\"area-action-item\">\n \n <ng-container>\n <div class=\"order-control\">\n <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n <i class=\"fas fa-caret-up p-up\" ></i>\n </button>\n </div>\n \n <div class=\"order-control\">\n <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n <i class=\"fas fa-caret-down p-down\"></i>\n </button>\n \n </div>\n </ng-container>\n </td>\n\n </tr>\n </ng-container> \n\n </table>\n \n </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{border-radius:13px 0 0 13px;border:1px solid #ccc;padding:3px 13px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 13px 13px 0;border:1px solid #ccc;padding:3px;width:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
5247
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiReorderItemsComponent, isStandalone: true, selector: "tcloud-ui-reorder-items", inputs: { items: "items" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n <table class=\"table-sort-items\">\n\n \n\n\n <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n <tr>\n\n <td class=\"area-name-description-item\">\n {{ item }}\n <div *ngIf=\"get_description(item)\" class=\"item-description\">\n {{ get_description(item) }}\n </div>\n </td>\n\n <td class=\"area-action-item\">\n \n <ng-container>\n <div class=\"order-control\">\n <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n <i class=\"fas fa-caret-up p-up\" ></i>\n </button>\n </div>\n \n <div class=\"order-control\">\n <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n <i class=\"fas fa-caret-down p-down\"></i>\n </button>\n \n </div>\n </ng-container>\n </td>\n\n </tr>\n </ng-container> \n\n </table>\n \n </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{background-color:#fff;border-radius:13px 0 0 13px;border:1px solid #ccc;padding:3px 13px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 13px 13px 0;border:1px solid #ccc;padding:3px;width:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
5207
5248
  }
5208
5249
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiReorderItemsComponent, decorators: [{
5209
5250
  type: Component,
5210
- args: [{ selector: 'tcloud-ui-reorder-items', standalone: true, imports: [CommonModule], template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n <table class=\"table-sort-items\">\n\n \n\n\n <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n <tr>\n\n <td class=\"area-name-description-item\">\n {{ item }}\n <div *ngIf=\"get_description(item)\" class=\"item-description\">\n {{ get_description(item) }}\n </div>\n </td>\n\n <td class=\"area-action-item\">\n \n <ng-container>\n <div class=\"order-control\">\n <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n <i class=\"fas fa-caret-up p-up\" ></i>\n </button>\n </div>\n \n <div class=\"order-control\">\n <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n <i class=\"fas fa-caret-down p-down\"></i>\n </button>\n \n </div>\n </ng-container>\n </td>\n\n </tr>\n </ng-container> \n\n </table>\n \n </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{border-radius:13px 0 0 13px;border:1px solid #ccc;padding:3px 13px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 13px 13px 0;border:1px solid #ccc;padding:3px;width:40px}\n"] }]
5251
+ args: [{ selector: 'tcloud-ui-reorder-items', standalone: true, imports: [CommonModule], template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n <table class=\"table-sort-items\">\n\n \n\n\n <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n <tr>\n\n <td class=\"area-name-description-item\">\n {{ item }}\n <div *ngIf=\"get_description(item)\" class=\"item-description\">\n {{ get_description(item) }}\n </div>\n </td>\n\n <td class=\"area-action-item\">\n \n <ng-container>\n <div class=\"order-control\">\n <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n <i class=\"fas fa-caret-up p-up\" ></i>\n </button>\n </div>\n \n <div class=\"order-control\">\n <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n <i class=\"fas fa-caret-down p-down\"></i>\n </button>\n \n </div>\n </ng-container>\n </td>\n\n </tr>\n </ng-container> \n\n </table>\n \n </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{background-color:#fff;border-radius:13px 0 0 13px;border:1px solid #ccc;padding:3px 13px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 13px 13px 0;border:1px solid #ccc;padding:3px;width:40px}\n"] }]
5211
5252
  }], propDecorators: { items: [{
5212
5253
  type: Input
5213
5254
  }], itemsChange: [{
@@ -5362,6 +5403,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
5362
5403
  type: Input
5363
5404
  }] } });
5364
5405
 
5406
+ class TCloudUiCheckboxDirective {
5407
+ constructor() { }
5408
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
5409
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiCheckboxDirective, isStandalone: true, selector: "input[type=\"checkbox\"][tcloudUiCheckbox]", host: { classAttribute: "tcloud-ui-checkbox" }, ngImport: i0 }); }
5410
+ }
5411
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCheckboxDirective, decorators: [{
5412
+ type: Directive,
5413
+ args: [{
5414
+ selector: 'input[type="checkbox"][tcloudUiCheckbox]',
5415
+ host: {
5416
+ class: 'tcloud-ui-checkbox'
5417
+ }
5418
+ }]
5419
+ }], ctorParameters: () => [] });
5420
+
5365
5421
  class TCloudUiCurrencyDirective {
5366
5422
  constructor(el, renderer) {
5367
5423
  this.el = el;
@@ -6530,113 +6586,1062 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
6530
6586
  type: Output
6531
6587
  }] } });
6532
6588
 
6533
- const COMPONENTS = [
6534
- TCloudUiAccordionComponent,
6535
- TCloudUiAccordionBodyComponent,
6536
- TCloudUiAccordionTitleComponent,
6537
- TCloudUiChoiceIssuesComponent,
6538
- TCloudUiDataListComponent,
6539
- TCloudUiDataListOptionComponent,
6540
- TCloudUiDatepickerTimeComponent,
6541
- TCloudUiDatepickerComponent,
6542
- TCloudUiFiltersComponent,
6543
- TCloudUiRangeDateComponent,
6544
- TCloudUiInputSearchComponent,
6545
- TCloudUiLineStepCircleComponent,
6546
- TCloudUiLinhaLogoComponent,
6547
- TCloudUiModalComponent,
6548
- TCloudUiModalBodyComponent,
6549
- TCloudUiModalHeaderComponent,
6550
- TCloudUiModalFooterComponent,
6551
- TCloudUiMultiInputComponent,
6552
- TCloudUiMultiSelectComponent,
6553
- TCloudUiNotFoundComponent,
6554
- TCloudUiNumberStepComponent,
6555
- TCloudUiScrollBoxComponent,
6556
- TCloudUiTabMenuComponent,
6557
- TCloudUiTabHeadComponent,
6558
- TCloudUiTabContentComponent,
6559
- TCloudUiTabTitleComponent,
6560
- TCloudUiTabSubtitleComponent,
6561
- TCloudUiTableComponent,
6562
- TCloudUiInputPasswordComponent,
6563
- TCloudUiLabelTokenComponent,
6564
- TCloudUiLineStepTitleComponent,
6565
- TCloudUiLoadingComponent,
6566
- TCloudUiCubesComponent,
6567
- TCloudUiMultiplesValuesComponent,
6568
- TCloudUiProgressBarComponent,
6569
- TCloudUiReorderItemsComponent,
6570
- TCloudUiWelcomeComponent,
6571
- TCloudUiContainerComponent,
6572
- TCloudUiContainerColComponent,
6573
- TCloudUiContainerContentComponent,
6574
- TCloudUiPaginationComponent
6575
- ];
6576
- const DIRECTIVES = [
6577
- TCloudUiAlignDirective,
6578
- TCloudUiCurrencyDirective,
6579
- TCloudUiElCopyDirective,
6580
- TCloudUiHoverParentDirective,
6581
- TCloudUiCheckAccessDirective,
6582
- TCloudUiNgCheckAccessDirective,
6583
- TCloudUiNgFeatureFlagsDirective,
6584
- TCloudUiTooltipDirective,
6585
- TCloudUiDigitOnlyDirective,
6586
- TCloudUiHighLightDirective,
6587
- TCloudUiIpMaskDirective,
6588
- TCloudUiButtonDirective,
6589
- TCloudUiFormDirective
6590
- ];
6591
- const PIPES = [
6592
- ToTextPipe,
6593
- BytesPipe,
6594
- CNPJPipe,
6595
- CPFPipe,
6596
- DateBRPipe,
6597
- MonthNamePipe,
6598
- RespectivePipe,
6599
- StatusInfoPipe,
6600
- TCloudUiPaginationPipe
6601
- ];
6602
- class TCloudUiModule {
6603
- static forRoot(config) {
6604
- const providers = [
6605
- // Configuração principal
6606
- { provide: TCLOUD_UI_CONFIG, useValue: config?.data ?? {} },
6607
- DatePipe,
6608
- StatusInfoPipe
6609
- ];
6610
- // Adiciona serviços customizados se fornecidos
6611
- if (config?.services?.userService) {
6612
- providers.push({ provide: TCLOUD_UI_USER_SERVICE, useClass: config.services.userService });
6613
- }
6614
- if (config?.services?.layoutService) {
6615
- providers.push({ provide: TCLOUD_UI_LAYOUT_SERVICE, useClass: config.services.layoutService });
6589
+ class TCloudUiDeviceUtilsService {
6590
+ constructor(rendererFactory) {
6591
+ /*** Viewport mobile ***/
6592
+ this.DESKTOP_MIN = 480;
6593
+ this.widthScreen = signal(window.innerWidth);
6594
+ // largura atual da viewport
6595
+ this.width = computed(() => this.widthScreen());
6596
+ this.isDesktop = computed(() => this.width() > this.DESKTOP_MIN);
6597
+ this.isMobile = computed(() => this.width() <= this.DESKTOP_MIN);
6598
+ this.menuHost = null;
6599
+ this.embeddedView = null;
6600
+ this.appRef = inject(ApplicationRef);
6601
+ this.animationBuilder = inject(AnimationBuilder);
6602
+ this.player = null;
6603
+ this.renderer = rendererFactory.createRenderer(null, null);
6604
+ window.addEventListener('resize', () => {
6605
+ this.widthScreen.set(window.innerWidth);
6606
+ });
6607
+ }
6608
+ openDropdownDevice(menuTemplate) {
6609
+ this.menuHost = this.renderer.createElement('div');
6610
+ this.renderer.setStyle(this.menuHost, 'position', 'fixed');
6611
+ this.renderer.setStyle(this.menuHost, 'top', '0');
6612
+ this.renderer.setStyle(this.menuHost, 'left', '0');
6613
+ this.renderer.setStyle(this.menuHost, 'width', '100vw');
6614
+ this.renderer.setStyle(this.menuHost, 'height', '100vh');
6615
+ this.renderer.setStyle(this.menuHost, 'z-index', '9999');
6616
+ this.renderer.setStyle(this.menuHost, 'opacity', '0');
6617
+ this.renderer.appendChild(document.body, this.menuHost);
6618
+ // Impede scroll da página externa enquanto o dropdown está aberto
6619
+ this.renderer.setStyle(document.body, 'overflow', 'hidden');
6620
+ this.renderer.setStyle(document.body, 'touch-action', 'none');
6621
+ this.embeddedView = menuTemplate.createEmbeddedView({});
6622
+ this.appRef.attachView(this.embeddedView);
6623
+ this.embeddedView.rootNodes.forEach((node) => {
6624
+ this.renderer.appendChild(this.menuHost, node);
6625
+ });
6626
+ const fadeIn = this.animationBuilder.build([
6627
+ style({ opacity: 0 }),
6628
+ animate('200ms ease', style({ opacity: 1 })),
6629
+ ]);
6630
+ this.player = fadeIn.create(this.menuHost);
6631
+ this.player.play();
6632
+ }
6633
+ closeDropdownDevice() {
6634
+ if (!this.menuHost)
6635
+ return;
6636
+ const fadeOut = this.animationBuilder.build([
6637
+ style({ opacity: 1 }),
6638
+ animate('200ms ease', style({ opacity: 0 })),
6639
+ ]);
6640
+ this.player = fadeOut.create(this.menuHost);
6641
+ this.player.play();
6642
+ this.player.onDone(() => {
6643
+ this.renderer.removeStyle(document.body, 'overflow');
6644
+ this.renderer.removeStyle(document.body, 'touch-action');
6645
+ if (this.embeddedView) {
6646
+ this.appRef.detachView(this.embeddedView);
6647
+ this.embeddedView.destroy();
6648
+ this.embeddedView = null;
6649
+ }
6650
+ this.renderer.removeChild(document.body, this.menuHost);
6651
+ this.menuHost = null;
6652
+ this.player = null;
6653
+ });
6654
+ }
6655
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
6656
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, providedIn: 'root' }); }
6657
+ }
6658
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, decorators: [{
6659
+ type: Injectable,
6660
+ args: [{
6661
+ providedIn: 'root',
6662
+ }]
6663
+ }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
6664
+
6665
+ class TCloudUiCardComponent {
6666
+ constructor() {
6667
+ this._viewPort = inject(TCloudUiDeviceUtilsService);
6668
+ this.isDesktop = this._viewPort.isDesktop;
6669
+ }
6670
+ /**
6671
+ * APPLY FUNCTIONS RESPONSIVE < 480PX
6672
+ */
6673
+ get extraClasses() {
6674
+ if (this.isDesktop()) {
6675
+ return ['shadow-md', 'pad-16'];
6616
6676
  }
6617
- if (config?.services?.viewportService) {
6618
- providers.push({ provide: TCLOUD_UI_VIEWPORT_SERVICE, useClass: config.services.viewportService });
6677
+ //Responsive Classes
6678
+ return ['shadow-sm', 'pad-14'];
6679
+ }
6680
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6681
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiCardComponent, isStandalone: true, selector: "tcloud-ui-card", ngImport: i0, template: "<div class=\"tcloud-ui-card bg-c-neutral-50 bor-rad-16\"\n[ngClass]=\"extraClasses\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
6682
+ }
6683
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardComponent, decorators: [{
6684
+ type: Component,
6685
+ args: [{ selector: 'tcloud-ui-card', imports: [CommonModule], template: "<div class=\"tcloud-ui-card bg-c-neutral-50 bor-rad-16\"\n[ngClass]=\"extraClasses\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"] }]
6686
+ }] });
6687
+
6688
+ class TCloudUiCardTitleComponent {
6689
+ constructor() {
6690
+ this.title = input.required();
6691
+ }
6692
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6693
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TCloudUiCardTitleComponent, isStandalone: true, selector: "tcloud-ui-card-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"tcloud-ui-card-title c-neutral-700\">\n <span class=\"tcloud-ui-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n\n <h2 class=\"tcloud-ui-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tcloud-ui-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tcloud-ui-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tcloud-ui-card-title__text{cursor:default}@media(max-width:480px){.tcloud-ui-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tcloud-ui-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tcloud-ui-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-clamp:2;-webkit-line-clamp:2}}\n"] }); }
6694
+ }
6695
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardTitleComponent, decorators: [{
6696
+ type: Component,
6697
+ args: [{ selector: 'tcloud-ui-card-title', imports: [], template: "<div class=\"tcloud-ui-card-title c-neutral-700\">\n <span class=\"tcloud-ui-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n\n <h2 class=\"tcloud-ui-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tcloud-ui-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tcloud-ui-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tcloud-ui-card-title__text{cursor:default}@media(max-width:480px){.tcloud-ui-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tcloud-ui-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tcloud-ui-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-clamp:2;-webkit-line-clamp:2}}\n"] }]
6698
+ }] });
6699
+
6700
+ class TcRevButtonDirective {
6701
+ constructor(_el) {
6702
+ this._el = _el;
6703
+ this.color = input('primary');
6704
+ this.size = input('sm');
6705
+ this.fullWidth = input(false);
6706
+ this.tcRevButton = input('filled');
6707
+ effect(() => {
6708
+ this.setClasses();
6709
+ });
6710
+ }
6711
+ setClasses() {
6712
+ const tokenList = this._el.nativeElement.classList;
6713
+ tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
6714
+ let tcRevButton = this.tcRevButton();
6715
+ if (!tcRevButton) {
6716
+ tcRevButton = 'filled';
6619
6717
  }
6620
- return {
6621
- ngModule: TCloudUiModule,
6622
- providers
6623
- };
6718
+ this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-btn--full-width') : null;
6719
+ this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
6720
+ this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevButton}`);
6624
6721
  }
6625
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
6626
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, imports: [TCloudUiAccordionComponent,
6627
- TCloudUiAccordionBodyComponent,
6628
- TCloudUiAccordionTitleComponent,
6629
- TCloudUiChoiceIssuesComponent,
6630
- TCloudUiDataListComponent,
6631
- TCloudUiDataListOptionComponent,
6632
- TCloudUiDatepickerTimeComponent,
6633
- TCloudUiDatepickerComponent,
6634
- TCloudUiFiltersComponent,
6635
- TCloudUiRangeDateComponent,
6636
- TCloudUiInputSearchComponent,
6637
- TCloudUiLineStepCircleComponent,
6638
- TCloudUiLinhaLogoComponent,
6639
- TCloudUiModalComponent,
6722
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
6723
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevButtonDirective, isStandalone: true, selector: "button[tcRevButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, tcRevButton: { classPropertyName: "tcRevButton", publicName: "tcRevButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn" }, ngImport: i0 }); }
6724
+ }
6725
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevButtonDirective, decorators: [{
6726
+ type: Directive,
6727
+ args: [{
6728
+ selector: 'button[tcRevButton]',
6729
+ host: {
6730
+ class: 'tc-rev-btn'
6731
+ }
6732
+ }]
6733
+ }], ctorParameters: () => [{ type: i0.ElementRef }] });
6734
+
6735
+ class TcRevCardTitleComponent {
6736
+ constructor() {
6737
+ this.title = input.required();
6738
+ }
6739
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6740
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TcRevCardTitleComponent, isStandalone: true, selector: "tc-rev-card-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-card-title c-neutral-700\">\n <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n\n <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tc-rev-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}}\n"] }); }
6741
+ }
6742
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevCardTitleComponent, decorators: [{
6743
+ type: Component,
6744
+ args: [{ selector: 'tc-rev-card-title', imports: [], template: "<div class=\"tc-rev-card-title c-neutral-700\">\n <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n\n <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tc-rev-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}}\n"] }]
6745
+ }] });
6746
+
6747
+ class TCloudUiCardAccordionComponent {
6748
+ constructor() {
6749
+ this._viewPort = inject(TCloudUiDeviceUtilsService);
6750
+ this.toggle = output();
6751
+ this.title = input('');
6752
+ this.iconClass = input('fa-light fa-hard-drive');
6753
+ this.showMoreText = input('Exibir mais');
6754
+ this.showLessText = input('Exibir menos');
6755
+ this.badge = input(null);
6756
+ this.isOpen = model(false);
6757
+ this.isDesktop = this._viewPort.isDesktop;
6758
+ }
6759
+ toggleAccordion() {
6760
+ this.isOpen.update((current) => !current);
6761
+ this.toggle.emit(this.isOpen());
6762
+ }
6763
+ /**
6764
+ * APPLY FUNCTIONS RESPONSIVE < 500PX
6765
+ */
6766
+ get accordionExtraClasses() {
6767
+ if (this.isDesktop()) {
6768
+ return ['pad-16'];
6769
+ }
6770
+ //Responsive Classes
6771
+ return ['pad-14'];
6772
+ }
6773
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6774
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiCardAccordionComponent, isStandalone: true, selector: "tcloud-ui-card-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, showMoreText: { classPropertyName: "showMoreText", publicName: "showMoreText", isSignal: true, isRequired: false, transformFunction: null }, showLessText: { classPropertyName: "showLessText", publicName: "showLessText", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", isOpen: "isOpenChange" }, ngImport: i0, template: "<div class=\"tcloud-ui-card-accordion tcloud-ui-card bg-c-neutral-50 bor-xs bor-rad-16\"\n[ngClass]=\"accordionExtraClasses\"\n>\n <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n <i [class]=\"iconClass()\" icon></i>\n\n <div\n *ngIf=\"badge()\"\n class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs\"\n [ngClass]=\"badge()?.class\"\n [class.mar-l-8]=\"isDesktop()\"\n >\n {{ badge()?.text }}\n </div>\n\n @if(isDesktop()){\n <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n {{ isOpen() ? showLessText() : showMoreText() }}\n <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n </button>\n }\n\n @if(!isDesktop()){\n <button tcRevButton=\"link\" color=\"dark\" size=\"md\" (click)=\"toggleAccordion()\" class=\"tcloud-ui-card-accordion__arrow-mobile mar-l-a\">\n <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n </button>\n }\n\n </tc-rev-card-title>\n <ng-content *ngIf=\"isOpen()\"></ng-content>\n</div>\n", styles: [":host{display:block}.tcloud-ui-card-accordion{border-color:var(--c-neutral-400)}@media(max-width:480px){.tcloud-ui-card-accordion__arrow-mobile{font-size:var(--f-size-16);padding:0 var(--size-6)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TcRevCardTitleComponent, selector: "tc-rev-card-title", inputs: ["title"] }, { kind: "directive", type: TcRevButtonDirective, selector: "button[tcRevButton]", inputs: ["color", "size", "fullWidth", "tcRevButton"] }] }); }
6775
+ }
6776
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardAccordionComponent, decorators: [{
6777
+ type: Component,
6778
+ args: [{ selector: 'tcloud-ui-card-accordion', imports: [CommonModule, TcRevCardTitleComponent, TcRevButtonDirective], template: "<div class=\"tcloud-ui-card-accordion tcloud-ui-card bg-c-neutral-50 bor-xs bor-rad-16\"\n[ngClass]=\"accordionExtraClasses\"\n>\n <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n <i [class]=\"iconClass()\" icon></i>\n\n <div\n *ngIf=\"badge()\"\n class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs\"\n [ngClass]=\"badge()?.class\"\n [class.mar-l-8]=\"isDesktop()\"\n >\n {{ badge()?.text }}\n </div>\n\n @if(isDesktop()){\n <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n {{ isOpen() ? showLessText() : showMoreText() }}\n <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n </button>\n }\n\n @if(!isDesktop()){\n <button tcRevButton=\"link\" color=\"dark\" size=\"md\" (click)=\"toggleAccordion()\" class=\"tcloud-ui-card-accordion__arrow-mobile mar-l-a\">\n <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n </button>\n }\n\n </tc-rev-card-title>\n <ng-content *ngIf=\"isOpen()\"></ng-content>\n</div>\n", styles: [":host{display:block}.tcloud-ui-card-accordion{border-color:var(--c-neutral-400)}@media(max-width:480px){.tcloud-ui-card-accordion__arrow-mobile{font-size:var(--f-size-16);padding:0 var(--size-6)}}\n"] }]
6779
+ }] });
6780
+
6781
+ /**
6782
+ * Verifica se um elemento de texto está elipsado (texto cortado com ...)
6783
+ * @param element - O elemento HTML que contém o texto
6784
+ * @returns true se o texto estiver elipsado, false caso contrário
6785
+ */
6786
+ function isElementTextEllipsed(element) {
6787
+ if (!element)
6788
+ return false;
6789
+ // Verifica se o scrollWidth é maior que o clientWidth
6790
+ // Isso indica que o texto está sendo cortado
6791
+ return element.scrollWidth > element.clientWidth;
6792
+ }
6793
+ /**
6794
+ * Verifica se um texto específico estaria elipsado baseado no texto fornecido
6795
+ * @param text - O texto a ser verificado
6796
+ * @param containerWidth - Largura do container (opcional, usa o padrão se não informado)
6797
+ * @returns true se o texto seria elipsado
6798
+ */
6799
+ function isTextEllipsed(text, containerWidth) {
6800
+ if (!text)
6801
+ return false;
6802
+ // Cria um elemento temporário para medir o texto
6803
+ const tempElement = document.createElement('span');
6804
+ tempElement.style.visibility = 'hidden';
6805
+ tempElement.style.position = 'absolute';
6806
+ tempElement.style.whiteSpace = 'nowrap';
6807
+ tempElement.style.fontSize = '1rem'; // f-md
6808
+ tempElement.style.fontWeight = '500'; // f-weight-500
6809
+ tempElement.style.fontFamily = getComputedStyle(document.body).fontFamily;
6810
+ tempElement.textContent = text;
6811
+ document.body.appendChild(tempElement);
6812
+ const textWidth = tempElement.scrollWidth;
6813
+ // Calcula a largura máxima disponível: largura do container menos espaço do botão e margins
6814
+ const maxWidth = containerWidth || 150; // ~150px considerando o botão de 24px + margens
6815
+ document.body.removeChild(tempElement);
6816
+ return textWidth > maxWidth;
6817
+ }
6818
+ // export class EllipsedTextHelper
6819
+ // {
6820
+ // public static isEllipsed(id: string): boolean
6821
+ // {
6822
+ // const element = document.querySelector<any>(`#${id}`);
6823
+ // return element ? (element.offsetWidth < element.scrollWidth) : false;
6824
+ // }
6825
+ // /**
6826
+ // *
6827
+ // * @param _textField - Stands for the text you want to compare
6828
+ // * @param _fontProperties - Text CSS properties (font-size & font-family)
6829
+ // * @param _divId - divId you want to compare
6830
+ // * @param _isEllipsed - is it Ellipsed? (optional)
6831
+ // */
6832
+ // public static calculate( _textField: string, _fontProperties: string, _divId: string, _isEllipsed: boolean = false, _whiteSpaceNoWrap = true): boolean
6833
+ // {
6834
+ // if (_isEllipsed)
6835
+ // {
6836
+ // return true;
6837
+ // }
6838
+ // const textDiv = document.getElementById(_divId);
6839
+ // if (textDiv)
6840
+ // {
6841
+ // const widthText = this.textWidthCalc(_textField, _fontProperties, _whiteSpaceNoWrap);
6842
+ // return widthText > textDiv.clientWidth;
6843
+ // }
6844
+ // return false
6845
+ // }
6846
+ // public static textWidthCalc(_text: string, _fontProperties: string, _whiteSpaceNoWrap: boolean): number
6847
+ // {
6848
+ // let tag = document.createElement('div');
6849
+ // tag.style.position = 'absolute';
6850
+ // tag.style.left = '-99in';
6851
+ // tag.style.font = _fontProperties;
6852
+ // tag.innerHTML = _text;
6853
+ // if (_whiteSpaceNoWrap)
6854
+ // {
6855
+ // tag.style.whiteSpace = 'nowrap';
6856
+ // }
6857
+ // document.body.appendChild(tag);
6858
+ // const result = tag.clientWidth;
6859
+ // document.body.removeChild(tag);
6860
+ // return result;
6861
+ // }
6862
+ // }
6863
+
6864
+ class TcRevTooltipDirective {
6865
+ constructor(_el, _renderer, _vcr) {
6866
+ this._el = _el;
6867
+ this._renderer = _renderer;
6868
+ this._vcr = _vcr;
6869
+ this.tcRevTooltip = input('');
6870
+ this.position = input('top');
6871
+ this.tooltipElement = null;
6872
+ }
6873
+ onMouseEnter() {
6874
+ const tooltipText = this.tcRevTooltip();
6875
+ if (this.isValidTooltipText(tooltipText)) {
6876
+ this.showTooltip(tooltipText);
6877
+ }
6878
+ }
6879
+ onMouseLeave() {
6880
+ this.hideTooltip();
6881
+ }
6882
+ isValidTooltipText(text) {
6883
+ return text && text.trim().length > 0;
6884
+ }
6885
+ showTooltip(text) {
6886
+ if (this.tooltipElement) {
6887
+ this.hideTooltip();
6888
+ }
6889
+ // Create tooltip element
6890
+ this.tooltipElement = this._renderer.createElement('div');
6891
+ // Add text content
6892
+ const textNode = this._renderer.createText(text);
6893
+ this._renderer.appendChild(this.tooltipElement, textNode);
6894
+ // Add CSS classes
6895
+ this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip');
6896
+ this._renderer.addClass(this.tooltipElement, `tc-rev-tooltip--${this.position()}`);
6897
+ // Set initial styles
6898
+ this._renderer.setStyle(this.tooltipElement, 'position', 'absolute');
6899
+ this._renderer.setStyle(this.tooltipElement, 'z-index', '9999');
6900
+ this._renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
6901
+ // this._renderer.setStyle(this.tooltipElement, 'opacity', '0');
6902
+ // Append to body
6903
+ this._renderer.appendChild(document.body, this.tooltipElement);
6904
+ // Position tooltip
6905
+ this.positionTooltip();
6906
+ // Show tooltip with animation
6907
+ this._renderer.setStyle(this.tooltipElement, 'visibility', 'visible');
6908
+ this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip--visible');
6909
+ }
6910
+ hideTooltip() {
6911
+ if (this.tooltipElement) {
6912
+ this._renderer.removeChild(document.body, this.tooltipElement);
6913
+ this.tooltipElement = null;
6914
+ }
6915
+ }
6916
+ positionTooltip() {
6917
+ if (!this.tooltipElement)
6918
+ return;
6919
+ const hostRect = this._el.nativeElement.getBoundingClientRect();
6920
+ const tooltipRect = this.tooltipElement.getBoundingClientRect();
6921
+ const position = this.position();
6922
+ let top = 0;
6923
+ let left = 0;
6924
+ switch (position) {
6925
+ case 'top':
6926
+ top = hostRect.top + window.scrollY - tooltipRect.height - 8;
6927
+ left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
6928
+ break;
6929
+ case 'bottom':
6930
+ top = hostRect.bottom + window.scrollY + 8;
6931
+ left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
6932
+ break;
6933
+ case 'left':
6934
+ top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
6935
+ left = hostRect.left + window.scrollX - tooltipRect.width - 8;
6936
+ break;
6937
+ case 'right':
6938
+ top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
6939
+ left = hostRect.right + window.scrollX + 8;
6940
+ break;
6941
+ }
6942
+ this._renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
6943
+ this._renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
6944
+ }
6945
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
6946
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevTooltipDirective, isStandalone: true, selector: "[tcRevTooltip]", inputs: { tcRevTooltip: { classPropertyName: "tcRevTooltip", publicName: "tcRevTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
6947
+ }
6948
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevTooltipDirective, decorators: [{
6949
+ type: Directive,
6950
+ args: [{
6951
+ selector: '[tcRevTooltip]',
6952
+ standalone: true
6953
+ }]
6954
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { onMouseEnter: [{
6955
+ type: HostListener,
6956
+ args: ['mouseenter']
6957
+ }], onMouseLeave: [{
6958
+ type: HostListener,
6959
+ args: ['mouseleave']
6960
+ }] } });
6961
+
6962
+ class TcRevIconButtonDirective {
6963
+ constructor(_el) {
6964
+ this._el = _el;
6965
+ this.color = input('primary');
6966
+ this.size = input('sm');
6967
+ this.tcRevIconButton = input('filled');
6968
+ effect(() => {
6969
+ this.setClasses();
6970
+ });
6971
+ }
6972
+ setClasses() {
6973
+ const tokenList = this._el.nativeElement.classList;
6974
+ tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
6975
+ let tcRevIconButton = this.tcRevIconButton();
6976
+ if (!tcRevIconButton) {
6977
+ tcRevIconButton = 'filled';
6978
+ }
6979
+ this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
6980
+ this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}-icon`);
6981
+ this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevIconButton}`);
6982
+ }
6983
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevIconButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
6984
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevIconButtonDirective, isStandalone: true, selector: "button[tcRevIconButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tcRevIconButton: { classPropertyName: "tcRevIconButton", publicName: "tcRevIconButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn tc-rev-btn-icon" }, ngImport: i0 }); }
6985
+ }
6986
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevIconButtonDirective, decorators: [{
6987
+ type: Directive,
6988
+ args: [{
6989
+ selector: 'button[tcRevIconButton]',
6990
+ host: {
6991
+ class: 'tc-rev-btn tc-rev-btn-icon'
6992
+ }
6993
+ }]
6994
+ }], ctorParameters: () => [{ type: i0.ElementRef }] });
6995
+
6996
+ var DropdownSize$1;
6997
+ (function (DropdownSize) {
6998
+ DropdownSize["sm"] = "sm";
6999
+ DropdownSize["md"] = "md";
7000
+ DropdownSize["lg"] = "lg";
7001
+ })(DropdownSize$1 || (DropdownSize$1 = {}));
7002
+ class TCloudUiDropdownComponent {
7003
+ onDocumentClick(event) {
7004
+ if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
7005
+ this.isOpen = false;
7006
+ }
7007
+ }
7008
+ constructor(elementRef) {
7009
+ this.elementRef = elementRef;
7010
+ this._deviceService = inject(TCloudUiDeviceUtilsService);
7011
+ this.label = input(''); // Label que será exibida
7012
+ this.disabled = input(false); // Desabilita o dropdown
7013
+ this.options = input.required(); // Lista de opções no novo formato
7014
+ this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
7015
+ this.value = model(null); // Two-way binding para o valor selecionado
7016
+ this.size = input(DropdownSize$1.sm);
7017
+ this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
7018
+ this.optionSelected = output(); // Emissor para o valor selecionado
7019
+ this.selectedOption = signal(null); // Opção selecionada
7020
+ this.isOpen = false; // Controla se o dropdown está aberto
7021
+ this.dropdownSize = DropdownSize$1;
7022
+ this.isDesktop = this._deviceService.isDesktop;
7023
+ this.isMobile = this._deviceService.isMobile;
7024
+ }
7025
+ ngOnChanges(_simpleChanges) {
7026
+ // Atualiza a opção selecionada quando o valor pré-selecionado muda
7027
+ if (_simpleChanges['initialValue'] ||
7028
+ _simpleChanges['options'] ||
7029
+ _simpleChanges['value']) {
7030
+ const valueToUse = this.value() || this.initialValue();
7031
+ this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
7032
+ }
7033
+ }
7034
+ ngOnInit() {
7035
+ // Prioriza o valor do model, mas mantém compatibilidade com initialValue
7036
+ const valueToUse = this.value() || this.initialValue();
7037
+ const foundOption = this.options().find((option) => option.value === valueToUse) || null;
7038
+ this.selectedOption.set(foundOption);
7039
+ // Se não havia valor no model mas havia initialValue, sincroniza o model
7040
+ if (!this.value() && this.initialValue() && foundOption) {
7041
+ this.value.set(foundOption.value);
7042
+ }
7043
+ // Escuta mudanças no model e atualiza a opção selecionada
7044
+ this.value.subscribe((newValue) => {
7045
+ const option = this.options().find((opt) => opt.value === newValue) || null;
7046
+ if (this.selectedOption() !== option) {
7047
+ this.selectedOption.set(option);
7048
+ }
7049
+ });
7050
+ }
7051
+ toggleDropdown() {
7052
+ // Abertura do dropdown para mobile
7053
+ if (this.isMobile()) {
7054
+ this._deviceService.openDropdownDevice(this.menuTemplate);
7055
+ return;
7056
+ }
7057
+ this.isOpen = !this.isOpen;
7058
+ }
7059
+ selectOption(option) {
7060
+ this.selectedOption.set(option);
7061
+ this.value.set(option.value); // Atualiza o model com two-way binding
7062
+ this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
7063
+ // Fechamento dd dropdown para mobile
7064
+ if (this.isMobile()) {
7065
+ this._deviceService.closeDropdownDevice();
7066
+ return;
7067
+ }
7068
+ this.isOpen = false; // Fecha o dropdown
7069
+ }
7070
+ /**
7071
+ * Verifica se o texto de uma opção na lista está elipsado
7072
+ * @param text - Texto a ser verificado
7073
+ * @returns true se o texto estiver elipsado
7074
+ */
7075
+ isOptionEllipsed(text) {
7076
+ if (!text)
7077
+ return false;
7078
+ // Calcula a largura disponível para o texto nas opções da lista
7079
+ const menuElement = this.elementRef.nativeElement.querySelector('.tcloud-ui-dropdown-menu');
7080
+ if (!menuElement) {
7081
+ // Se o menu não está aberto, usa a largura do dropdown
7082
+ const dropdownElement = this.elementRef.nativeElement.querySelector('.tcloud-ui-dropdown');
7083
+ if (!dropdownElement)
7084
+ return false;
7085
+ const dropdownWidth = dropdownElement.clientWidth;
7086
+ const padding = 16; // 8px de cada lado do botão
7087
+ const iconSpace = 24; // Espaço do ícone de check quando selecionado
7088
+ const availableWidth = Math.max(50, dropdownWidth - padding - iconSpace);
7089
+ return isTextEllipsed(text, availableWidth);
7090
+ }
7091
+ // Largura do menu menos padding do item (16px total) e espaço do ícone de check (24px)
7092
+ const menuWidth = menuElement.clientWidth;
7093
+ const padding = 16; // 8px de cada lado do botão do item
7094
+ const iconSpace = 24; // Espaço do ícone de check quando selecionado
7095
+ const availableWidth = Math.max(50, menuWidth - padding - iconSpace);
7096
+ return isTextEllipsed(text, availableWidth);
7097
+ }
7098
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
7099
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiDropdownComponent, isStandalone: true, selector: "tcloud-ui-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b>{{ label() }}</b>\n }\n <span class=\"tcloud-ui-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n @for (option of options(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tcloud-ui-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n <div class=\"tcloud-ui-dropdown-menu-section\">\n <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n @for (option of options(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
7100
+ }
7101
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDropdownComponent, decorators: [{
7102
+ type: Component,
7103
+ args: [{ selector: 'tcloud-ui-dropdown', imports: [
7104
+ CommonModule,
7105
+ FormsModule,
7106
+ ReactiveFormsModule,
7107
+ TcRevTooltipDirective,
7108
+ TcRevIconButtonDirective
7109
+ ], template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b>{{ label() }}</b>\n }\n <span class=\"tcloud-ui-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n @for (option of options(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tcloud-ui-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n <div class=\"tcloud-ui-dropdown-menu-section\">\n <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n @for (option of options(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
7110
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
7111
+ type: ViewChild,
7112
+ args: ['menuTemplate']
7113
+ }], onDocumentClick: [{
7114
+ type: HostListener,
7115
+ args: ['document:click', ['$event']]
7116
+ }] } });
7117
+
7118
+ var DropdownMultiSize$1;
7119
+ (function (DropdownMultiSize) {
7120
+ DropdownMultiSize["sm"] = "sm";
7121
+ DropdownMultiSize["md"] = "md";
7122
+ DropdownMultiSize["lg"] = "lg";
7123
+ })(DropdownMultiSize$1 || (DropdownMultiSize$1 = {}));
7124
+ class TCloudUiDropdownMultiComponent {
7125
+ onDocumentClick(event) {
7126
+ if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
7127
+ this.isOpen = false;
7128
+ }
7129
+ }
7130
+ constructor(elementRef) {
7131
+ this.elementRef = elementRef;
7132
+ this.label = input(''); // Label que será exibida
7133
+ this.disabled = input(false); // Desabilita o dropdown
7134
+ this.options = input.required(); // Lista de opções no novo formato
7135
+ this.initialValues = input([]); // Valores pré-selecionados (deprecated - use values instead)
7136
+ this.values = model([]); // Two-way binding para os valores selecionados
7137
+ this.size = input(DropdownMultiSize$1.sm);
7138
+ this.width = input(''); // Largura do dropdown
7139
+ this.placeholder = input('Selecione'); // Placeholder quando nenhum item estiver selecionado
7140
+ this.maxDisplayItems = input(2); // Máximo de itens a serem exibidos no botão
7141
+ this.optionsSelected = output(); // Emissor para os valores selecionados
7142
+ this.selectedOptions = signal([]); // Opções selecionadas
7143
+ this.isOpen = false; // Controla se o dropdown está aberto
7144
+ this.dropdownSize = DropdownMultiSize$1;
7145
+ }
7146
+ ngOnChanges(_simpleChanges) {
7147
+ // Atualiza as opções selecionadas quando os valores pré-selecionados mudam
7148
+ if (_simpleChanges['initialValues'] || _simpleChanges['options'] || _simpleChanges['values']) {
7149
+ const valuesToUse = this.values().length > 0 ? this.values() : this.initialValues();
7150
+ const selected = this.options().filter(option => valuesToUse.includes(option.value));
7151
+ this.selectedOptions.set(selected);
7152
+ }
7153
+ }
7154
+ ngOnInit() {
7155
+ // Prioriza os valores do model, mas mantém compatibilidade com initialValues
7156
+ const valuesToUse = this.values().length > 0 ? this.values() : this.initialValues();
7157
+ const selected = this.options().filter(option => valuesToUse.includes(option.value));
7158
+ this.selectedOptions.set(selected);
7159
+ // Se não havia valores no model mas havia initialValues, sincroniza o model
7160
+ if (this.values().length === 0 && this.initialValues().length > 0) {
7161
+ this.values.set([...this.initialValues()]);
7162
+ }
7163
+ // Escuta mudanças no model e atualiza as opções selecionadas
7164
+ this.values.subscribe((newValues) => {
7165
+ const newSelected = this.options().filter(option => newValues.includes(option.value));
7166
+ // Só atualiza se realmente mudou para evitar loops
7167
+ const currentSelectedValues = this.selectedOptions().map(opt => opt.value);
7168
+ const newSelectedValues = newSelected.map(opt => opt.value);
7169
+ if (JSON.stringify(currentSelectedValues.sort()) !== JSON.stringify(newSelectedValues.sort())) {
7170
+ this.selectedOptions.set(newSelected);
7171
+ }
7172
+ });
7173
+ }
7174
+ toggleDropdown() {
7175
+ if (!this.disabled()) {
7176
+ this.isOpen = !this.isOpen;
7177
+ }
7178
+ }
7179
+ toggleOption(option, event) {
7180
+ event.stopPropagation();
7181
+ if (option.disabled)
7182
+ return;
7183
+ const currentSelected = this.selectedOptions();
7184
+ const isSelected = currentSelected.some(selected => selected.value === option.value);
7185
+ let newSelected;
7186
+ if (isSelected) {
7187
+ // Remove a opção se já estiver selecionada
7188
+ newSelected = currentSelected.filter(selected => selected.value !== option.value);
7189
+ }
7190
+ else {
7191
+ // Adiciona a opção se não estiver selecionada
7192
+ newSelected = [...currentSelected, option];
7193
+ }
7194
+ const newValues = newSelected.map(opt => opt.value);
7195
+ this.selectedOptions.set(newSelected);
7196
+ this.values.set(newValues); // Atualiza o model com two-way binding
7197
+ this.optionsSelected.emit(newValues); // Emite os valores para compatibilidade
7198
+ }
7199
+ isOptionSelected(option) {
7200
+ return this.selectedOptions().some(selected => selected.value === option.value);
7201
+ }
7202
+ getDisplayText() {
7203
+ const selected = this.selectedOptions();
7204
+ if (selected.length === 0) {
7205
+ return this.placeholder();
7206
+ }
7207
+ // Se todos os itens (não desabilitados) estão selecionados, mostra "Todos"
7208
+ if (this.isAllSelected()) {
7209
+ return 'Todos';
7210
+ }
7211
+ const maxDisplay = this.maxDisplayItems();
7212
+ if (selected.length <= maxDisplay) {
7213
+ return selected.map(opt => opt.displayValue).join(', ');
7214
+ }
7215
+ const firstItems = selected.slice(0, maxDisplay).map(opt => opt.displayValue).join(', ');
7216
+ const remaining = selected.length - maxDisplay;
7217
+ return `${firstItems} (+${remaining})`;
7218
+ }
7219
+ clearAll() {
7220
+ this.selectedOptions.set([]);
7221
+ this.values.set([]); // Atualiza o model com two-way binding
7222
+ this.optionsSelected.emit([]);
7223
+ }
7224
+ selectAll() {
7225
+ const enabledOptions = this.options().filter(option => !option.disabled);
7226
+ const allValues = enabledOptions.map(opt => opt.value);
7227
+ this.selectedOptions.set(enabledOptions);
7228
+ this.values.set(allValues); // Atualiza o model com two-way binding
7229
+ this.optionsSelected.emit(allValues);
7230
+ }
7231
+ isAllSelected() {
7232
+ const enabledOptions = this.options().filter(option => !option.disabled);
7233
+ const selectedOptions = this.selectedOptions();
7234
+ if (enabledOptions.length === 0)
7235
+ return false;
7236
+ return enabledOptions.every(option => selectedOptions.some(selected => selected.value === option.value));
7237
+ }
7238
+ isSomeSelected() {
7239
+ const enabledOptions = this.options().filter(option => !option.disabled);
7240
+ const selectedOptions = this.selectedOptions();
7241
+ if (enabledOptions.length === 0 || selectedOptions.length === 0)
7242
+ return false;
7243
+ const selectedCount = enabledOptions.filter(option => selectedOptions.some(selected => selected.value === option.value)).length;
7244
+ return selectedCount > 0 && selectedCount < enabledOptions.length;
7245
+ }
7246
+ toggleSelectAll(event) {
7247
+ event.stopPropagation();
7248
+ if (this.isAllSelected()) {
7249
+ this.clearAll();
7250
+ }
7251
+ else {
7252
+ this.selectAll();
7253
+ }
7254
+ }
7255
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDropdownMultiComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
7256
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiDropdownMultiComponent, isStandalone: true, selector: "tcloud-ui-dropdown-multi", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tcloud-ui-dropdown-multi-toggle\"\n [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen\"\n class=\"tcloud-ui-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tcloud-ui-dropdown-multi-actions\">\n <label\n class=\"tcloud-ui-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tcloud-ui-dropdown-multi-select-all-text\">Todos</span>\n </label>\n </div>\n\n <ul class=\"tcloud-ui-dropdown-multi-options\">\n @for (option of options(); track option?.value)\n {\n <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n <label\n class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tcloud-ui-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TCloudUiCheckboxDirective, selector: "input[type=\"checkbox\"][tcloudUiCheckbox]" }] }); }
7257
+ }
7258
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDropdownMultiComponent, decorators: [{
7259
+ type: Component,
7260
+ args: [{ selector: 'tcloud-ui-dropdown-multi', imports: [
7261
+ CommonModule,
7262
+ FormsModule,
7263
+ ReactiveFormsModule,
7264
+ TCloudUiCheckboxDirective
7265
+ ], template: "<div\n class=\"tcloud-ui-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tcloud-ui-dropdown-multi-toggle\"\n [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen\"\n class=\"tcloud-ui-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tcloud-ui-dropdown-multi-actions\">\n <label\n class=\"tcloud-ui-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tcloud-ui-dropdown-multi-select-all-text\">Todos</span>\n </label>\n </div>\n\n <ul class=\"tcloud-ui-dropdown-multi-options\">\n @for (option of options(); track option?.value)\n {\n <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n <label\n class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tcloud-ui-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
7266
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
7267
+ type: HostListener,
7268
+ args: ['document:click', ['$event']]
7269
+ }] } });
7270
+
7271
+ class TCloudUiEmptyContentComponent {
7272
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiEmptyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7273
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiEmptyContentComponent, isStandalone: true, selector: "tcloud-ui-empty-content", ngImport: i0, template: "<div class=\"tcloud-ui-empty-content f-family f-sm c-neutral-700 pad-x-16 pad-y-16 bg-c-neutral-200 bor-rad-8\">\n <ng-content></ng-content>\n</div>\n", styles: [""] }); }
7274
+ }
7275
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiEmptyContentComponent, decorators: [{
7276
+ type: Component,
7277
+ args: [{ selector: 'tcloud-ui-empty-content', imports: [], template: "<div class=\"tcloud-ui-empty-content f-family f-sm c-neutral-700 pad-x-16 pad-y-16 bg-c-neutral-200 bor-rad-8\">\n <ng-content></ng-content>\n</div>\n" }]
7278
+ }] });
7279
+
7280
+ class TCloudUiFaqComponent {
7281
+ constructor() {
7282
+ this.title = 'Dúvidas frequentes';
7283
+ this.questions = [];
7284
+ this.openIndex = signal(null);
7285
+ }
7286
+ toggle(index) {
7287
+ if (this.openIndex() === index) {
7288
+ this.openIndex.set(null);
7289
+ }
7290
+ else {
7291
+ this.openIndex.set(index);
7292
+ }
7293
+ }
7294
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiFaqComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7295
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiFaqComponent, isStandalone: true, selector: "tcloud-ui-faq", inputs: { title: "title", questions: "questions" }, ngImport: i0, template: "<div class=\"tcloud-ui-faq\">\n <div class=\"tcloud-ui-faq-list\">\n <div\n class=\"tcloud-ui-faq-item f-family c-neutral-700 f-size-16\"\n [class.open]=\"openIndex() === i\"\n *ngFor=\"let q of questions; let i = index\"\n (click)=\"toggle(i)\"\n >\n <div class=\"tcloud-ui-faq-question\">\n <p>{{ q.question }}</p>\n <i class=\"fa-light fa-angle-down arrow\" [class.open]=\"openIndex() === i\"></i>\n </div>\n\n <div\n class=\"tcloud-ui-faq-answer\"\n >\n <p>{{ q.answer }}</p>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [":host{display:block}.tcloud-ui-faq{background-color:var(--c-neutral-50)}.tcloud-ui-faq .faq-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tcloud-ui-faq .faq-header .icon{width:48px;height:48px;background:var(--c-neutral-200);border-radius:var(--bor-radius-rounded);display:flex;align-items:center;justify-content:center;color:var(--c-neutral-700)}.tcloud-ui-faq .faq-header .icon i{font-size:1.5rem;color:var(--c-neutral-700)}.tcloud-ui-faq .faq-header h2{font-size:var(--f-size-20);font-weight:var(--f-weight-700);font-family:var(--f-family)}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item{border-top:1px solid var(--c-neutral-300);cursor:pointer;height:var(--size-56);overflow:hidden;padding:var(--size-16);transition:all .2s ease}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item.open{height:auto;overflow:visible}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item:first-child{border-top:none}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question{display:flex;justify-content:space-between;align-items:center}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question p{margin:0}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question .arrow{transition:all .3s ease}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question .arrow.open{transform:rotate(180deg)}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-answer{border:0;margin-top:1rem;padding:0}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-answer p{margin:0;line-height:1.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7296
+ }
7297
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiFaqComponent, decorators: [{
7298
+ type: Component,
7299
+ args: [{ selector: 'tcloud-ui-faq', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tcloud-ui-faq\">\n <div class=\"tcloud-ui-faq-list\">\n <div\n class=\"tcloud-ui-faq-item f-family c-neutral-700 f-size-16\"\n [class.open]=\"openIndex() === i\"\n *ngFor=\"let q of questions; let i = index\"\n (click)=\"toggle(i)\"\n >\n <div class=\"tcloud-ui-faq-question\">\n <p>{{ q.question }}</p>\n <i class=\"fa-light fa-angle-down arrow\" [class.open]=\"openIndex() === i\"></i>\n </div>\n\n <div\n class=\"tcloud-ui-faq-answer\"\n >\n <p>{{ q.answer }}</p>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [":host{display:block}.tcloud-ui-faq{background-color:var(--c-neutral-50)}.tcloud-ui-faq .faq-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tcloud-ui-faq .faq-header .icon{width:48px;height:48px;background:var(--c-neutral-200);border-radius:var(--bor-radius-rounded);display:flex;align-items:center;justify-content:center;color:var(--c-neutral-700)}.tcloud-ui-faq .faq-header .icon i{font-size:1.5rem;color:var(--c-neutral-700)}.tcloud-ui-faq .faq-header h2{font-size:var(--f-size-20);font-weight:var(--f-weight-700);font-family:var(--f-family)}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item{border-top:1px solid var(--c-neutral-300);cursor:pointer;height:var(--size-56);overflow:hidden;padding:var(--size-16);transition:all .2s ease}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item.open{height:auto;overflow:visible}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item:first-child{border-top:none}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question{display:flex;justify-content:space-between;align-items:center}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question p{margin:0}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question .arrow{transition:all .3s ease}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question .arrow.open{transform:rotate(180deg)}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-answer{border:0;margin-top:1rem;padding:0}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-answer p{margin:0;line-height:1.6}\n"] }]
7300
+ }], propDecorators: { title: [{
7301
+ type: Input
7302
+ }], questions: [{
7303
+ type: Input
7304
+ }] } });
7305
+
7306
+ class TCloudUiMessageComponent {
7307
+ constructor() {
7308
+ this.message = '';
7309
+ this.type = 'info';
7310
+ }
7311
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7312
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiMessageComponent, isStandalone: true, selector: "tcloud-ui-message", inputs: { message: "message", type: "type" }, ngImport: i0, template: "<div class=\"message\" [ngClass]=\"type\" *ngIf=\"message\">\n <i class=\"icon fas\" [ngClass]=\"{\n 'fa-check': type === 'success',\n 'fa-times': type === 'error',\n 'fa-info-circle': type === 'info',\n 'fa-exclamation-triangle': type === 'warning'\n }\"></i>\n <i class=\"text\">{{ message }}</i>\n</div>\n\n", styles: [":host{display:block}.message{padding:.75rem 1rem;border-radius:6px;font-size:14px;display:flex;align-items:center;gap:.5rem;margin:8px 0}.message.success{background-color:var(--c-success-300);color:var(--c-success-500);border:1px solid var(--c-success-300)}.message.error{background-color:var(--c-danger-300);color:var(--c-danger-500);border:1px solid var(--c-danger-300)}.message.info{background-color:var(--c-info-300);color:var(--c-info-500);border:1px solid var(--c-info-300)}.message.warning{background-color:var(--c-alert-300);color:var(--c-alert-500);border:1px solid var(--c-alert-300)}.message .icon{font-size:16px}.message .text{flex:1;font-style:normal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7313
+ }
7314
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiMessageComponent, decorators: [{
7315
+ type: Component,
7316
+ args: [{ selector: 'tcloud-ui-message', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message\" [ngClass]=\"type\" *ngIf=\"message\">\n <i class=\"icon fas\" [ngClass]=\"{\n 'fa-check': type === 'success',\n 'fa-times': type === 'error',\n 'fa-info-circle': type === 'info',\n 'fa-exclamation-triangle': type === 'warning'\n }\"></i>\n <i class=\"text\">{{ message }}</i>\n</div>\n\n", styles: [":host{display:block}.message{padding:.75rem 1rem;border-radius:6px;font-size:14px;display:flex;align-items:center;gap:.5rem;margin:8px 0}.message.success{background-color:var(--c-success-300);color:var(--c-success-500);border:1px solid var(--c-success-300)}.message.error{background-color:var(--c-danger-300);color:var(--c-danger-500);border:1px solid var(--c-danger-300)}.message.info{background-color:var(--c-info-300);color:var(--c-info-500);border:1px solid var(--c-info-300)}.message.warning{background-color:var(--c-alert-300);color:var(--c-alert-500);border:1px solid var(--c-alert-300)}.message .icon{font-size:16px}.message .text{flex:1;font-style:normal}\n"] }]
7317
+ }], propDecorators: { message: [{
7318
+ type: Input
7319
+ }], type: [{
7320
+ type: Input
7321
+ }] } });
7322
+
7323
+ class TCloudUiSkeletonLoadingComponent {
7324
+ constructor() {
7325
+ /** Params of the loading skeleton accepts string with CSS units (px, rem, em) */
7326
+ this.width = input('10rem');
7327
+ this.height = input('1.25rem');
7328
+ this.borderRadius = input('0.3rem');
7329
+ this.style = new TCloudUiSkeletonLoadingComponentStyle();
7330
+ }
7331
+ ngOnInit() {
7332
+ this.style.width = this.width();
7333
+ this.style.height = this.height();
7334
+ this.style.borderRadius = this.borderRadius();
7335
+ }
7336
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSkeletonLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7337
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TCloudUiSkeletonLoadingComponent, isStandalone: true, selector: "tcloud-ui-skeleton-loading", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tcloud-ui-skeleton-loading\" [ngStyle]=\"this.style\"></div>\n\n", styles: [":host{display:block}.tcloud-ui-skeleton-loading{background:linear-gradient(90deg,#eee 25%,#fff,#eee 75%);background-size:400% 100%;animation:shimmer 2s infinite linear}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
7338
+ }
7339
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSkeletonLoadingComponent, decorators: [{
7340
+ type: Component,
7341
+ args: [{ selector: 'tcloud-ui-skeleton-loading', imports: [CommonModule], template: "<div class=\"tcloud-ui-skeleton-loading\" [ngStyle]=\"this.style\"></div>\n\n", styles: [":host{display:block}.tcloud-ui-skeleton-loading{background:linear-gradient(90deg,#eee 25%,#fff,#eee 75%);background-size:400% 100%;animation:shimmer 2s infinite linear}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
7342
+ }] });
7343
+ class TCloudUiSkeletonLoadingComponentStyle {
7344
+ }
7345
+
7346
+ var TagColorsEnum$1;
7347
+ (function (TagColorsEnum) {
7348
+ TagColorsEnum["neutral-50"] = "neutral-50";
7349
+ TagColorsEnum["neutral-100"] = "neutral-100";
7350
+ TagColorsEnum["neutral-200"] = "neutral-200";
7351
+ TagColorsEnum["neutral-300"] = "neutral-300";
7352
+ TagColorsEnum["neutral-400"] = "neutral-400";
7353
+ TagColorsEnum["neutral-500"] = "neutral-500";
7354
+ TagColorsEnum["neutral-600"] = "neutral-600";
7355
+ TagColorsEnum["neutral-700"] = "neutral-700";
7356
+ TagColorsEnum["neutral-800"] = "neutral-800";
7357
+ TagColorsEnum["neutral-900"] = "neutral-900";
7358
+ // Primary
7359
+ TagColorsEnum["primary-300"] = "primary-300";
7360
+ TagColorsEnum["primary-400"] = "primary-400";
7361
+ TagColorsEnum["primary-500"] = "primary-500";
7362
+ TagColorsEnum["primary-600"] = "primary-600";
7363
+ TagColorsEnum["primary-700"] = "primary-700";
7364
+ // Danger
7365
+ TagColorsEnum["danger-300"] = "danger-300";
7366
+ TagColorsEnum["danger-400"] = "danger-400";
7367
+ TagColorsEnum["danger-500"] = "danger-500";
7368
+ // Alert
7369
+ TagColorsEnum["alert-300"] = "alert-300";
7370
+ TagColorsEnum["alert-400"] = "alert-400";
7371
+ TagColorsEnum["alert-500"] = "alert-500";
7372
+ // Info
7373
+ TagColorsEnum["info-300"] = "info-300";
7374
+ TagColorsEnum["info-400"] = "info-400";
7375
+ TagColorsEnum["info-500"] = "info-500";
7376
+ // Success
7377
+ TagColorsEnum["success-300"] = "success-300";
7378
+ TagColorsEnum["success-400"] = "success-400";
7379
+ TagColorsEnum["success-500"] = "success-500";
7380
+ })(TagColorsEnum$1 || (TagColorsEnum$1 = {}));
7381
+
7382
+ class TCloudUiTagComponent {
7383
+ constructor() {
7384
+ this.size = input('md');
7385
+ this.color = input(TagColorsEnum$1['primary-500']);
7386
+ this.variant = input('filled');
7387
+ this.shape = input('rectangle');
7388
+ this.fullWidth = input(false);
7389
+ }
7390
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7391
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TCloudUiTagComponent, isStandalone: true, selector: "tcloud-ui-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n [class.tcloud-ui-tag--sm]=\"size() === 'sm'\"\n [class.tcloud-ui-tag--md]=\"size() === 'md' || size() === 'regular'\"\n [class.tcloud-ui-tag--lg]=\"size() === 'lg'\"\n [class.tcloud-ui-tag--pill]=\"shape() === 'pill'\"\n [class.tcloud-ui-tag--full-width]=\"fullWidth()\"\n class=\"{{!color() && !variant() ? '' : 'tcloud-ui-tag tcloud-ui-tag--c-' + color() + '-' + variant()}}\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{display:block}.tcloud-ui-tag,.tcloud-ui-tag--lg,.tcloud-ui-tag--md,.tcloud-ui-tag--sm{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:default;display:inline-flex;align-items:center;justify-content:center;gap:var(--size-8);font-family:var(--f-family);font-size:var(--f-size-12);font-weight:var(--f-weight-500);padding:var(--size-2) var(--size-4);height:var(--size-22);max-height:var(--size-22);min-height:var(--size-22)}.tcloud-ui-tag--full-width{width:100%}.tcloud-ui-tag--sm{padding:var(--size-2) var(--size-4);height:var(--size-22);max-height:var(--size-22);min-height:var(--size-22)}.tcloud-ui-tag--md{padding:var(--size-4);height:var(--size-26);max-height:var(--size-26);min-height:var(--size-26)}.tcloud-ui-tag--lg{padding:var(--size-8);height:var(--size-34);max-height:var(--size-34);min-height:var(--size-34)}.tcloud-ui-tag--pill{border-radius:var(--bor-radius-pill)}.tcloud-ui-tag--c-neutral-50-filled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-100-filled{background-color:var(--c-neutral-100);border-color:var(--c-neutral-100);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-200-filled{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-300-filled{background-color:var(--c-neutral-300);border-color:var(--c-neutral-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-400-filled{background-color:var(--c-neutral-400);border-color:var(--c-neutral-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-500-filled{background-color:var(--c-neutral-500);border-color:var(--c-neutral-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-600-filled{background-color:var(--c-neutral-600);border-color:var(--c-neutral-600);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-700-filled,.tcloud-ui-tag--c-neutral-800-filled{background-color:var(--c-neutral-700);border-color:var(--c-neutral-700);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-300-filled{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-400-filled{background-color:var(--c-primary-400);border-color:var(--c-primary-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-500-filled{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-600-filled{background-color:var(--c-primary-600);border-color:var(--c-primary-600);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-700-filled{background-color:var(--c-primary-700);border-color:var(--c-primary-700);color:var(--c-neutral-50)}.tcloud-ui-tag--c-danger-300-filled{background-color:var(--c-danger-300);border-color:var(--c-danger-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-danger-400-filled{background-color:var(--c-danger-400);border-color:var(--c-danger-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-danger-500-filled{background-color:var(--c-danger-500);border-color:var(--c-danger-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-alert-300-filled{background-color:var(--c-alert-300);border-color:var(--c-alert-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-alert-400-filled{background-color:var(--c-alert-400);border-color:var(--c-alert-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-alert-500-filled{background-color:var(--c-alert-500);border-color:var(--c-alert-500);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-300-filled{background-color:var(--c-info-300);border-color:var(--c-info-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-400-filled{background-color:var(--c-info-400);border-color:var(--c-info-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-500-filled{background-color:var(--c-info-500);border-color:var(--c-info-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-success-300-filled{background-color:var(--c-success-300);border-color:var(--c-success-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-success-400-filled{background-color:var(--c-success-400);border-color:var(--c-success-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-success-500-filled{background-color:var(--c-success-500);border-color:var(--c-success-500);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-50-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-100-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-100);color:var(--c-neutral-100)}.tcloud-ui-tag--c-neutral-200-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-200);color:var(--c-neutral-200)}.tcloud-ui-tag--c-neutral-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-300)}.tcloud-ui-tag--c-neutral-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tcloud-ui-tag--c-neutral-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-500);color:var(--c-neutral-500)}.tcloud-ui-tag--c-neutral-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-600);color:var(--c-neutral-600)}.tcloud-ui-tag--c-neutral-700-outline,.tcloud-ui-tag--c-neutral-800-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-700);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-300);color:var(--c-primary-300)}.tcloud-ui-tag--c-primary-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-400);color:var(--c-primary-400)}.tcloud-ui-tag--c-primary-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-tag--c-primary-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-600);color:var(--c-primary-600)}.tcloud-ui-tag--c-primary-700-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-700);color:var(--c-primary-700)}.tcloud-ui-tag--c-danger-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-300);color:var(--c-danger-300)}.tcloud-ui-tag--c-danger-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-400);color:var(--c-danger-400)}.tcloud-ui-tag--c-danger-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-500);color:var(--c-danger-500)}.tcloud-ui-tag--c-alert-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-300);color:var(--c-alert-300)}.tcloud-ui-tag--c-alert-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-400);color:var(--c-alert-400)}.tcloud-ui-tag--c-alert-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-500);color:var(--c-alert-500)}.tcloud-ui-tag--c-info-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-300);color:var(--c-info-300)}.tcloud-ui-tag--c-info-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-400);color:var(--c-info-400)}.tcloud-ui-tag--c-info-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-500);color:var(--c-info-500)}.tcloud-ui-tag--c-success-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-300);color:var(--c-success-300)}.tcloud-ui-tag--c-success-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-400);color:var(--c-success-400)}.tcloud-ui-tag--c-success-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-500);color:var(--c-success-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
7392
+ }
7393
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTagComponent, decorators: [{
7394
+ type: Component,
7395
+ args: [{ selector: 'tcloud-ui-tag', imports: [
7396
+ CommonModule
7397
+ ], template: "<span\n [class.tcloud-ui-tag--sm]=\"size() === 'sm'\"\n [class.tcloud-ui-tag--md]=\"size() === 'md' || size() === 'regular'\"\n [class.tcloud-ui-tag--lg]=\"size() === 'lg'\"\n [class.tcloud-ui-tag--pill]=\"shape() === 'pill'\"\n [class.tcloud-ui-tag--full-width]=\"fullWidth()\"\n class=\"{{!color() && !variant() ? '' : 'tcloud-ui-tag tcloud-ui-tag--c-' + color() + '-' + variant()}}\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{display:block}.tcloud-ui-tag,.tcloud-ui-tag--lg,.tcloud-ui-tag--md,.tcloud-ui-tag--sm{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:default;display:inline-flex;align-items:center;justify-content:center;gap:var(--size-8);font-family:var(--f-family);font-size:var(--f-size-12);font-weight:var(--f-weight-500);padding:var(--size-2) var(--size-4);height:var(--size-22);max-height:var(--size-22);min-height:var(--size-22)}.tcloud-ui-tag--full-width{width:100%}.tcloud-ui-tag--sm{padding:var(--size-2) var(--size-4);height:var(--size-22);max-height:var(--size-22);min-height:var(--size-22)}.tcloud-ui-tag--md{padding:var(--size-4);height:var(--size-26);max-height:var(--size-26);min-height:var(--size-26)}.tcloud-ui-tag--lg{padding:var(--size-8);height:var(--size-34);max-height:var(--size-34);min-height:var(--size-34)}.tcloud-ui-tag--pill{border-radius:var(--bor-radius-pill)}.tcloud-ui-tag--c-neutral-50-filled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-100-filled{background-color:var(--c-neutral-100);border-color:var(--c-neutral-100);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-200-filled{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-300-filled{background-color:var(--c-neutral-300);border-color:var(--c-neutral-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-400-filled{background-color:var(--c-neutral-400);border-color:var(--c-neutral-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-500-filled{background-color:var(--c-neutral-500);border-color:var(--c-neutral-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-600-filled{background-color:var(--c-neutral-600);border-color:var(--c-neutral-600);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-700-filled,.tcloud-ui-tag--c-neutral-800-filled{background-color:var(--c-neutral-700);border-color:var(--c-neutral-700);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-300-filled{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-400-filled{background-color:var(--c-primary-400);border-color:var(--c-primary-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-500-filled{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-600-filled{background-color:var(--c-primary-600);border-color:var(--c-primary-600);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-700-filled{background-color:var(--c-primary-700);border-color:var(--c-primary-700);color:var(--c-neutral-50)}.tcloud-ui-tag--c-danger-300-filled{background-color:var(--c-danger-300);border-color:var(--c-danger-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-danger-400-filled{background-color:var(--c-danger-400);border-color:var(--c-danger-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-danger-500-filled{background-color:var(--c-danger-500);border-color:var(--c-danger-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-alert-300-filled{background-color:var(--c-alert-300);border-color:var(--c-alert-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-alert-400-filled{background-color:var(--c-alert-400);border-color:var(--c-alert-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-alert-500-filled{background-color:var(--c-alert-500);border-color:var(--c-alert-500);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-300-filled{background-color:var(--c-info-300);border-color:var(--c-info-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-400-filled{background-color:var(--c-info-400);border-color:var(--c-info-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-500-filled{background-color:var(--c-info-500);border-color:var(--c-info-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-success-300-filled{background-color:var(--c-success-300);border-color:var(--c-success-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-success-400-filled{background-color:var(--c-success-400);border-color:var(--c-success-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-success-500-filled{background-color:var(--c-success-500);border-color:var(--c-success-500);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-50-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-100-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-100);color:var(--c-neutral-100)}.tcloud-ui-tag--c-neutral-200-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-200);color:var(--c-neutral-200)}.tcloud-ui-tag--c-neutral-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-300)}.tcloud-ui-tag--c-neutral-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tcloud-ui-tag--c-neutral-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-500);color:var(--c-neutral-500)}.tcloud-ui-tag--c-neutral-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-600);color:var(--c-neutral-600)}.tcloud-ui-tag--c-neutral-700-outline,.tcloud-ui-tag--c-neutral-800-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-700);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-300);color:var(--c-primary-300)}.tcloud-ui-tag--c-primary-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-400);color:var(--c-primary-400)}.tcloud-ui-tag--c-primary-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-tag--c-primary-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-600);color:var(--c-primary-600)}.tcloud-ui-tag--c-primary-700-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-700);color:var(--c-primary-700)}.tcloud-ui-tag--c-danger-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-300);color:var(--c-danger-300)}.tcloud-ui-tag--c-danger-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-400);color:var(--c-danger-400)}.tcloud-ui-tag--c-danger-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-500);color:var(--c-danger-500)}.tcloud-ui-tag--c-alert-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-300);color:var(--c-alert-300)}.tcloud-ui-tag--c-alert-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-400);color:var(--c-alert-400)}.tcloud-ui-tag--c-alert-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-500);color:var(--c-alert-500)}.tcloud-ui-tag--c-info-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-300);color:var(--c-info-300)}.tcloud-ui-tag--c-info-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-400);color:var(--c-info-400)}.tcloud-ui-tag--c-info-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-500);color:var(--c-info-500)}.tcloud-ui-tag--c-success-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-300);color:var(--c-success-300)}.tcloud-ui-tag--c-success-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-400);color:var(--c-success-400)}.tcloud-ui-tag--c-success-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-500);color:var(--c-success-500)}\n"] }]
7398
+ }] });
7399
+
7400
+ class TCloudUiSubNavbarItemComponent {
7401
+ constructor() {
7402
+ this.isMenuExpanded = false;
7403
+ this.label = input.required();
7404
+ this.onClick = output();
7405
+ this.active = input(false);
7406
+ this.routerLink = input(null);
7407
+ this.queryParams = input(null);
7408
+ }
7409
+ handleClick(_ev) {
7410
+ this.onClick.emit(_ev);
7411
+ }
7412
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7413
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiSubNavbarItemComponent, isStandalone: true, selector: "tcloud-ui-sub-navbar-item", inputs: { isMenuExpanded: { classPropertyName: "isMenuExpanded", publicName: "isMenuExpanded", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<li\n class=\"tc-sub-navbar-item\"\n [class.tc-rev-submenu-expanded]=\"isMenuExpanded\">\n <a\n class=\"tc-sub-navbar-item-link\"\n [class.selected]=\"active()\"\n [routerLink]=\"routerLink()\"\n routerLinkActive=\"active\"\n [queryParams]=\"queryParams()\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [title]=\"label()\"\n (click)=\"handleClick($event)\">\n\n <div class=\"navbar-item-icon-container\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n @if (isMenuExpanded)\n {\n <div class=\"navbar-item-label\">\n {{label()}}\n </div>\n }\n </a>\n</li>\n", styles: [":host{display:block}.tc-sub-navbar-item{list-style:none;margin:0;padding:0}.tc-sub-navbar-item .tc-sub-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:focus{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-label{align-content:center;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);transition:all .2s ease;min-height:var(--size-36);max-height:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link:focus{color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link.selected .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link:active .navbar-item-icon-container{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link .navbar-item-icon-container{background-color:var(--c-neutral-200)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:hover .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:focus .navbar-item-label{color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-icon-container{background-color:var(--c-primary-300)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-label{color:var(--c-primary-500);font-weight:var(--f-weight-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
7414
+ }
7415
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarItemComponent, decorators: [{
7416
+ type: Component,
7417
+ args: [{ selector: 'tcloud-ui-sub-navbar-item', imports: [
7418
+ CommonModule,
7419
+ RouterModule,
7420
+ ], template: "<li\n class=\"tc-sub-navbar-item\"\n [class.tc-rev-submenu-expanded]=\"isMenuExpanded\">\n <a\n class=\"tc-sub-navbar-item-link\"\n [class.selected]=\"active()\"\n [routerLink]=\"routerLink()\"\n routerLinkActive=\"active\"\n [queryParams]=\"queryParams()\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [title]=\"label()\"\n (click)=\"handleClick($event)\">\n\n <div class=\"navbar-item-icon-container\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n @if (isMenuExpanded)\n {\n <div class=\"navbar-item-label\">\n {{label()}}\n </div>\n }\n </a>\n</li>\n", styles: [":host{display:block}.tc-sub-navbar-item{list-style:none;margin:0;padding:0}.tc-sub-navbar-item .tc-sub-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:focus{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-label{align-content:center;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);transition:all .2s ease;min-height:var(--size-36);max-height:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link:focus{color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link.selected .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link:active .navbar-item-icon-container{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link .navbar-item-icon-container{background-color:var(--c-neutral-200)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:hover .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:focus .navbar-item-label{color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-icon-container{background-color:var(--c-primary-300)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-label{color:var(--c-primary-500);font-weight:var(--f-weight-700)}\n"] }]
7421
+ }], propDecorators: { isMenuExpanded: [{
7422
+ type: Input
7423
+ }] } });
7424
+
7425
+ class TCloudUiSubNavbarComponent {
7426
+ constructor() {
7427
+ this.isMenuExpanded = signal(true);
7428
+ this.onSubMenuExpandChange = output();
7429
+ }
7430
+ ngAfterContentInit() {
7431
+ setTimeout(() => this.setExpandedMenuValueToChildrend(), 0);
7432
+ }
7433
+ handleExpandMenu() {
7434
+ this.isMenuExpanded.update((value) => !value);
7435
+ this.setExpandedMenuValueToChildrend();
7436
+ }
7437
+ setExpandedMenuValueToChildrend() {
7438
+ if (!this.subNavbarItems?.length)
7439
+ return;
7440
+ this.subNavbarItems.forEach((x) => {
7441
+ x.isMenuExpanded = this.isMenuExpanded();
7442
+ });
7443
+ this.onSubMenuExpandChange.emit(this.isMenuExpanded());
7444
+ }
7445
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7446
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiSubNavbarComponent, isStandalone: true, selector: "tcloud-ui-sub-navbar", outputs: { onSubMenuExpandChange: "onSubMenuExpandChange" }, queries: [{ propertyName: "subNavbarItems", predicate: TCloudUiSubNavbarItemComponent }], ngImport: i0, template: "<nav class=\"tc-sub-navbar\">\n <ul\n class=\"tc-sub-navbar-list\"\n [class.tc-rev-submenu-expanded]=\"isMenuExpanded()\"\n >\n <tcloud-ui-sub-navbar-item\n [isMenuExpanded]=\"isMenuExpanded()\"\n (click)=\"handleExpandMenu()\"\n label=\"Minimizar\"\n >\n <i\n class=\"fa-light\"\n [class.fa-arrow-left-to-line]=\"isMenuExpanded()\"\n [class.fa-arrow-right-to-line]=\"!isMenuExpanded()\"\n icon\n ></i>\n </tcloud-ui-sub-navbar-item>\n <ng-content></ng-content>\n </ul>\n</nav>\n", styles: [":host{display:block;height:100%}.tc-sub-navbar{height:100%;margin:var(--size-0);padding:var(--size-0)}.tc-sub-navbar .tc-sub-navbar-list{background-color:var(--c-neutral-50);color:var(--c-neutral-700);box-shadow:var(--shadow-xs);border-radius:var(--bor-radius-8);display:flex;flex-direction:column;gap:var(--size-8);height:100%;list-style:none;margin:var(--size-0);overflow:hidden auto;padding:var(--size-8);width:var(--size-52)}.tc-sub-navbar .tc-sub-navbar-list::-webkit-scrollbar{display:none}.tc-sub-navbar .tc-sub-navbar-list.tc-rev-submenu-expanded{width:14.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TCloudUiSubNavbarItemComponent, selector: "tcloud-ui-sub-navbar-item", inputs: ["isMenuExpanded", "label", "active", "routerLink", "queryParams"], outputs: ["onClick"] }] }); }
7447
+ }
7448
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarComponent, decorators: [{
7449
+ type: Component,
7450
+ args: [{ selector: 'tcloud-ui-sub-navbar', imports: [
7451
+ CommonModule,
7452
+ TCloudUiSubNavbarItemComponent,
7453
+ ], template: "<nav class=\"tc-sub-navbar\">\n <ul\n class=\"tc-sub-navbar-list\"\n [class.tc-rev-submenu-expanded]=\"isMenuExpanded()\"\n >\n <tcloud-ui-sub-navbar-item\n [isMenuExpanded]=\"isMenuExpanded()\"\n (click)=\"handleExpandMenu()\"\n label=\"Minimizar\"\n >\n <i\n class=\"fa-light\"\n [class.fa-arrow-left-to-line]=\"isMenuExpanded()\"\n [class.fa-arrow-right-to-line]=\"!isMenuExpanded()\"\n icon\n ></i>\n </tcloud-ui-sub-navbar-item>\n <ng-content></ng-content>\n </ul>\n</nav>\n", styles: [":host{display:block;height:100%}.tc-sub-navbar{height:100%;margin:var(--size-0);padding:var(--size-0)}.tc-sub-navbar .tc-sub-navbar-list{background-color:var(--c-neutral-50);color:var(--c-neutral-700);box-shadow:var(--shadow-xs);border-radius:var(--bor-radius-8);display:flex;flex-direction:column;gap:var(--size-8);height:100%;list-style:none;margin:var(--size-0);overflow:hidden auto;padding:var(--size-8);width:var(--size-52)}.tc-sub-navbar .tc-sub-navbar-list::-webkit-scrollbar{display:none}.tc-sub-navbar .tc-sub-navbar-list.tc-rev-submenu-expanded{width:14.5rem}\n"] }]
7454
+ }], propDecorators: { subNavbarItems: [{
7455
+ type: ContentChildren,
7456
+ args: [TCloudUiSubNavbarItemComponent]
7457
+ }] } });
7458
+
7459
+ class TCloudUiTabGroupComponent {
7460
+ constructor() {
7461
+ this.isCarouselOverflowed = false;
7462
+ }
7463
+ onResize() {
7464
+ this.checkCarouselOverflow();
7465
+ }
7466
+ ngOnInit() {
7467
+ this.checkCarouselOverflow();
7468
+ }
7469
+ checkCarouselOverflow() {
7470
+ setTimeout(() => {
7471
+ const el = this.tabGroupCarousel?.nativeElement;
7472
+ this.isCarouselOverflowed = !!el && el.scrollWidth > el.clientWidth;
7473
+ });
7474
+ }
7475
+ scrollTabsCarousel(direction) {
7476
+ const el = this.tabGroupCarousel?.nativeElement;
7477
+ if (!el)
7478
+ return;
7479
+ const scrollAmount = 200;
7480
+ if (direction === 'left') {
7481
+ el.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
7482
+ }
7483
+ else {
7484
+ el.scrollBy({ left: scrollAmount, behavior: 'smooth' });
7485
+ }
7486
+ }
7487
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7488
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiTabGroupComponent, isStandalone: true, selector: "tcloud-ui-tab-group", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabGroupCarousel", first: true, predicate: ["tabGroupCarousel"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tcloud-ui-tab-item carousel-arrow left\"\n (click)=\"this.scrollTabsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n class=\"tcloud-ui-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tcloud-ui-tab-item carousel-arrow right\"\n (click)=\"this.scrollTabsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tcloud-ui-tab-item carousel-arrow left\"\n (click)=\"scrollProductsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n #productsCarousel\n class=\"products-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\">\n @for (productName of topologiesData.availableProductsNames(); track productName)\n {\n <button\n class=\"tcloud-ui-tab-item\"\n [class.active]=\"filter().product === productName\"\n (click)=\"handleChangeTopologiesByProduct(productName)\">\n {{ productName | topologyProduct }}\n </button>\n }\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tcloud-ui-tab-item carousel-arrow right\"\n (click)=\"scrollProductsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div> -->\n", styles: [":host{display:block}.tcloud-ui-tab-group{position:relative;height:var(--size-40);width:100%}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel{display:flex;gap:var(--size-8);height:var(--size-40);left:0;margin:0;overflow:hidden;position:absolute;scroll-behavior:smooth;top:0;width:calc(100% - 6.25rem);z-index:1}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel.full-width{width:100%}.tcloud-ui-tab-group .carousel-arrow{background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;font-size:var(--f-size-14);font-weight:600;height:var(--size-40);line-height:var(--l-height-20);padding:0;text-wrap:nowrap;transition:all .2s ease;width:var(--size-40)}.tcloud-ui-tab-group .carousel-arrow:hover,.tcloud-ui-tab-group .carousel-arrow:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-group .carousel-arrow:active,.tcloud-ui-tab-group .carousel-arrow.selected,.tcloud-ui-tab-group .carousel-arrow.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:700}.tcloud-ui-tab-group .carousel-arrow:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400)}.tcloud-ui-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tcloud-ui-tab-group .carousel-arrow.right{position:absolute;right:0;z-index:1}@media(max-width:480px){:host{display:block;position:relative;height:var(--size-40)}:host .carousel-arrow{display:none}:host .tcloud-ui-tab-group-carousel{width:100%!important;overflow-x:auto!important;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap;padding-left:var(--size-40);padding-right:var(--size-40)}:host .tcloud-ui-tab-group-carousel.overflowed{left:auto!important;margin:0!important}:host .tcloud-ui-tab-group-carousel::-webkit-scrollbar{display:none}:host .tcloud-ui-tab-group{left:calc(-1 * var(--size-40));width:calc(100% + var(--size-80))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
7489
+ }
7490
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTabGroupComponent, decorators: [{
7491
+ type: Component,
7492
+ args: [{ selector: 'tcloud-ui-tab-group', imports: [CommonModule], template: "<div class=\"tcloud-ui-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tcloud-ui-tab-item carousel-arrow left\"\n (click)=\"this.scrollTabsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n class=\"tcloud-ui-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tcloud-ui-tab-item carousel-arrow right\"\n (click)=\"this.scrollTabsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tcloud-ui-tab-item carousel-arrow left\"\n (click)=\"scrollProductsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n #productsCarousel\n class=\"products-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\">\n @for (productName of topologiesData.availableProductsNames(); track productName)\n {\n <button\n class=\"tcloud-ui-tab-item\"\n [class.active]=\"filter().product === productName\"\n (click)=\"handleChangeTopologiesByProduct(productName)\">\n {{ productName | topologyProduct }}\n </button>\n }\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tcloud-ui-tab-item carousel-arrow right\"\n (click)=\"scrollProductsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div> -->\n", styles: [":host{display:block}.tcloud-ui-tab-group{position:relative;height:var(--size-40);width:100%}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel{display:flex;gap:var(--size-8);height:var(--size-40);left:0;margin:0;overflow:hidden;position:absolute;scroll-behavior:smooth;top:0;width:calc(100% - 6.25rem);z-index:1}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel.full-width{width:100%}.tcloud-ui-tab-group .carousel-arrow{background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;font-size:var(--f-size-14);font-weight:600;height:var(--size-40);line-height:var(--l-height-20);padding:0;text-wrap:nowrap;transition:all .2s ease;width:var(--size-40)}.tcloud-ui-tab-group .carousel-arrow:hover,.tcloud-ui-tab-group .carousel-arrow:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-group .carousel-arrow:active,.tcloud-ui-tab-group .carousel-arrow.selected,.tcloud-ui-tab-group .carousel-arrow.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:700}.tcloud-ui-tab-group .carousel-arrow:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400)}.tcloud-ui-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tcloud-ui-tab-group .carousel-arrow.right{position:absolute;right:0;z-index:1}@media(max-width:480px){:host{display:block;position:relative;height:var(--size-40)}:host .carousel-arrow{display:none}:host .tcloud-ui-tab-group-carousel{width:100%!important;overflow-x:auto!important;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap;padding-left:var(--size-40);padding-right:var(--size-40)}:host .tcloud-ui-tab-group-carousel.overflowed{left:auto!important;margin:0!important}:host .tcloud-ui-tab-group-carousel::-webkit-scrollbar{display:none}:host .tcloud-ui-tab-group{left:calc(-1 * var(--size-40));width:calc(100% + var(--size-80))}}\n"] }]
7493
+ }], propDecorators: { onResize: [{
7494
+ type: HostListener,
7495
+ args: ['window:resize']
7496
+ }], tabGroupCarousel: [{
7497
+ type: ViewChild,
7498
+ args: ['tabGroupCarousel']
7499
+ }] } });
7500
+
7501
+ class TCloudUiTabItemComponent {
7502
+ constructor() {
7503
+ this.onClick = output();
7504
+ this.active = input(false);
7505
+ this.url = input('');
7506
+ this.disabled = input(false);
7507
+ this.fullWidth = input(false);
7508
+ }
7509
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7510
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TCloudUiTabItemComponent, isStandalone: true, selector: "tcloud-ui-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<a\n *ngIf=\"this.url()\"\n class=\"tcloud-ui-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tcloud-ui-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n", styles: [":host{display:block}.tcloud-ui-tab-item,.tcloud-ui-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tcloud-ui-tab-item.full-width,.tcloud-ui-tab-item:link.full-width{width:100%}.tcloud-ui-tab-item:hover,.tcloud-ui-tab-item:focus,.tcloud-ui-tab-item:link:hover,.tcloud-ui-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-item:active,.tcloud-ui-tab-item.selected,.tcloud-ui-tab-item.active,.tcloud-ui-tab-item:link:active,.tcloud-ui-tab-item:link.selected,.tcloud-ui-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-item:disabled,.tcloud-ui-tab-item.disabled,.tcloud-ui-tab-item:link:disabled,.tcloud-ui-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}@media(max-width:480px){:host{display:contents}:host .tcloud-ui-tab-item{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
7511
+ }
7512
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTabItemComponent, decorators: [{
7513
+ type: Component,
7514
+ args: [{ selector: 'tcloud-ui-tab-item', imports: [
7515
+ CommonModule,
7516
+ RouterModule
7517
+ ], template: "<a\n *ngIf=\"this.url()\"\n class=\"tcloud-ui-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tcloud-ui-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n", styles: [":host{display:block}.tcloud-ui-tab-item,.tcloud-ui-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tcloud-ui-tab-item.full-width,.tcloud-ui-tab-item:link.full-width{width:100%}.tcloud-ui-tab-item:hover,.tcloud-ui-tab-item:focus,.tcloud-ui-tab-item:link:hover,.tcloud-ui-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-item:active,.tcloud-ui-tab-item.selected,.tcloud-ui-tab-item.active,.tcloud-ui-tab-item:link:active,.tcloud-ui-tab-item:link.selected,.tcloud-ui-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-item:disabled,.tcloud-ui-tab-item.disabled,.tcloud-ui-tab-item:link:disabled,.tcloud-ui-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}@media(max-width:480px){:host{display:contents}:host .tcloud-ui-tab-item{width:100%}}\n"] }]
7518
+ }] });
7519
+
7520
+ const COMPONENTS = [
7521
+ TCloudUiAccordionComponent,
7522
+ TCloudUiAccordionBodyComponent,
7523
+ TCloudUiAccordionTitleComponent,
7524
+ TCloudUiChoiceIssuesComponent,
7525
+ TCloudUiDataListComponent,
7526
+ TCloudUiDataListOptionComponent,
7527
+ TCloudUiDatepickerTimeComponent,
7528
+ TCloudUiDatepickerComponent,
7529
+ TCloudUiFiltersComponent,
7530
+ TCloudUiRangeDateComponent,
7531
+ TCloudUiInputSearchComponent,
7532
+ TCloudUiInputContainerComponent,
7533
+ TCloudUiLineStepCircleComponent,
7534
+ TCloudUiLinhaLogoComponent,
7535
+ TCloudUiModalComponent,
7536
+ TCloudUiModalBodyComponent,
7537
+ TCloudUiModalHeaderComponent,
7538
+ TCloudUiModalFooterComponent,
7539
+ TCloudUiMultiInputComponent,
7540
+ TCloudUiMultiSelectComponent,
7541
+ TCloudUiNotFoundComponent,
7542
+ TCloudUiNumberStepComponent,
7543
+ TCloudUiScrollBoxComponent,
7544
+ TCloudUiTabMenuComponent,
7545
+ TCloudUiTabHeadComponent,
7546
+ TCloudUiTabContentComponent,
7547
+ TCloudUiTabTitleComponent,
7548
+ TCloudUiTabSubtitleComponent,
7549
+ TCloudUiTableComponent,
7550
+ TCloudUiInputPasswordComponent,
7551
+ TCloudUiLabelTokenComponent,
7552
+ TCloudUiToastComponent,
7553
+ TCloudUiLineStepTitleComponent,
7554
+ TCloudUiLoadingComponent,
7555
+ TCloudUiCubesComponent,
7556
+ TCloudUiMultiplesValuesComponent,
7557
+ TCloudUiProgressBarComponent,
7558
+ TCloudUiReorderItemsComponent,
7559
+ TCloudUiWelcomeComponent,
7560
+ TCloudUiContainerComponent,
7561
+ TCloudUiContainerColComponent,
7562
+ TCloudUiContainerContentComponent,
7563
+ TCloudUiPaginationComponent,
7564
+ TCloudUiCardComponent,
7565
+ TCloudUiCardTitleComponent,
7566
+ TCloudUiCardAccordionComponent,
7567
+ TCloudUiDropdownComponent,
7568
+ TCloudUiDropdownMultiComponent,
7569
+ TCloudUiEmptyContentComponent,
7570
+ TCloudUiFaqComponent,
7571
+ TCloudUiMessageComponent,
7572
+ TCloudUiSkeletonLoadingComponent,
7573
+ TCloudUiTagComponent,
7574
+ TCloudUiSubNavbarComponent,
7575
+ TCloudUiSubNavbarItemComponent,
7576
+ TCloudUiTabGroupComponent,
7577
+ TCloudUiTabItemComponent
7578
+ ];
7579
+ const DIRECTIVES = [
7580
+ TCloudUiAlignDirective,
7581
+ TCloudUiCheckboxDirective,
7582
+ TCloudUiCurrencyDirective,
7583
+ TCloudUiElCopyDirective,
7584
+ TCloudUiHoverParentDirective,
7585
+ TCloudUiCheckAccessDirective,
7586
+ TCloudUiNgCheckAccessDirective,
7587
+ TCloudUiNgFeatureFlagsDirective,
7588
+ TCloudUiTooltipDirective,
7589
+ TCloudUiDigitOnlyDirective,
7590
+ TCloudUiHighLightDirective,
7591
+ TCloudUiIpMaskDirective,
7592
+ TCloudUiButtonDirective,
7593
+ TCloudUiFormDirective
7594
+ ];
7595
+ const PIPES = [
7596
+ ToTextPipe,
7597
+ BytesPipe,
7598
+ CNPJPipe,
7599
+ CPFPipe,
7600
+ DateBRPipe,
7601
+ MonthNamePipe,
7602
+ RespectivePipe,
7603
+ StatusInfoPipe,
7604
+ TCloudUiPaginationPipe
7605
+ ];
7606
+ class TCloudUiModule {
7607
+ static forRoot(config) {
7608
+ const providers = [
7609
+ // Configuração principal
7610
+ { provide: TCLOUD_UI_CONFIG, useValue: config?.data ?? {} },
7611
+ DatePipe,
7612
+ StatusInfoPipe
7613
+ ];
7614
+ // Adiciona serviços customizados se fornecidos
7615
+ if (config?.services?.userService) {
7616
+ providers.push({ provide: TCLOUD_UI_USER_SERVICE, useClass: config.services.userService });
7617
+ }
7618
+ if (config?.services?.layoutService) {
7619
+ providers.push({ provide: TCLOUD_UI_LAYOUT_SERVICE, useClass: config.services.layoutService });
7620
+ }
7621
+ if (config?.services?.viewportService) {
7622
+ providers.push({ provide: TCLOUD_UI_VIEWPORT_SERVICE, useClass: config.services.viewportService });
7623
+ }
7624
+ return {
7625
+ ngModule: TCloudUiModule,
7626
+ providers
7627
+ };
7628
+ }
7629
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
7630
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, imports: [TCloudUiAccordionComponent,
7631
+ TCloudUiAccordionBodyComponent,
7632
+ TCloudUiAccordionTitleComponent,
7633
+ TCloudUiChoiceIssuesComponent,
7634
+ TCloudUiDataListComponent,
7635
+ TCloudUiDataListOptionComponent,
7636
+ TCloudUiDatepickerTimeComponent,
7637
+ TCloudUiDatepickerComponent,
7638
+ TCloudUiFiltersComponent,
7639
+ TCloudUiRangeDateComponent,
7640
+ TCloudUiInputSearchComponent,
7641
+ TCloudUiInputContainerComponent,
7642
+ TCloudUiLineStepCircleComponent,
7643
+ TCloudUiLinhaLogoComponent,
7644
+ TCloudUiModalComponent,
6640
7645
  TCloudUiModalBodyComponent,
6641
7646
  TCloudUiModalHeaderComponent,
6642
7647
  TCloudUiModalFooterComponent,
@@ -6653,6 +7658,7 @@ class TCloudUiModule {
6653
7658
  TCloudUiTableComponent,
6654
7659
  TCloudUiInputPasswordComponent,
6655
7660
  TCloudUiLabelTokenComponent,
7661
+ TCloudUiToastComponent,
6656
7662
  TCloudUiLineStepTitleComponent,
6657
7663
  TCloudUiLoadingComponent,
6658
7664
  TCloudUiCubesComponent,
@@ -6663,7 +7669,22 @@ class TCloudUiModule {
6663
7669
  TCloudUiContainerComponent,
6664
7670
  TCloudUiContainerColComponent,
6665
7671
  TCloudUiContainerContentComponent,
6666
- TCloudUiPaginationComponent, TCloudUiAlignDirective,
7672
+ TCloudUiPaginationComponent,
7673
+ TCloudUiCardComponent,
7674
+ TCloudUiCardTitleComponent,
7675
+ TCloudUiCardAccordionComponent,
7676
+ TCloudUiDropdownComponent,
7677
+ TCloudUiDropdownMultiComponent,
7678
+ TCloudUiEmptyContentComponent,
7679
+ TCloudUiFaqComponent,
7680
+ TCloudUiMessageComponent,
7681
+ TCloudUiSkeletonLoadingComponent,
7682
+ TCloudUiTagComponent,
7683
+ TCloudUiSubNavbarComponent,
7684
+ TCloudUiSubNavbarItemComponent,
7685
+ TCloudUiTabGroupComponent,
7686
+ TCloudUiTabItemComponent, TCloudUiAlignDirective,
7687
+ TCloudUiCheckboxDirective,
6667
7688
  TCloudUiCurrencyDirective,
6668
7689
  TCloudUiElCopyDirective,
6669
7690
  TCloudUiHoverParentDirective,
@@ -6694,6 +7715,7 @@ class TCloudUiModule {
6694
7715
  TCloudUiFiltersComponent,
6695
7716
  TCloudUiRangeDateComponent,
6696
7717
  TCloudUiInputSearchComponent,
7718
+ TCloudUiInputContainerComponent,
6697
7719
  TCloudUiLineStepCircleComponent,
6698
7720
  TCloudUiLinhaLogoComponent,
6699
7721
  TCloudUiModalComponent,
@@ -6713,6 +7735,7 @@ class TCloudUiModule {
6713
7735
  TCloudUiTableComponent,
6714
7736
  TCloudUiInputPasswordComponent,
6715
7737
  TCloudUiLabelTokenComponent,
7738
+ TCloudUiToastComponent,
6716
7739
  TCloudUiLineStepTitleComponent,
6717
7740
  TCloudUiLoadingComponent,
6718
7741
  TCloudUiCubesComponent,
@@ -6723,7 +7746,22 @@ class TCloudUiModule {
6723
7746
  TCloudUiContainerComponent,
6724
7747
  TCloudUiContainerColComponent,
6725
7748
  TCloudUiContainerContentComponent,
6726
- TCloudUiPaginationComponent, TCloudUiAlignDirective,
7749
+ TCloudUiPaginationComponent,
7750
+ TCloudUiCardComponent,
7751
+ TCloudUiCardTitleComponent,
7752
+ TCloudUiCardAccordionComponent,
7753
+ TCloudUiDropdownComponent,
7754
+ TCloudUiDropdownMultiComponent,
7755
+ TCloudUiEmptyContentComponent,
7756
+ TCloudUiFaqComponent,
7757
+ TCloudUiMessageComponent,
7758
+ TCloudUiSkeletonLoadingComponent,
7759
+ TCloudUiTagComponent,
7760
+ TCloudUiSubNavbarComponent,
7761
+ TCloudUiSubNavbarItemComponent,
7762
+ TCloudUiTabGroupComponent,
7763
+ TCloudUiTabItemComponent, TCloudUiAlignDirective,
7764
+ TCloudUiCheckboxDirective,
6727
7765
  TCloudUiCurrencyDirective,
6728
7766
  TCloudUiElCopyDirective,
6729
7767
  TCloudUiHoverParentDirective,
@@ -6759,6 +7797,7 @@ class TCloudUiModule {
6759
7797
  TCloudUiFiltersComponent,
6760
7798
  TCloudUiRangeDateComponent,
6761
7799
  TCloudUiInputSearchComponent,
7800
+ TCloudUiInputContainerComponent,
6762
7801
  TCloudUiLineStepCircleComponent,
6763
7802
  TCloudUiLinhaLogoComponent,
6764
7803
  TCloudUiModalComponent,
@@ -6778,6 +7817,7 @@ class TCloudUiModule {
6778
7817
  TCloudUiTableComponent,
6779
7818
  TCloudUiInputPasswordComponent,
6780
7819
  TCloudUiLabelTokenComponent,
7820
+ TCloudUiToastComponent,
6781
7821
  TCloudUiLineStepTitleComponent,
6782
7822
  TCloudUiLoadingComponent,
6783
7823
  TCloudUiCubesComponent,
@@ -6785,7 +7825,19 @@ class TCloudUiModule {
6785
7825
  TCloudUiProgressBarComponent,
6786
7826
  TCloudUiReorderItemsComponent,
6787
7827
  TCloudUiWelcomeComponent,
6788
- TCloudUiPaginationComponent] }); }
7828
+ TCloudUiPaginationComponent,
7829
+ TCloudUiCardComponent,
7830
+ TCloudUiCardAccordionComponent,
7831
+ TCloudUiDropdownComponent,
7832
+ TCloudUiDropdownMultiComponent,
7833
+ TCloudUiFaqComponent,
7834
+ TCloudUiMessageComponent,
7835
+ TCloudUiSkeletonLoadingComponent,
7836
+ TCloudUiTagComponent,
7837
+ TCloudUiSubNavbarComponent,
7838
+ TCloudUiSubNavbarItemComponent,
7839
+ TCloudUiTabGroupComponent,
7840
+ TCloudUiTabItemComponent] }); }
6789
7841
  }
6790
7842
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, decorators: [{
6791
7843
  type: NgModule,
@@ -6855,6 +7907,68 @@ function provideTCloudUi(config) {
6855
7907
  return makeEnvironmentProviders(providers);
6856
7908
  }
6857
7909
 
7910
+ class TCloudUiBreadcrumbService {
7911
+ constructor() {
7912
+ this.breadcrumbsSubject = new BehaviorSubject([]);
7913
+ this.breadcrumbs$ = this.breadcrumbsSubject.asObservable();
7914
+ }
7915
+ setBreadcrumb(items) {
7916
+ this.breadcrumbsSubject.next(items);
7917
+ }
7918
+ addLevel(item) {
7919
+ const currentItems = this.breadcrumbsSubject.getValue();
7920
+ this.breadcrumbsSubject.next([...currentItems, item]);
7921
+ }
7922
+ removeLastLevel() {
7923
+ const currentItems = this.breadcrumbsSubject.getValue();
7924
+ if (currentItems.length > 0) {
7925
+ const newItems = [...currentItems];
7926
+ newItems.pop();
7927
+ this.breadcrumbsSubject.next(newItems);
7928
+ }
7929
+ }
7930
+ clear() {
7931
+ this.breadcrumbsSubject.next([]);
7932
+ }
7933
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
7934
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiBreadcrumbService, providedIn: 'root' }); }
7935
+ }
7936
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiBreadcrumbService, decorators: [{
7937
+ type: Injectable,
7938
+ args: [{
7939
+ providedIn: 'root',
7940
+ }]
7941
+ }], ctorParameters: () => [] });
7942
+
7943
+ class TCloudUiBreadcrumbComponent {
7944
+ constructor() {
7945
+ this.breadcrumbs = [];
7946
+ this.router = inject(Router);
7947
+ this.breadcrumbService = inject(TCloudUiBreadcrumbService);
7948
+ }
7949
+ ngOnInit() {
7950
+ this.breadcrumbService.breadcrumbs$.subscribe(items => this.breadcrumbs = items);
7951
+ }
7952
+ navigate(url, index) {
7953
+ if (url) {
7954
+ this.router.navigateByUrl(url);
7955
+ // Opcional: remover níveis do breadcrumb após o clicado
7956
+ if (index !== undefined && index < this.breadcrumbs.length - 1) {
7957
+ this.breadcrumbService.setBreadcrumb(this.breadcrumbs.slice(0, index + 1));
7958
+ }
7959
+ }
7960
+ }
7961
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7962
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiBreadcrumbComponent, isStandalone: true, selector: "tcloud-ui-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"tcloud-ui-breadcrumb\">\n <ol class=\"tcloud-ui-breadcrumb-list\">\n <!-- Link para o Dashboard -->\n <li class=\"tcloud-ui-breadcrumb-item\">\n <a [routerLink]=\"['/dashboard']\"><i class=\"fa-light fa-house-blank\"></i>\n @if (breadcrumbs.length > 0)\n {\n <i class=\"fa-light fa-chevron-right\"></i>\n }\n @else\n {\n P\u00E1gina inicial\n }\n </a>\n </li>\n\n <!-- Itera\u00E7\u00E3o sobre os itens do breadcrumb -->\n <li\n *ngFor=\"let breadcrumb of breadcrumbs; let i = index; let last = last\"\n class=\"tcloud-ui-breadcrumb-item\"\n [ngClass]=\"{ 'active': last }\"\n [attr.aria-current]=\"last ? 'page' : null\">\n <ng-container *ngIf=\"!last\">\n <a (click)=\"navigate(breadcrumb.url, i)\">{{ breadcrumb.label }}</a>\n <i class=\"fa-light fa-chevron-right\"></i>\n </ng-container>\n <ng-container *ngIf=\"last\">\n {{ breadcrumb.label }}\n </ng-container>\n </li>\n </ol>\n</nav>\n", styles: [":host{display:block}.tcloud-ui-breadcrumb-list{display:flex;list-style:none;padding:0;margin:0;margin-bottom:var(--size-24)}.tcloud-ui-breadcrumb-item{display:flex;align-items:center;color:var(--c-neutral-700);font-size:var(--f-size-14);font-family:var(--f-family)}.tcloud-ui-breadcrumb-item a{text-decoration:none;color:inherit;cursor:pointer}.tcloud-ui-breadcrumb-item a:hover{text-decoration:underline}.tcloud-ui-breadcrumb-item i{margin:0}.tcloud-ui-breadcrumb-item i.fa-chevron-right{margin:0 var(--size-12)}.tcloud-ui-breadcrumb-item.active{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
7963
+ }
7964
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiBreadcrumbComponent, decorators: [{
7965
+ type: Component,
7966
+ args: [{ selector: 'tcloud-ui-breadcrumb', imports: [
7967
+ CommonModule,
7968
+ RouterModule
7969
+ ], template: "<nav aria-label=\"breadcrumb\" class=\"tcloud-ui-breadcrumb\">\n <ol class=\"tcloud-ui-breadcrumb-list\">\n <!-- Link para o Dashboard -->\n <li class=\"tcloud-ui-breadcrumb-item\">\n <a [routerLink]=\"['/dashboard']\"><i class=\"fa-light fa-house-blank\"></i>\n @if (breadcrumbs.length > 0)\n {\n <i class=\"fa-light fa-chevron-right\"></i>\n }\n @else\n {\n P\u00E1gina inicial\n }\n </a>\n </li>\n\n <!-- Itera\u00E7\u00E3o sobre os itens do breadcrumb -->\n <li\n *ngFor=\"let breadcrumb of breadcrumbs; let i = index; let last = last\"\n class=\"tcloud-ui-breadcrumb-item\"\n [ngClass]=\"{ 'active': last }\"\n [attr.aria-current]=\"last ? 'page' : null\">\n <ng-container *ngIf=\"!last\">\n <a (click)=\"navigate(breadcrumb.url, i)\">{{ breadcrumb.label }}</a>\n <i class=\"fa-light fa-chevron-right\"></i>\n </ng-container>\n <ng-container *ngIf=\"last\">\n {{ breadcrumb.label }}\n </ng-container>\n </li>\n </ol>\n</nav>\n", styles: [":host{display:block}.tcloud-ui-breadcrumb-list{display:flex;list-style:none;padding:0;margin:0;margin-bottom:var(--size-24)}.tcloud-ui-breadcrumb-item{display:flex;align-items:center;color:var(--c-neutral-700);font-size:var(--f-size-14);font-family:var(--f-family)}.tcloud-ui-breadcrumb-item a{text-decoration:none;color:inherit;cursor:pointer}.tcloud-ui-breadcrumb-item a:hover{text-decoration:underline}.tcloud-ui-breadcrumb-item i{margin:0}.tcloud-ui-breadcrumb-item i.fa-chevron-right{margin:0 var(--size-12)}.tcloud-ui-breadcrumb-item.active{pointer-events:none}\n"] }]
7970
+ }], ctorParameters: () => [] });
7971
+
6858
7972
  class TCloudUiLoadingTransitionsService {
6859
7973
  constructor() {
6860
7974
  this.ID = 'tcloud-ui-loading-transitions';
@@ -6895,108 +8009,15 @@ class TCloudUiLoadingTransitionsService {
6895
8009
  body.appendChild(box);
6896
8010
  body.classList.add('tcloud-ui-body-loading-transitions');
6897
8011
  }
6898
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingTransitionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
6899
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingTransitionsService, providedIn: 'root' }); }
6900
- }
6901
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingTransitionsService, decorators: [{
6902
- type: Injectable,
6903
- args: [{
6904
- providedIn: 'root',
6905
- }]
6906
- }], ctorParameters: () => [] });
6907
-
6908
- class TCloudUiSubNavbarItemComponent {
6909
- constructor() {
6910
- this.label = input.required();
6911
- this.onClick = output();
6912
- this.active = input(false);
6913
- this.routerLink = input(null);
6914
- this.queryParams = input(null);
6915
- }
6916
- handleClick(_ev) {
6917
- this.onClick.emit(_ev);
6918
- }
6919
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6920
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiSubNavbarItemComponent, isStandalone: true, selector: "tcloud-ui-sub-navbar-item", inputs: { isMenuExpanded: { classPropertyName: "isMenuExpanded", publicName: "isMenuExpanded", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<li\n class=\"tc-sub-navbar-item\"\n [class.tc-rev-submenu-expanded]=\"isMenuExpanded\">\n <a\n class=\"tc-sub-navbar-item-link\"\n [class.selected]=\"active()\"\n [routerLink]=\"routerLink()\"\n routerLinkActive=\"active\"\n [queryParams]=\"queryParams()\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [title]=\"label()\"\n (click)=\"handleClick($event)\">\n\n <div class=\"navbar-item-icon-container\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n @if (isMenuExpanded)\n {\n <div class=\"navbar-item-label\">\n {{label()}}\n </div>\n }\n </a>\n</li>\n", styles: [":host{display:block}.tc-sub-navbar-item{list-style:none;margin:0;padding:0}.tc-sub-navbar-item .tc-sub-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:focus{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-label{align-content:center;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);transition:all .2s ease;min-height:var(--size-36);max-height:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link:focus{color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link.selected .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link:active .navbar-item-icon-container{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link .navbar-item-icon-container{background-color:var(--c-neutral-200)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:hover .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:focus .navbar-item-label{color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-icon-container{background-color:var(--c-primary-300)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-label{color:var(--c-primary-500);font-weight:var(--f-weight-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
6921
- }
6922
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarItemComponent, decorators: [{
6923
- type: Component,
6924
- args: [{ selector: 'tcloud-ui-sub-navbar-item', imports: [
6925
- CommonModule,
6926
- RouterModule,
6927
- ], template: "<li\n class=\"tc-sub-navbar-item\"\n [class.tc-rev-submenu-expanded]=\"isMenuExpanded\">\n <a\n class=\"tc-sub-navbar-item-link\"\n [class.selected]=\"active()\"\n [routerLink]=\"routerLink()\"\n routerLinkActive=\"active\"\n [queryParams]=\"queryParams()\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [title]=\"label()\"\n (click)=\"handleClick($event)\">\n\n <div class=\"navbar-item-icon-container\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n @if (isMenuExpanded)\n {\n <div class=\"navbar-item-label\">\n {{label()}}\n </div>\n }\n </a>\n</li>\n", styles: [":host{display:block}.tc-sub-navbar-item{list-style:none;margin:0;padding:0}.tc-sub-navbar-item .tc-sub-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:focus{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-label{align-content:center;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);transition:all .2s ease;min-height:var(--size-36);max-height:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link:focus{color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link.selected .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link:active .navbar-item-icon-container{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link .navbar-item-icon-container{background-color:var(--c-neutral-200)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:hover .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:focus .navbar-item-label{color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-icon-container{background-color:var(--c-primary-300)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-label{color:var(--c-primary-500);font-weight:var(--f-weight-700)}\n"] }]
6928
- }], propDecorators: { isMenuExpanded: [{
6929
- type: Input
6930
- }] } });
6931
-
6932
- class TCloudUiSubNavbarComponent {
6933
- constructor() {
6934
- this.isMenuExpanded = signal(true);
6935
- this.onSubMenuExpandChange = output();
6936
- }
6937
- ngAfterContentInit() {
6938
- setTimeout(() => this.setExpandedMenuValueToChildrend(), 0);
6939
- }
6940
- handleExpandMenu() {
6941
- this.isMenuExpanded.update((value) => !value);
6942
- this.setExpandedMenuValueToChildrend();
6943
- }
6944
- setExpandedMenuValueToChildrend() {
6945
- if (!this.subNavbarItems?.length)
6946
- return;
6947
- this.subNavbarItems.forEach((x) => {
6948
- x.isMenuExpanded = this.isMenuExpanded();
6949
- });
6950
- this.onSubMenuExpandChange.emit(this.isMenuExpanded());
6951
- }
6952
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6953
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiSubNavbarComponent, isStandalone: true, selector: "tc-rev-sub-navbar", outputs: { onSubMenuExpandChange: "onSubMenuExpandChange" }, queries: [{ propertyName: "subNavbarItems", predicate: TCloudUiSubNavbarItemComponent }], ngImport: i0, template: "<nav class=\"tc-sub-navbar\">\n <ul\n class=\"tc-sub-navbar-list\"\n [class.tc-rev-submenu-expanded]=\"isMenuExpanded()\"\n >\n <tcloud-ui-sub-navbar-item\n [isMenuExpanded]=\"isMenuExpanded()\"\n (click)=\"handleExpandMenu()\"\n label=\"Minimizar\"\n >\n <i\n class=\"fa-light\"\n [class.fa-arrow-left-to-line]=\"isMenuExpanded()\"\n [class.fa-arrow-right-to-line]=\"!isMenuExpanded()\"\n icon\n ></i>\n </tcloud-ui-sub-navbar-item>\n <ng-content></ng-content>\n </ul>\n</nav>\n", styles: [":host{display:block;height:100%}.tc-sub-navbar{height:100%;margin:var(--size-0);padding:var(--size-0)}.tc-sub-navbar .tc-sub-navbar-list{background-color:var(--c-neutral-50);color:var(--c-neutral-700);box-shadow:var(--shadow-xs);border-radius:var(--bor-radius-8);display:flex;flex-direction:column;gap:var(--size-8);height:100%;list-style:none;margin:var(--size-0);overflow:hidden auto;padding:var(--size-8);width:var(--size-52)}.tc-sub-navbar .tc-sub-navbar-list::-webkit-scrollbar{display:none}.tc-sub-navbar .tc-sub-navbar-list.tc-rev-submenu-expanded{width:14.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TCloudUiSubNavbarItemComponent, selector: "tcloud-ui-sub-navbar-item", inputs: ["isMenuExpanded", "label", "active", "routerLink", "queryParams"], outputs: ["onClick"] }] }); }
6954
- }
6955
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarComponent, decorators: [{
6956
- type: Component,
6957
- args: [{ selector: 'tc-rev-sub-navbar', imports: [
6958
- CommonModule,
6959
- TCloudUiSubNavbarItemComponent,
6960
- ], template: "<nav class=\"tc-sub-navbar\">\n <ul\n class=\"tc-sub-navbar-list\"\n [class.tc-rev-submenu-expanded]=\"isMenuExpanded()\"\n >\n <tcloud-ui-sub-navbar-item\n [isMenuExpanded]=\"isMenuExpanded()\"\n (click)=\"handleExpandMenu()\"\n label=\"Minimizar\"\n >\n <i\n class=\"fa-light\"\n [class.fa-arrow-left-to-line]=\"isMenuExpanded()\"\n [class.fa-arrow-right-to-line]=\"!isMenuExpanded()\"\n icon\n ></i>\n </tcloud-ui-sub-navbar-item>\n <ng-content></ng-content>\n </ul>\n</nav>\n", styles: [":host{display:block;height:100%}.tc-sub-navbar{height:100%;margin:var(--size-0);padding:var(--size-0)}.tc-sub-navbar .tc-sub-navbar-list{background-color:var(--c-neutral-50);color:var(--c-neutral-700);box-shadow:var(--shadow-xs);border-radius:var(--bor-radius-8);display:flex;flex-direction:column;gap:var(--size-8);height:100%;list-style:none;margin:var(--size-0);overflow:hidden auto;padding:var(--size-8);width:var(--size-52)}.tc-sub-navbar .tc-sub-navbar-list::-webkit-scrollbar{display:none}.tc-sub-navbar .tc-sub-navbar-list.tc-rev-submenu-expanded{width:14.5rem}\n"] }]
6961
- }], propDecorators: { subNavbarItems: [{
6962
- type: ContentChildren,
6963
- args: [TCloudUiSubNavbarItemComponent]
6964
- }] } });
6965
-
6966
- class TcRevButtonDirective {
6967
- constructor(_el) {
6968
- this._el = _el;
6969
- this.color = input('primary');
6970
- this.size = input('sm');
6971
- this.fullWidth = input(false);
6972
- this.tcRevButton = input('filled');
6973
- effect(() => {
6974
- this.setClasses();
6975
- });
6976
- }
6977
- setClasses() {
6978
- const tokenList = this._el.nativeElement.classList;
6979
- tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
6980
- let tcRevButton = this.tcRevButton();
6981
- if (!tcRevButton) {
6982
- tcRevButton = 'filled';
6983
- }
6984
- this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-btn--full-width') : null;
6985
- this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
6986
- this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevButton}`);
6987
- }
6988
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
6989
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevButtonDirective, isStandalone: true, selector: "button[tcRevButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, tcRevButton: { classPropertyName: "tcRevButton", publicName: "tcRevButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn" }, ngImport: i0 }); }
8012
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingTransitionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
8013
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingTransitionsService, providedIn: 'root' }); }
6990
8014
  }
6991
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevButtonDirective, decorators: [{
6992
- type: Directive,
8015
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingTransitionsService, decorators: [{
8016
+ type: Injectable,
6993
8017
  args: [{
6994
- selector: 'button[tcRevButton]',
6995
- host: {
6996
- class: 'tc-rev-btn'
6997
- }
8018
+ providedIn: 'root',
6998
8019
  }]
6999
- }], ctorParameters: () => [{ type: i0.ElementRef }] });
8020
+ }], ctorParameters: () => [] });
7000
8021
 
7001
8022
  class TcRevCalendarComponent {
7002
8023
  constructor() {
@@ -7124,94 +8145,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
7124
8145
  type: Input
7125
8146
  }] } });
7126
8147
 
7127
- class TcRevCardTitleComponent {
7128
- constructor() {
7129
- this.title = input.required();
7130
- }
7131
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7132
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TcRevCardTitleComponent, isStandalone: true, selector: "tc-rev-card-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-card-title c-neutral-700\">\n <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n\n <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tc-rev-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}}\n"] }); }
7133
- }
7134
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevCardTitleComponent, decorators: [{
7135
- type: Component,
7136
- args: [{ selector: 'tc-rev-card-title', imports: [], template: "<div class=\"tc-rev-card-title c-neutral-700\">\n <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n\n <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tc-rev-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}}\n"] }]
7137
- }] });
7138
-
7139
- class TCloudUiDeviceUtilsService {
7140
- constructor(rendererFactory) {
7141
- /*** Viewport mobile ***/
7142
- this.DESKTOP_MIN = 480;
7143
- this.widthScreen = signal(window.innerWidth);
7144
- // largura atual da viewport
7145
- this.width = computed(() => this.widthScreen());
7146
- this.isDesktop = computed(() => this.width() > this.DESKTOP_MIN);
7147
- this.isMobile = computed(() => this.width() <= this.DESKTOP_MIN);
7148
- this.menuHost = null;
7149
- this.embeddedView = null;
7150
- this.appRef = inject(ApplicationRef);
7151
- this.animationBuilder = inject(AnimationBuilder);
7152
- this.player = null;
7153
- this.renderer = rendererFactory.createRenderer(null, null);
7154
- window.addEventListener('resize', () => {
7155
- this.widthScreen.set(window.innerWidth);
7156
- });
7157
- }
7158
- openDropdownDevice(menuTemplate) {
7159
- this.menuHost = this.renderer.createElement('div');
7160
- this.renderer.setStyle(this.menuHost, 'position', 'fixed');
7161
- this.renderer.setStyle(this.menuHost, 'top', '0');
7162
- this.renderer.setStyle(this.menuHost, 'left', '0');
7163
- this.renderer.setStyle(this.menuHost, 'width', '100vw');
7164
- this.renderer.setStyle(this.menuHost, 'height', '100vh');
7165
- this.renderer.setStyle(this.menuHost, 'z-index', '9999');
7166
- this.renderer.setStyle(this.menuHost, 'opacity', '0');
7167
- this.renderer.appendChild(document.body, this.menuHost);
7168
- // Impede scroll da página externa enquanto o dropdown está aberto
7169
- this.renderer.setStyle(document.body, 'overflow', 'hidden');
7170
- this.renderer.setStyle(document.body, 'touch-action', 'none');
7171
- this.embeddedView = menuTemplate.createEmbeddedView({});
7172
- this.appRef.attachView(this.embeddedView);
7173
- this.embeddedView.rootNodes.forEach((node) => {
7174
- this.renderer.appendChild(this.menuHost, node);
7175
- });
7176
- const fadeIn = this.animationBuilder.build([
7177
- style({ opacity: 0 }),
7178
- animate('200ms ease', style({ opacity: 1 })),
7179
- ]);
7180
- this.player = fadeIn.create(this.menuHost);
7181
- this.player.play();
7182
- }
7183
- closeDropdownDevice() {
7184
- if (!this.menuHost)
7185
- return;
7186
- const fadeOut = this.animationBuilder.build([
7187
- style({ opacity: 1 }),
7188
- animate('200ms ease', style({ opacity: 0 })),
7189
- ]);
7190
- this.player = fadeOut.create(this.menuHost);
7191
- this.player.play();
7192
- this.player.onDone(() => {
7193
- this.renderer.removeStyle(document.body, 'overflow');
7194
- this.renderer.removeStyle(document.body, 'touch-action');
7195
- if (this.embeddedView) {
7196
- this.appRef.detachView(this.embeddedView);
7197
- this.embeddedView.destroy();
7198
- this.embeddedView = null;
7199
- }
7200
- this.renderer.removeChild(document.body, this.menuHost);
7201
- this.menuHost = null;
7202
- this.player = null;
7203
- });
7204
- }
7205
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
7206
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, providedIn: 'root' }); }
7207
- }
7208
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, decorators: [{
7209
- type: Injectable,
7210
- args: [{
7211
- providedIn: 'root',
7212
- }]
7213
- }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
7214
-
7215
8148
  class TcRevCardAccordionComponent {
7216
8149
  constructor() {
7217
8150
  this._viewPort = inject(TCloudUiDeviceUtilsService);
@@ -7284,6 +8217,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
7284
8217
  }]
7285
8218
  }], ctorParameters: () => [] });
7286
8219
 
8220
+ var DropdownSize;
8221
+ (function (DropdownSize) {
8222
+ DropdownSize["sm"] = "sm";
8223
+ DropdownSize["md"] = "md";
8224
+ DropdownSize["lg"] = "lg";
8225
+ })(DropdownSize || (DropdownSize = {}));
8226
+ class TcRevDropdownComponent {
8227
+ onDocumentClick(event) {
8228
+ if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
8229
+ this.isOpen = false;
8230
+ }
8231
+ }
8232
+ constructor(elementRef) {
8233
+ this.elementRef = elementRef;
8234
+ this._deviceService = inject(TCloudUiDeviceUtilsService);
8235
+ this.label = input(''); // Label que será exibida
8236
+ this.disabled = input(false); // Desabilita o dropdown
8237
+ this.options = input.required(); // Lista de opções no novo formato
8238
+ this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
8239
+ this.value = model(null); // Two-way binding para o valor selecionado
8240
+ this.size = input(DropdownSize.sm);
8241
+ this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
8242
+ this.optionSelected = output(); // Emissor para o valor selecionado
8243
+ this.selectedOption = signal(null); // Opção selecionada
8244
+ this.isOpen = false; // Controla se o dropdown está aberto
8245
+ this.dropdownSize = DropdownSize;
8246
+ this.isDesktop = this._deviceService.isDesktop;
8247
+ this.isMobile = this._deviceService.isMobile;
8248
+ }
8249
+ ngOnChanges(_simpleChanges) {
8250
+ // Atualiza a opção selecionada quando o valor pré-selecionado muda
8251
+ if (_simpleChanges['initialValue'] ||
8252
+ _simpleChanges['options'] ||
8253
+ _simpleChanges['value']) {
8254
+ const valueToUse = this.value() || this.initialValue();
8255
+ this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
8256
+ }
8257
+ }
8258
+ ngOnInit() {
8259
+ // Prioriza o valor do model, mas mantém compatibilidade com initialValue
8260
+ const valueToUse = this.value() || this.initialValue();
8261
+ const foundOption = this.options().find((option) => option.value === valueToUse) || null;
8262
+ this.selectedOption.set(foundOption);
8263
+ // Se não havia valor no model mas havia initialValue, sincroniza o model
8264
+ if (!this.value() && this.initialValue() && foundOption) {
8265
+ this.value.set(foundOption.value);
8266
+ }
8267
+ // Escuta mudanças no model e atualiza a opção selecionada
8268
+ this.value.subscribe((newValue) => {
8269
+ const option = this.options().find((opt) => opt.value === newValue) || null;
8270
+ if (this.selectedOption() !== option) {
8271
+ this.selectedOption.set(option);
8272
+ }
8273
+ });
8274
+ }
8275
+ toggleDropdown() {
8276
+ // Abertura do dropdown para mobile
8277
+ if (this.isMobile()) {
8278
+ this._deviceService.openDropdownDevice(this.menuTemplate);
8279
+ return;
8280
+ }
8281
+ this.isOpen = !this.isOpen;
8282
+ }
8283
+ selectOption(option) {
8284
+ this.selectedOption.set(option);
8285
+ this.value.set(option.value); // Atualiza o model com two-way binding
8286
+ this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
8287
+ // Fechamento dd dropdown para mobile
8288
+ if (this.isMobile()) {
8289
+ this._deviceService.closeDropdownDevice();
8290
+ return;
8291
+ }
8292
+ this.isOpen = false; // Fecha o dropdown
8293
+ }
8294
+ /**
8295
+ * Verifica se o texto de uma opção na lista está elipsado
8296
+ * @param text - Texto a ser verificado
8297
+ * @returns true se o texto estiver elipsado
8298
+ */
8299
+ isOptionEllipsed(text) {
8300
+ if (!text)
8301
+ return false;
8302
+ // Calcula a largura disponível para o texto nas opções da lista
8303
+ const menuElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown-menu');
8304
+ if (!menuElement) {
8305
+ // Se o menu não está aberto, usa a largura do dropdown
8306
+ const dropdownElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown');
8307
+ if (!dropdownElement)
8308
+ return false;
8309
+ const dropdownWidth = dropdownElement.clientWidth;
8310
+ const padding = 16; // 8px de cada lado do botão
8311
+ const iconSpace = 24; // Espaço do ícone de check quando selecionado
8312
+ const availableWidth = Math.max(50, dropdownWidth - padding - iconSpace);
8313
+ return isTextEllipsed(text, availableWidth);
8314
+ }
8315
+ // Largura do menu menos padding do item (16px total) e espaço do ícone de check (24px)
8316
+ const menuWidth = menuElement.clientWidth;
8317
+ const padding = 16; // 8px de cada lado do botão do item
8318
+ const iconSpace = 24; // Espaço do ícone de check quando selecionado
8319
+ const availableWidth = Math.max(50, menuWidth - padding - iconSpace);
8320
+ return isTextEllipsed(text, availableWidth);
8321
+ }
8322
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
8323
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownComponent, isStandalone: true, selector: "tc-rev-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b>{{ label() }}</b>\n }\n <span class=\"tc-rev-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n @for (option of options(); track option?.value) {\n <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tc-rev-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n <div class=\"tc-rev-dropdown-menu-section\">\n <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n @for (option of options(); track option?.value) {\n <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
8324
+ }
8325
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
8326
+ type: Component,
8327
+ args: [{ selector: 'tc-rev-dropdown', imports: [
8328
+ CommonModule,
8329
+ FormsModule,
8330
+ ReactiveFormsModule,
8331
+ TcRevTooltipDirective,
8332
+ TcRevIconButtonDirective
8333
+ ], template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b>{{ label() }}</b>\n }\n <span class=\"tc-rev-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n @for (option of options(); track option?.value) {\n <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tc-rev-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n <div class=\"tc-rev-dropdown-menu-section\">\n <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n @for (option of options(); track option?.value) {\n <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
8334
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
8335
+ type: ViewChild,
8336
+ args: ['menuTemplate']
8337
+ }], onDocumentClick: [{
8338
+ type: HostListener,
8339
+ args: ['document:click', ['$event']]
8340
+ }] } });
8341
+
7287
8342
  class TcRevSearchInputComponent {
7288
8343
  constructor() {
7289
8344
  this.searchTextChange = new EventEmitter();
@@ -7310,54 +8365,20 @@ class TcRevSearchInputComponent {
7310
8365
  }
7311
8366
  ngAfterViewInit() {
7312
8367
  if (this.autoFocus() && this.searchInput) {
7313
- this.searchInput().nativeElement.focus();
7314
- }
7315
- }
7316
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7317
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.18", type: TcRevSearchInputComponent, isStandalone: true, selector: "tc-rev-search-input", inputs: { searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTextChange: "searchTextChange", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<form class=\"tc-rev-search-input-container\">\n <input\n type=\"text\"\n class=\"tc-rev-search-input-control\"\n [formControl]=\"this.searchTextForm\"\n [placeholder]=\"this.placeholder()\"\n #searchInput\n />\n\n <button class=\"tc-rev-search-input-btn\">\n <i class=\"fa-light fa-magnifying-glass\"></i>\n </button>\n</form>\n\n\n", styles: [":host{display:block}.tc-rev-search-input-container{position:relative;max-height:var(--size-40);min-height:var(--size-40);height:var(--size-40);min-width:7.5rem}.tc-rev-search-input-container .tc-rev-search-input-control{border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);display:inline-block;font-family:var(--f-family);font-size:var(--f-size-14);line-height:var(--l-height-20);outline:none;height:var(--size-40);transition:.2s ease;padding:0 var(--size-16);position:absolute;top:0;left:0;padding-right:var(--size-44);width:100%;z-index:1}.tc-rev-search-input-container .tc-rev-search-input-control:hover,.tc-rev-search-input-container .tc-rev-search-input-control:focus{border-color:var(--c-primary-500)}.tc-rev-search-input-container .tc-rev-search-input-btn{cursor:pointer;display:block;position:absolute;right:4px;top:4px;z-index:2;background-color:var(--c-primary-500);border-radius:var(--bor-radius-rounded);border:none;width:var(--size-32);height:var(--size-32);color:var(--c-neutral-50);font-size:var(--f-size-16)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
7318
- }
7319
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevSearchInputComponent, decorators: [{
7320
- type: Component,
7321
- args: [{ selector: 'tc-rev-search-input', imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<form class=\"tc-rev-search-input-container\">\n <input\n type=\"text\"\n class=\"tc-rev-search-input-control\"\n [formControl]=\"this.searchTextForm\"\n [placeholder]=\"this.placeholder()\"\n #searchInput\n />\n\n <button class=\"tc-rev-search-input-btn\">\n <i class=\"fa-light fa-magnifying-glass\"></i>\n </button>\n</form>\n\n\n", styles: [":host{display:block}.tc-rev-search-input-container{position:relative;max-height:var(--size-40);min-height:var(--size-40);height:var(--size-40);min-width:7.5rem}.tc-rev-search-input-container .tc-rev-search-input-control{border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);display:inline-block;font-family:var(--f-family);font-size:var(--f-size-14);line-height:var(--l-height-20);outline:none;height:var(--size-40);transition:.2s ease;padding:0 var(--size-16);position:absolute;top:0;left:0;padding-right:var(--size-44);width:100%;z-index:1}.tc-rev-search-input-container .tc-rev-search-input-control:hover,.tc-rev-search-input-container .tc-rev-search-input-control:focus{border-color:var(--c-primary-500)}.tc-rev-search-input-container .tc-rev-search-input-btn{cursor:pointer;display:block;position:absolute;right:4px;top:4px;z-index:2;background-color:var(--c-primary-500);border-radius:var(--bor-radius-rounded);border:none;width:var(--size-32);height:var(--size-32);color:var(--c-neutral-50);font-size:var(--f-size-16)}\n"] }]
7322
- }], propDecorators: { searchText: [{
7323
- type: Input
7324
- }], searchTextChange: [{
7325
- type: Output
7326
- }] } });
7327
-
7328
- class TcRevIconButtonDirective {
7329
- constructor(_el) {
7330
- this._el = _el;
7331
- this.color = input('primary');
7332
- this.size = input('sm');
7333
- this.tcRevIconButton = input('filled');
7334
- effect(() => {
7335
- this.setClasses();
7336
- });
7337
- }
7338
- setClasses() {
7339
- const tokenList = this._el.nativeElement.classList;
7340
- tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
7341
- let tcRevIconButton = this.tcRevIconButton();
7342
- if (!tcRevIconButton) {
7343
- tcRevIconButton = 'filled';
8368
+ this.searchInput().nativeElement.focus();
7344
8369
  }
7345
- this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
7346
- this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}-icon`);
7347
- this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevIconButton}`);
7348
8370
  }
7349
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevIconButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
7350
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevIconButtonDirective, isStandalone: true, selector: "button[tcRevIconButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tcRevIconButton: { classPropertyName: "tcRevIconButton", publicName: "tcRevIconButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn tc-rev-btn-icon" }, ngImport: i0 }); }
8371
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8372
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.18", type: TcRevSearchInputComponent, isStandalone: true, selector: "tc-rev-search-input", inputs: { searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTextChange: "searchTextChange", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<form class=\"tc-rev-search-input-container\">\n <input\n type=\"text\"\n class=\"tc-rev-search-input-control\"\n [formControl]=\"this.searchTextForm\"\n [placeholder]=\"this.placeholder()\"\n #searchInput\n />\n\n <button class=\"tc-rev-search-input-btn\">\n <i class=\"fa-light fa-magnifying-glass\"></i>\n </button>\n</form>\n\n\n", styles: [":host{display:block}.tc-rev-search-input-container{position:relative;max-height:var(--size-40);min-height:var(--size-40);height:var(--size-40);min-width:7.5rem}.tc-rev-search-input-container .tc-rev-search-input-control{border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);display:inline-block;font-family:var(--f-family);font-size:var(--f-size-14);line-height:var(--l-height-20);outline:none;height:var(--size-40);transition:.2s ease;padding:0 var(--size-16);position:absolute;top:0;left:0;padding-right:var(--size-44);width:100%;z-index:1}.tc-rev-search-input-container .tc-rev-search-input-control:hover,.tc-rev-search-input-container .tc-rev-search-input-control:focus{border-color:var(--c-primary-500)}.tc-rev-search-input-container .tc-rev-search-input-btn{cursor:pointer;display:block;position:absolute;right:4px;top:4px;z-index:2;background-color:var(--c-primary-500);border-radius:var(--bor-radius-rounded);border:none;width:var(--size-32);height:var(--size-32);color:var(--c-neutral-50);font-size:var(--f-size-16)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
7351
8373
  }
7352
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevIconButtonDirective, decorators: [{
7353
- type: Directive,
7354
- args: [{
7355
- selector: 'button[tcRevIconButton]',
7356
- host: {
7357
- class: 'tc-rev-btn tc-rev-btn-icon'
7358
- }
7359
- }]
7360
- }], ctorParameters: () => [{ type: i0.ElementRef }] });
8374
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevSearchInputComponent, decorators: [{
8375
+ type: Component,
8376
+ args: [{ selector: 'tc-rev-search-input', imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<form class=\"tc-rev-search-input-container\">\n <input\n type=\"text\"\n class=\"tc-rev-search-input-control\"\n [formControl]=\"this.searchTextForm\"\n [placeholder]=\"this.placeholder()\"\n #searchInput\n />\n\n <button class=\"tc-rev-search-input-btn\">\n <i class=\"fa-light fa-magnifying-glass\"></i>\n </button>\n</form>\n\n\n", styles: [":host{display:block}.tc-rev-search-input-container{position:relative;max-height:var(--size-40);min-height:var(--size-40);height:var(--size-40);min-width:7.5rem}.tc-rev-search-input-container .tc-rev-search-input-control{border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);display:inline-block;font-family:var(--f-family);font-size:var(--f-size-14);line-height:var(--l-height-20);outline:none;height:var(--size-40);transition:.2s ease;padding:0 var(--size-16);position:absolute;top:0;left:0;padding-right:var(--size-44);width:100%;z-index:1}.tc-rev-search-input-container .tc-rev-search-input-control:hover,.tc-rev-search-input-container .tc-rev-search-input-control:focus{border-color:var(--c-primary-500)}.tc-rev-search-input-container .tc-rev-search-input-btn{cursor:pointer;display:block;position:absolute;right:4px;top:4px;z-index:2;background-color:var(--c-primary-500);border-radius:var(--bor-radius-rounded);border:none;width:var(--size-32);height:var(--size-32);color:var(--c-neutral-50);font-size:var(--f-size-16)}\n"] }]
8377
+ }], propDecorators: { searchText: [{
8378
+ type: Input
8379
+ }], searchTextChange: [{
8380
+ type: Output
8381
+ }] } });
7361
8382
 
7362
8383
  var DropdownGroupedSize;
7363
8384
  (function (DropdownGroupedSize) {
@@ -7505,97 +8526,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
7505
8526
  args: ['document:click', ['$event']]
7506
8527
  }] } });
7507
8528
 
7508
- class TcRevDropdownSubMenuComponent {
7509
- constructor() {
7510
- this.items = input.required();
7511
- this.position = input('right');
7512
- this.parentOffsetTop = input.required();
7513
- this.selectedOption = input();
7514
- this.onOptionSelected = output();
7515
- }
7516
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7517
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownSubMenuComponent, isStandalone: true, selector: "tc-rev-dropdown-sub-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, parentOffsetTop: { classPropertyName: "parentOffsetTop", publicName: "parentOffsetTop", isSignal: true, isRequired: true, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionSelected: "onOptionSelected" }, ngImport: i0, template: "<ul\n class=\"sub-menu\"\n [ngClass]=\"this.position()\"\n [style.top.px]=\"this.parentOffsetTop()\">\n @for (item of this.items(); track item.value)\n {\n <li\n class=\"sub-menu-item\"\n [class.selected]=\"this.selectedOption()?.value === item.value\"\n (click)=\"this.onOptionSelected.emit(item)\">\n {{ item.displayValue }}\n @if (this.selectedOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n @if (item.children?.length)\n {\n <tc-rev-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"this.position()\"\n [parentOffsetTop]=\"0\"\n [selectedOption]=\"this.selectedOption()\">\n </tc-rev-dropdown-sub-menu>\n }\n </li>\n }\n</ul>\n", styles: [".sub-menu{background-color:var(--c-neutral-50);box-shadow:var(--shadow-md);list-style:none;max-height:15.625rem;min-width:160px;overflow-y:auto;padding:0;position:absolute;margin:0;z-index:1001}.sub-menu.right{left:100%}.sub-menu.left{right:100%}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: TcRevDropdownSubMenuComponent, selector: "tc-rev-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
7518
- }
7519
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownSubMenuComponent, decorators: [{
7520
- type: Component,
7521
- args: [{ selector: 'tc-rev-dropdown-sub-menu', imports: [CommonModule], template: "<ul\n class=\"sub-menu\"\n [ngClass]=\"this.position()\"\n [style.top.px]=\"this.parentOffsetTop()\">\n @for (item of this.items(); track item.value)\n {\n <li\n class=\"sub-menu-item\"\n [class.selected]=\"this.selectedOption()?.value === item.value\"\n (click)=\"this.onOptionSelected.emit(item)\">\n {{ item.displayValue }}\n @if (this.selectedOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n @if (item.children?.length)\n {\n <tc-rev-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"this.position()\"\n [parentOffsetTop]=\"0\"\n [selectedOption]=\"this.selectedOption()\">\n </tc-rev-dropdown-sub-menu>\n }\n </li>\n }\n</ul>\n", styles: [".sub-menu{background-color:var(--c-neutral-50);box-shadow:var(--shadow-md);list-style:none;max-height:15.625rem;min-width:160px;overflow-y:auto;padding:0;position:absolute;margin:0;z-index:1001}.sub-menu.right{left:100%}.sub-menu.left{right:100%}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
7522
- }] });
7523
-
7524
- var MultiLevelDropdownSize;
7525
- (function (MultiLevelDropdownSize) {
7526
- MultiLevelDropdownSize["sm"] = "sm";
7527
- MultiLevelDropdownSize["md"] = "md";
7528
- MultiLevelDropdownSize["lg"] = "lg";
7529
- })(MultiLevelDropdownSize || (MultiLevelDropdownSize = {}));
7530
- class TcRevDropdownMultiLevelComponent {
7531
- onDocumentClick(event) {
7532
- if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
7533
- this.isOpen = false;
7534
- }
7535
- }
7536
- constructor(elementRef) {
7537
- this.elementRef = elementRef;
7538
- this.dropdownSize = MultiLevelDropdownSize;
7539
- this.menu = input.required();
7540
- this.subMenuPosition = input('right');
7541
- this.disabled = input(false);
7542
- this.size = input(MultiLevelDropdownSize.sm);
7543
- this.initialValue = input(null); // Valor pré-selecionado
7544
- this.optionSelected = output();
7545
- this.selectedOption = signal(null);
7546
- this.selectedParentOption = signal(null);
7547
- this.hoveredIndex = null;
7548
- this.isOpen = false;
7549
- }
7550
- ngOnChanges(_simpleChanges) {
7551
- // Atualiza a opção selecionada quando o valor pré-selecionado muda
7552
- if (_simpleChanges['initialValue'] || _simpleChanges['menu']) {
7553
- this.selectedOption.set(null);
7554
- this.selectedParentOption.set(null);
7555
- }
7556
- }
7557
- getItemOffsetTop(index) {
7558
- if (!this.menuRoot)
7559
- return 0;
7560
- const items = this.menuRoot.nativeElement.querySelectorAll('.menu-item');
7561
- if (items && items[index]) {
7562
- return items[index].offsetTop;
7563
- }
7564
- return 0;
7565
- }
7566
- toggleDropdown() {
7567
- this.isOpen = !this.isOpen;
7568
- }
7569
- selectOption(option, parentOption) {
7570
- this.selectedOption.set(option);
7571
- this.selectedParentOption.set(parentOption);
7572
- this.optionSelected.emit({ option, parentOption }); // Emite apenas o valor da opção selecionada
7573
- // this.isOpen = false; // Fecha o dropdown
7574
- // this.hoveredIndex = null;
7575
- }
7576
- selectParentItem($event, option, parentOption) {
7577
- $event.stopPropagation();
7578
- if (parentOption?.children?.length)
7579
- return;
7580
- this.selectOption(option, parentOption);
7581
- }
7582
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiLevelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
7583
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownMultiLevelComponent, isStandalone: true, selector: "tc-rev-dropdown-multi-level", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, subMenuPosition: { classPropertyName: "subMenuPosition", publicName: "subMenuPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuRoot", first: true, predicate: ["menuRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tc-rev-dropdown-multi-level\">\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--dark-outline tc-rev-dropdown-toggle\"\n [class.tc-rev-btn--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-btn--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-btn--lg]=\"this.size() === dropdownSize.lg\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tc-rev-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li \n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"hoveredIndex = i\"\n (mouseleave)=\"hoveredIndex = null\"\n (click)=\"this.selectParentItem($event, item, item)\">\n {{ item.displayValue }}\n @if (this.selectedParentOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n }\n @if (item?.children?.length && hoveredIndex === i)\n {\n <tc-rev-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"subMenuPosition()\"\n [parentOffsetTop]=\"getItemOffsetTop(i)\"\n [selectedOption]=\"this.selectedOption()\"\n (onOptionSelected)=\"this.selectOption($event, item)\">\n </tc-rev-dropdown-sub-menu>\n }\n </li>\n }\n }\n\t</ul>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-multi-level{position:relative;display:inline-block}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tc-rev-dropdown-multi-level__menu-list{background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);box-shadow:var(--shadow-md);color:var(--c-neutral-700);left:0;list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;position:absolute;top:110%;width:100%;z-index:1000}.tc-rev-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TcRevDropdownSubMenuComponent, selector: "tc-rev-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }] }); }
7584
- }
7585
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiLevelComponent, decorators: [{
7586
- type: Component,
7587
- args: [{ selector: 'tc-rev-dropdown-multi-level', imports: [
7588
- CommonModule,
7589
- TcRevDropdownSubMenuComponent
7590
- ], template: "<div class=\"tc-rev-dropdown-multi-level\">\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--dark-outline tc-rev-dropdown-toggle\"\n [class.tc-rev-btn--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-btn--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-btn--lg]=\"this.size() === dropdownSize.lg\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tc-rev-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li \n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"hoveredIndex = i\"\n (mouseleave)=\"hoveredIndex = null\"\n (click)=\"this.selectParentItem($event, item, item)\">\n {{ item.displayValue }}\n @if (this.selectedParentOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n }\n @if (item?.children?.length && hoveredIndex === i)\n {\n <tc-rev-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"subMenuPosition()\"\n [parentOffsetTop]=\"getItemOffsetTop(i)\"\n [selectedOption]=\"this.selectedOption()\"\n (onOptionSelected)=\"this.selectOption($event, item)\">\n </tc-rev-dropdown-sub-menu>\n }\n </li>\n }\n }\n\t</ul>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-multi-level{position:relative;display:inline-block}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tc-rev-dropdown-multi-level__menu-list{background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);box-shadow:var(--shadow-md);color:var(--c-neutral-700);left:0;list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;position:absolute;top:110%;width:100%;z-index:1000}.tc-rev-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
7591
- }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
7592
- type: HostListener,
7593
- args: ['document:click', ['$event']]
7594
- }], menuRoot: [{
7595
- type: ViewChild,
7596
- args: ['menuRoot', { static: false }]
7597
- }] } });
7598
-
7599
8529
  var DropdownMultiSize;
7600
8530
  (function (DropdownMultiSize) {
7601
8531
  DropdownMultiSize["sm"] = "sm";
@@ -7712,231 +8642,66 @@ class TcRevDropdownMultiComponent {
7712
8642
  isAllSelected() {
7713
8643
  const enabledOptions = this.options().filter(option => !option.disabled);
7714
8644
  const selectedOptions = this.selectedOptions();
7715
- if (enabledOptions.length === 0)
7716
- return false;
7717
- return enabledOptions.every(option => selectedOptions.some(selected => selected.value === option.value));
7718
- }
7719
- isSomeSelected() {
7720
- const enabledOptions = this.options().filter(option => !option.disabled);
7721
- const selectedOptions = this.selectedOptions();
7722
- if (enabledOptions.length === 0 || selectedOptions.length === 0)
7723
- return false;
7724
- const selectedCount = enabledOptions.filter(option => selectedOptions.some(selected => selected.value === option.value)).length;
7725
- return selectedCount > 0 && selectedCount < enabledOptions.length;
7726
- }
7727
- toggleSelectAll(event) {
7728
- event.stopPropagation();
7729
- if (this.isAllSelected()) {
7730
- this.clearAll();
7731
- }
7732
- else {
7733
- this.selectAll();
7734
- }
7735
- }
7736
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
7737
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownMultiComponent, isStandalone: true, selector: "tc-rev-dropdown-multi", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tc-rev-dropdown-multi-toggle\"\n [class.tc-rev-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen\"\n class=\"tc-rev-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tc-rev-dropdown-multi-actions\">\n <label\n class=\"tc-rev-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tc-rev-dropdown-multi-select-all-text\">Todos</span>\n </label>\n </div>\n\n <ul class=\"tc-rev-dropdown-multi-options\">\n @for (option of options(); track option?.value)\n {\n <li class=\"tc-rev-dropdown-multi-menu-item\">\n <label\n class=\"tc-rev-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tc-rev-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: ["input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{position:initial;margin:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:after,input[type=checkbox].tc-rev-checkbox:before{content:\"\";position:initial;border-radius:initial;background:initial;z-index:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{height:initial;width:initial;left:initial;top:initial;margin:initial;border:initial}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:initial;height:initial;width:initial;margin:initial;z-index:initial;left:initial;top:initial;border:initial;border-width:initial;transform:initial}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{border-color:initial}input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--c-neutral-700);border-radius:2px;background:#fff;cursor:pointer;position:relative;outline:none;transition:border-color .2s,background .2s;display:inline-block;vertical-align:middle}input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:before{content:\"\";display:block;width:100%;height:100%;border-radius:2px;background:var(--c-neutral-50);transition:background .2s,border-color .2s;position:absolute;top:0;left:0;z-index:1}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{content:\"\";display:block;position:absolute;top:4px;left:2px;width:14px;height:10px;background:none;mask:none;-webkit-mask:none;pointer-events:none;z-index:2;transition:background .2s}input[type=checkbox].tc-rev-input-checkbox:checked,input[type=checkbox].tc-rev-checkbox:checked{border-color:var(--c-primary-500);background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{background:#fff;mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain;-webkit-mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain}input[type=checkbox].tc-rev-input-checkbox:disabled,input[type=checkbox].tc-rev-checkbox:disabled{border-color:var(--c-neutral-300);cursor:not-allowed}input[type=checkbox].tc-rev-input-checkbox:disabled:checked,input[type=checkbox].tc-rev-checkbox:disabled:checked{background:var(--c-neutral-300)}input[type=checkbox].tc-rev-input-checkbox:disabled:checked:before,input[type=checkbox].tc-rev-checkbox:disabled:checked:before{background:var(--c-neutral-300)}:host{display:inline-block}.tc-rev-dropdown-multi{position:relative;display:inline-block}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--md{height:var(--size-44)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label .tc-rev-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label .tc-rev-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-rev-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevCheckboxDirective, selector: "input[type=\"checkbox\"][tcRevCheckbox]" }] }); }
7738
- }
7739
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiComponent, decorators: [{
7740
- type: Component,
7741
- args: [{ selector: 'tc-rev-dropdown-multi', imports: [
7742
- CommonModule,
7743
- FormsModule,
7744
- ReactiveFormsModule,
7745
- TcRevCheckboxDirective
7746
- ], template: "<div\n class=\"tc-rev-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tc-rev-dropdown-multi-toggle\"\n [class.tc-rev-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen\"\n class=\"tc-rev-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tc-rev-dropdown-multi-actions\">\n <label\n class=\"tc-rev-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tc-rev-dropdown-multi-select-all-text\">Todos</span>\n </label>\n </div>\n\n <ul class=\"tc-rev-dropdown-multi-options\">\n @for (option of options(); track option?.value)\n {\n <li class=\"tc-rev-dropdown-multi-menu-item\">\n <label\n class=\"tc-rev-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tc-rev-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: ["input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{position:initial;margin:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:after,input[type=checkbox].tc-rev-checkbox:before{content:\"\";position:initial;border-radius:initial;background:initial;z-index:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{height:initial;width:initial;left:initial;top:initial;margin:initial;border:initial}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:initial;height:initial;width:initial;margin:initial;z-index:initial;left:initial;top:initial;border:initial;border-width:initial;transform:initial}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{border-color:initial}input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--c-neutral-700);border-radius:2px;background:#fff;cursor:pointer;position:relative;outline:none;transition:border-color .2s,background .2s;display:inline-block;vertical-align:middle}input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:before{content:\"\";display:block;width:100%;height:100%;border-radius:2px;background:var(--c-neutral-50);transition:background .2s,border-color .2s;position:absolute;top:0;left:0;z-index:1}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{content:\"\";display:block;position:absolute;top:4px;left:2px;width:14px;height:10px;background:none;mask:none;-webkit-mask:none;pointer-events:none;z-index:2;transition:background .2s}input[type=checkbox].tc-rev-input-checkbox:checked,input[type=checkbox].tc-rev-checkbox:checked{border-color:var(--c-primary-500);background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{background:#fff;mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain;-webkit-mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain}input[type=checkbox].tc-rev-input-checkbox:disabled,input[type=checkbox].tc-rev-checkbox:disabled{border-color:var(--c-neutral-300);cursor:not-allowed}input[type=checkbox].tc-rev-input-checkbox:disabled:checked,input[type=checkbox].tc-rev-checkbox:disabled:checked{background:var(--c-neutral-300)}input[type=checkbox].tc-rev-input-checkbox:disabled:checked:before,input[type=checkbox].tc-rev-checkbox:disabled:checked:before{background:var(--c-neutral-300)}:host{display:inline-block}.tc-rev-dropdown-multi{position:relative;display:inline-block}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--md{height:var(--size-44)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label .tc-rev-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label .tc-rev-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-rev-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
7747
- }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
7748
- type: HostListener,
7749
- args: ['document:click', ['$event']]
7750
- }] } });
7751
-
7752
- /**
7753
- * Verifica se um elemento de texto está elipsado (texto cortado com ...)
7754
- * @param element - O elemento HTML que contém o texto
7755
- * @returns true se o texto estiver elipsado, false caso contrário
7756
- */
7757
- function isElementTextEllipsed(element) {
7758
- if (!element)
7759
- return false;
7760
- // Verifica se o scrollWidth é maior que o clientWidth
7761
- // Isso indica que o texto está sendo cortado
7762
- return element.scrollWidth > element.clientWidth;
7763
- }
7764
- /**
7765
- * Verifica se um texto específico estaria elipsado baseado no texto fornecido
7766
- * @param text - O texto a ser verificado
7767
- * @param containerWidth - Largura do container (opcional, usa o padrão se não informado)
7768
- * @returns true se o texto seria elipsado
7769
- */
7770
- function isTextEllipsed(text, containerWidth) {
7771
- if (!text)
7772
- return false;
7773
- // Cria um elemento temporário para medir o texto
7774
- const tempElement = document.createElement('span');
7775
- tempElement.style.visibility = 'hidden';
7776
- tempElement.style.position = 'absolute';
7777
- tempElement.style.whiteSpace = 'nowrap';
7778
- tempElement.style.fontSize = '1rem'; // f-md
7779
- tempElement.style.fontWeight = '500'; // f-weight-500
7780
- tempElement.style.fontFamily = getComputedStyle(document.body).fontFamily;
7781
- tempElement.textContent = text;
7782
- document.body.appendChild(tempElement);
7783
- const textWidth = tempElement.scrollWidth;
7784
- // Calcula a largura máxima disponível: largura do container menos espaço do botão e margins
7785
- const maxWidth = containerWidth || 150; // ~150px considerando o botão de 24px + margens
7786
- document.body.removeChild(tempElement);
7787
- return textWidth > maxWidth;
7788
- }
7789
- // export class EllipsedTextHelper
7790
- // {
7791
- // public static isEllipsed(id: string): boolean
7792
- // {
7793
- // const element = document.querySelector<any>(`#${id}`);
7794
- // return element ? (element.offsetWidth < element.scrollWidth) : false;
7795
- // }
7796
- // /**
7797
- // *
7798
- // * @param _textField - Stands for the text you want to compare
7799
- // * @param _fontProperties - Text CSS properties (font-size & font-family)
7800
- // * @param _divId - divId you want to compare
7801
- // * @param _isEllipsed - is it Ellipsed? (optional)
7802
- // */
7803
- // public static calculate( _textField: string, _fontProperties: string, _divId: string, _isEllipsed: boolean = false, _whiteSpaceNoWrap = true): boolean
7804
- // {
7805
- // if (_isEllipsed)
7806
- // {
7807
- // return true;
7808
- // }
7809
- // const textDiv = document.getElementById(_divId);
7810
- // if (textDiv)
7811
- // {
7812
- // const widthText = this.textWidthCalc(_textField, _fontProperties, _whiteSpaceNoWrap);
7813
- // return widthText > textDiv.clientWidth;
7814
- // }
7815
- // return false
7816
- // }
7817
- // public static textWidthCalc(_text: string, _fontProperties: string, _whiteSpaceNoWrap: boolean): number
7818
- // {
7819
- // let tag = document.createElement('div');
7820
- // tag.style.position = 'absolute';
7821
- // tag.style.left = '-99in';
7822
- // tag.style.font = _fontProperties;
7823
- // tag.innerHTML = _text;
7824
- // if (_whiteSpaceNoWrap)
7825
- // {
7826
- // tag.style.whiteSpace = 'nowrap';
7827
- // }
7828
- // document.body.appendChild(tag);
7829
- // const result = tag.clientWidth;
7830
- // document.body.removeChild(tag);
7831
- // return result;
7832
- // }
7833
- // }
7834
-
7835
- class TcRevTooltipDirective {
7836
- constructor(_el, _renderer, _vcr) {
7837
- this._el = _el;
7838
- this._renderer = _renderer;
7839
- this._vcr = _vcr;
7840
- this.tcRevTooltip = input('');
7841
- this.position = input('top');
7842
- this.tooltipElement = null;
7843
- }
7844
- onMouseEnter() {
7845
- const tooltipText = this.tcRevTooltip();
7846
- if (this.isValidTooltipText(tooltipText)) {
7847
- this.showTooltip(tooltipText);
7848
- }
7849
- }
7850
- onMouseLeave() {
7851
- this.hideTooltip();
7852
- }
7853
- isValidTooltipText(text) {
7854
- return text && text.trim().length > 0;
8645
+ if (enabledOptions.length === 0)
8646
+ return false;
8647
+ return enabledOptions.every(option => selectedOptions.some(selected => selected.value === option.value));
7855
8648
  }
7856
- showTooltip(text) {
7857
- if (this.tooltipElement) {
7858
- this.hideTooltip();
7859
- }
7860
- // Create tooltip element
7861
- this.tooltipElement = this._renderer.createElement('div');
7862
- // Add text content
7863
- const textNode = this._renderer.createText(text);
7864
- this._renderer.appendChild(this.tooltipElement, textNode);
7865
- // Add CSS classes
7866
- this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip');
7867
- this._renderer.addClass(this.tooltipElement, `tc-rev-tooltip--${this.position()}`);
7868
- // Set initial styles
7869
- this._renderer.setStyle(this.tooltipElement, 'position', 'absolute');
7870
- this._renderer.setStyle(this.tooltipElement, 'z-index', '9999');
7871
- this._renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
7872
- // this._renderer.setStyle(this.tooltipElement, 'opacity', '0');
7873
- // Append to body
7874
- this._renderer.appendChild(document.body, this.tooltipElement);
7875
- // Position tooltip
7876
- this.positionTooltip();
7877
- // Show tooltip with animation
7878
- this._renderer.setStyle(this.tooltipElement, 'visibility', 'visible');
7879
- this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip--visible');
8649
+ isSomeSelected() {
8650
+ const enabledOptions = this.options().filter(option => !option.disabled);
8651
+ const selectedOptions = this.selectedOptions();
8652
+ if (enabledOptions.length === 0 || selectedOptions.length === 0)
8653
+ return false;
8654
+ const selectedCount = enabledOptions.filter(option => selectedOptions.some(selected => selected.value === option.value)).length;
8655
+ return selectedCount > 0 && selectedCount < enabledOptions.length;
7880
8656
  }
7881
- hideTooltip() {
7882
- if (this.tooltipElement) {
7883
- this._renderer.removeChild(document.body, this.tooltipElement);
7884
- this.tooltipElement = null;
8657
+ toggleSelectAll(event) {
8658
+ event.stopPropagation();
8659
+ if (this.isAllSelected()) {
8660
+ this.clearAll();
7885
8661
  }
7886
- }
7887
- positionTooltip() {
7888
- if (!this.tooltipElement)
7889
- return;
7890
- const hostRect = this._el.nativeElement.getBoundingClientRect();
7891
- const tooltipRect = this.tooltipElement.getBoundingClientRect();
7892
- const position = this.position();
7893
- let top = 0;
7894
- let left = 0;
7895
- switch (position) {
7896
- case 'top':
7897
- top = hostRect.top + window.scrollY - tooltipRect.height - 8;
7898
- left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
7899
- break;
7900
- case 'bottom':
7901
- top = hostRect.bottom + window.scrollY + 8;
7902
- left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
7903
- break;
7904
- case 'left':
7905
- top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
7906
- left = hostRect.left + window.scrollX - tooltipRect.width - 8;
7907
- break;
7908
- case 'right':
7909
- top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
7910
- left = hostRect.right + window.scrollX + 8;
7911
- break;
8662
+ else {
8663
+ this.selectAll();
7912
8664
  }
7913
- this._renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
7914
- this._renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
7915
8665
  }
7916
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
7917
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevTooltipDirective, isStandalone: true, selector: "[tcRevTooltip]", inputs: { tcRevTooltip: { classPropertyName: "tcRevTooltip", publicName: "tcRevTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
8666
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
8667
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownMultiComponent, isStandalone: true, selector: "tc-rev-dropdown-multi", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tc-rev-dropdown-multi-toggle\"\n [class.tc-rev-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen\"\n class=\"tc-rev-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tc-rev-dropdown-multi-actions\">\n <label\n class=\"tc-rev-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tc-rev-dropdown-multi-select-all-text\">Todos</span>\n </label>\n </div>\n\n <ul class=\"tc-rev-dropdown-multi-options\">\n @for (option of options(); track option?.value)\n {\n <li class=\"tc-rev-dropdown-multi-menu-item\">\n <label\n class=\"tc-rev-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tc-rev-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: ["input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{position:initial;margin:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:after,input[type=checkbox].tc-rev-checkbox:before{content:\"\";position:initial;border-radius:initial;background:initial;z-index:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{height:initial;width:initial;left:initial;top:initial;margin:initial;border:initial}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:initial;height:initial;width:initial;margin:initial;z-index:initial;left:initial;top:initial;border:initial;border-width:initial;transform:initial}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{border-color:initial}input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--c-neutral-700);border-radius:2px;background:#fff;cursor:pointer;position:relative;outline:none;transition:border-color .2s,background .2s;display:inline-block;vertical-align:middle}input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:before{content:\"\";display:block;width:100%;height:100%;border-radius:2px;background:var(--c-neutral-50);transition:background .2s,border-color .2s;position:absolute;top:0;left:0;z-index:1}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{content:\"\";display:block;position:absolute;top:4px;left:2px;width:14px;height:10px;background:none;mask:none;-webkit-mask:none;pointer-events:none;z-index:2;transition:background .2s}input[type=checkbox].tc-rev-input-checkbox:checked,input[type=checkbox].tc-rev-checkbox:checked{border-color:var(--c-primary-500);background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{background:#fff;mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain;-webkit-mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain}input[type=checkbox].tc-rev-input-checkbox:disabled,input[type=checkbox].tc-rev-checkbox:disabled{border-color:var(--c-neutral-300);cursor:not-allowed}input[type=checkbox].tc-rev-input-checkbox:disabled:checked,input[type=checkbox].tc-rev-checkbox:disabled:checked{background:var(--c-neutral-300)}input[type=checkbox].tc-rev-input-checkbox:disabled:checked:before,input[type=checkbox].tc-rev-checkbox:disabled:checked:before{background:var(--c-neutral-300)}:host{display:inline-block}.tc-rev-dropdown-multi{position:relative;display:inline-block}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--md{height:var(--size-44)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label .tc-rev-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label .tc-rev-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-rev-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevCheckboxDirective, selector: "input[type=\"checkbox\"][tcRevCheckbox]" }] }); }
7918
8668
  }
7919
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevTooltipDirective, decorators: [{
7920
- type: Directive,
7921
- args: [{
7922
- selector: '[tcRevTooltip]',
7923
- standalone: true
7924
- }]
7925
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { onMouseEnter: [{
7926
- type: HostListener,
7927
- args: ['mouseenter']
7928
- }], onMouseLeave: [{
8669
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiComponent, decorators: [{
8670
+ type: Component,
8671
+ args: [{ selector: 'tc-rev-dropdown-multi', imports: [
8672
+ CommonModule,
8673
+ FormsModule,
8674
+ ReactiveFormsModule,
8675
+ TcRevCheckboxDirective
8676
+ ], template: "<div\n class=\"tc-rev-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tc-rev-dropdown-multi-toggle\"\n [class.tc-rev-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen\"\n class=\"tc-rev-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tc-rev-dropdown-multi-actions\">\n <label\n class=\"tc-rev-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tc-rev-dropdown-multi-select-all-text\">Todos</span>\n </label>\n </div>\n\n <ul class=\"tc-rev-dropdown-multi-options\">\n @for (option of options(); track option?.value)\n {\n <li class=\"tc-rev-dropdown-multi-menu-item\">\n <label\n class=\"tc-rev-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tc-rev-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: ["input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{position:initial;margin:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:after,input[type=checkbox].tc-rev-checkbox:before{content:\"\";position:initial;border-radius:initial;background:initial;z-index:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{height:initial;width:initial;left:initial;top:initial;margin:initial;border:initial}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:initial;height:initial;width:initial;margin:initial;z-index:initial;left:initial;top:initial;border:initial;border-width:initial;transform:initial}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{border-color:initial}input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--c-neutral-700);border-radius:2px;background:#fff;cursor:pointer;position:relative;outline:none;transition:border-color .2s,background .2s;display:inline-block;vertical-align:middle}input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:before{content:\"\";display:block;width:100%;height:100%;border-radius:2px;background:var(--c-neutral-50);transition:background .2s,border-color .2s;position:absolute;top:0;left:0;z-index:1}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{content:\"\";display:block;position:absolute;top:4px;left:2px;width:14px;height:10px;background:none;mask:none;-webkit-mask:none;pointer-events:none;z-index:2;transition:background .2s}input[type=checkbox].tc-rev-input-checkbox:checked,input[type=checkbox].tc-rev-checkbox:checked{border-color:var(--c-primary-500);background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{background:#fff;mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain;-webkit-mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain}input[type=checkbox].tc-rev-input-checkbox:disabled,input[type=checkbox].tc-rev-checkbox:disabled{border-color:var(--c-neutral-300);cursor:not-allowed}input[type=checkbox].tc-rev-input-checkbox:disabled:checked,input[type=checkbox].tc-rev-checkbox:disabled:checked{background:var(--c-neutral-300)}input[type=checkbox].tc-rev-input-checkbox:disabled:checked:before,input[type=checkbox].tc-rev-checkbox:disabled:checked:before{background:var(--c-neutral-300)}:host{display:inline-block}.tc-rev-dropdown-multi{position:relative;display:inline-block}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--md{height:var(--size-44)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label .tc-rev-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label .tc-rev-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-rev-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
8677
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
7929
8678
  type: HostListener,
7930
- args: ['mouseleave']
8679
+ args: ['document:click', ['$event']]
7931
8680
  }] } });
7932
8681
 
7933
- var DropdownSize;
7934
- (function (DropdownSize) {
7935
- DropdownSize["sm"] = "sm";
7936
- DropdownSize["md"] = "md";
7937
- DropdownSize["lg"] = "lg";
7938
- })(DropdownSize || (DropdownSize = {}));
7939
- class TcRevDropdownComponent {
8682
+ class TcRevDropdownSubMenuComponent {
8683
+ constructor() {
8684
+ this.items = input.required();
8685
+ this.position = input('right');
8686
+ this.parentOffsetTop = input.required();
8687
+ this.selectedOption = input();
8688
+ this.onOptionSelected = output();
8689
+ }
8690
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8691
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownSubMenuComponent, isStandalone: true, selector: "tc-rev-dropdown-sub-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, parentOffsetTop: { classPropertyName: "parentOffsetTop", publicName: "parentOffsetTop", isSignal: true, isRequired: true, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionSelected: "onOptionSelected" }, ngImport: i0, template: "<ul\n class=\"sub-menu\"\n [ngClass]=\"this.position()\"\n [style.top.px]=\"this.parentOffsetTop()\">\n @for (item of this.items(); track item.value)\n {\n <li\n class=\"sub-menu-item\"\n [class.selected]=\"this.selectedOption()?.value === item.value\"\n (click)=\"this.onOptionSelected.emit(item)\">\n {{ item.displayValue }}\n @if (this.selectedOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n @if (item.children?.length)\n {\n <tc-rev-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"this.position()\"\n [parentOffsetTop]=\"0\"\n [selectedOption]=\"this.selectedOption()\">\n </tc-rev-dropdown-sub-menu>\n }\n </li>\n }\n</ul>\n", styles: [".sub-menu{background-color:var(--c-neutral-50);box-shadow:var(--shadow-md);list-style:none;max-height:15.625rem;min-width:160px;overflow-y:auto;padding:0;position:absolute;margin:0;z-index:1001}.sub-menu.right{left:100%}.sub-menu.left{right:100%}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: TcRevDropdownSubMenuComponent, selector: "tc-rev-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
8692
+ }
8693
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownSubMenuComponent, decorators: [{
8694
+ type: Component,
8695
+ args: [{ selector: 'tc-rev-dropdown-sub-menu', imports: [CommonModule], template: "<ul\n class=\"sub-menu\"\n [ngClass]=\"this.position()\"\n [style.top.px]=\"this.parentOffsetTop()\">\n @for (item of this.items(); track item.value)\n {\n <li\n class=\"sub-menu-item\"\n [class.selected]=\"this.selectedOption()?.value === item.value\"\n (click)=\"this.onOptionSelected.emit(item)\">\n {{ item.displayValue }}\n @if (this.selectedOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n @if (item.children?.length)\n {\n <tc-rev-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"this.position()\"\n [parentOffsetTop]=\"0\"\n [selectedOption]=\"this.selectedOption()\">\n </tc-rev-dropdown-sub-menu>\n }\n </li>\n }\n</ul>\n", styles: [".sub-menu{background-color:var(--c-neutral-50);box-shadow:var(--shadow-md);list-style:none;max-height:15.625rem;min-width:160px;overflow-y:auto;padding:0;position:absolute;margin:0;z-index:1001}.sub-menu.right{left:100%}.sub-menu.left{right:100%}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
8696
+ }] });
8697
+
8698
+ var MultiLevelDropdownSize;
8699
+ (function (MultiLevelDropdownSize) {
8700
+ MultiLevelDropdownSize["sm"] = "sm";
8701
+ MultiLevelDropdownSize["md"] = "md";
8702
+ MultiLevelDropdownSize["lg"] = "lg";
8703
+ })(MultiLevelDropdownSize || (MultiLevelDropdownSize = {}));
8704
+ class TcRevDropdownMultiLevelComponent {
7940
8705
  onDocumentClick(event) {
7941
8706
  if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
7942
8707
  this.isOpen = false;
@@ -7944,112 +8709,65 @@ class TcRevDropdownComponent {
7944
8709
  }
7945
8710
  constructor(elementRef) {
7946
8711
  this.elementRef = elementRef;
7947
- this._deviceService = inject(TCloudUiDeviceUtilsService);
7948
- this.label = input(''); // Label que será exibida
7949
- this.disabled = input(false); // Desabilita o dropdown
7950
- this.options = input.required(); // Lista de opções no novo formato
7951
- this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
7952
- this.value = model(null); // Two-way binding para o valor selecionado
7953
- this.size = input(DropdownSize.sm);
7954
- this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
7955
- this.optionSelected = output(); // Emissor para o valor selecionado
7956
- this.selectedOption = signal(null); // Opção selecionada
7957
- this.isOpen = false; // Controla se o dropdown está aberto
7958
- this.dropdownSize = DropdownSize;
7959
- this.isDesktop = this._deviceService.isDesktop;
7960
- this.isMobile = this._deviceService.isMobile;
8712
+ this.dropdownSize = MultiLevelDropdownSize;
8713
+ this.menu = input.required();
8714
+ this.subMenuPosition = input('right');
8715
+ this.disabled = input(false);
8716
+ this.size = input(MultiLevelDropdownSize.sm);
8717
+ this.initialValue = input(null); // Valor pré-selecionado
8718
+ this.optionSelected = output();
8719
+ this.selectedOption = signal(null);
8720
+ this.selectedParentOption = signal(null);
8721
+ this.hoveredIndex = null;
8722
+ this.isOpen = false;
7961
8723
  }
7962
8724
  ngOnChanges(_simpleChanges) {
7963
8725
  // Atualiza a opção selecionada quando o valor pré-selecionado muda
7964
- if (_simpleChanges['initialValue'] ||
7965
- _simpleChanges['options'] ||
7966
- _simpleChanges['value']) {
7967
- const valueToUse = this.value() || this.initialValue();
7968
- this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
8726
+ if (_simpleChanges['initialValue'] || _simpleChanges['menu']) {
8727
+ this.selectedOption.set(null);
8728
+ this.selectedParentOption.set(null);
7969
8729
  }
7970
8730
  }
7971
- ngOnInit() {
7972
- // Prioriza o valor do model, mas mantém compatibilidade com initialValue
7973
- const valueToUse = this.value() || this.initialValue();
7974
- const foundOption = this.options().find((option) => option.value === valueToUse) || null;
7975
- this.selectedOption.set(foundOption);
7976
- // Se não havia valor no model mas havia initialValue, sincroniza o model
7977
- if (!this.value() && this.initialValue() && foundOption) {
7978
- this.value.set(foundOption.value);
8731
+ getItemOffsetTop(index) {
8732
+ if (!this.menuRoot)
8733
+ return 0;
8734
+ const items = this.menuRoot.nativeElement.querySelectorAll('.menu-item');
8735
+ if (items && items[index]) {
8736
+ return items[index].offsetTop;
7979
8737
  }
7980
- // Escuta mudanças no model e atualiza a opção selecionada
7981
- this.value.subscribe((newValue) => {
7982
- const option = this.options().find((opt) => opt.value === newValue) || null;
7983
- if (this.selectedOption() !== option) {
7984
- this.selectedOption.set(option);
7985
- }
7986
- });
8738
+ return 0;
7987
8739
  }
7988
8740
  toggleDropdown() {
7989
- // Abertura do dropdown para mobile
7990
- if (this.isMobile()) {
7991
- this._deviceService.openDropdownDevice(this.menuTemplate);
7992
- return;
7993
- }
7994
8741
  this.isOpen = !this.isOpen;
7995
8742
  }
7996
- selectOption(option) {
8743
+ selectOption(option, parentOption) {
7997
8744
  this.selectedOption.set(option);
7998
- this.value.set(option.value); // Atualiza o model com two-way binding
7999
- this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
8000
- // Fechamento dd dropdown para mobile
8001
- if (this.isMobile()) {
8002
- this._deviceService.closeDropdownDevice();
8003
- return;
8004
- }
8005
- this.isOpen = false; // Fecha o dropdown
8745
+ this.selectedParentOption.set(parentOption);
8746
+ this.optionSelected.emit({ option, parentOption }); // Emite apenas o valor da opção selecionada
8747
+ // this.isOpen = false; // Fecha o dropdown
8748
+ // this.hoveredIndex = null;
8006
8749
  }
8007
- /**
8008
- * Verifica se o texto de uma opção na lista está elipsado
8009
- * @param text - Texto a ser verificado
8010
- * @returns true se o texto estiver elipsado
8011
- */
8012
- isOptionEllipsed(text) {
8013
- if (!text)
8014
- return false;
8015
- // Calcula a largura disponível para o texto nas opções da lista
8016
- const menuElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown-menu');
8017
- if (!menuElement) {
8018
- // Se o menu não está aberto, usa a largura do dropdown
8019
- const dropdownElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown');
8020
- if (!dropdownElement)
8021
- return false;
8022
- const dropdownWidth = dropdownElement.clientWidth;
8023
- const padding = 16; // 8px de cada lado do botão
8024
- const iconSpace = 24; // Espaço do ícone de check quando selecionado
8025
- const availableWidth = Math.max(50, dropdownWidth - padding - iconSpace);
8026
- return isTextEllipsed(text, availableWidth);
8027
- }
8028
- // Largura do menu menos padding do item (16px total) e espaço do ícone de check (24px)
8029
- const menuWidth = menuElement.clientWidth;
8030
- const padding = 16; // 8px de cada lado do botão do item
8031
- const iconSpace = 24; // Espaço do ícone de check quando selecionado
8032
- const availableWidth = Math.max(50, menuWidth - padding - iconSpace);
8033
- return isTextEllipsed(text, availableWidth);
8750
+ selectParentItem($event, option, parentOption) {
8751
+ $event.stopPropagation();
8752
+ if (parentOption?.children?.length)
8753
+ return;
8754
+ this.selectOption(option, parentOption);
8034
8755
  }
8035
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
8036
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownComponent, isStandalone: true, selector: "tc-rev-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b>{{ label() }}</b>\n }\n <span class=\"tc-rev-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n @for (option of options(); track option?.value) {\n <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tc-rev-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n <div class=\"tc-rev-dropdown-menu-section\">\n <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n @for (option of options(); track option?.value) {\n <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
8756
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiLevelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
8757
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownMultiLevelComponent, isStandalone: true, selector: "tc-rev-dropdown-multi-level", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, subMenuPosition: { classPropertyName: "subMenuPosition", publicName: "subMenuPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuRoot", first: true, predicate: ["menuRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tc-rev-dropdown-multi-level\">\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--dark-outline tc-rev-dropdown-toggle\"\n [class.tc-rev-btn--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-btn--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-btn--lg]=\"this.size() === dropdownSize.lg\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tc-rev-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li \n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"hoveredIndex = i\"\n (mouseleave)=\"hoveredIndex = null\"\n (click)=\"this.selectParentItem($event, item, item)\">\n {{ item.displayValue }}\n @if (this.selectedParentOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n }\n @if (item?.children?.length && hoveredIndex === i)\n {\n <tc-rev-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"subMenuPosition()\"\n [parentOffsetTop]=\"getItemOffsetTop(i)\"\n [selectedOption]=\"this.selectedOption()\"\n (onOptionSelected)=\"this.selectOption($event, item)\">\n </tc-rev-dropdown-sub-menu>\n }\n </li>\n }\n }\n\t</ul>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-multi-level{position:relative;display:inline-block}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tc-rev-dropdown-multi-level__menu-list{background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);box-shadow:var(--shadow-md);color:var(--c-neutral-700);left:0;list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;position:absolute;top:110%;width:100%;z-index:1000}.tc-rev-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TcRevDropdownSubMenuComponent, selector: "tc-rev-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }] }); }
8037
8758
  }
8038
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
8759
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiLevelComponent, decorators: [{
8039
8760
  type: Component,
8040
- args: [{ selector: 'tc-rev-dropdown', imports: [
8761
+ args: [{ selector: 'tc-rev-dropdown-multi-level', imports: [
8041
8762
  CommonModule,
8042
- FormsModule,
8043
- ReactiveFormsModule,
8044
- TcRevTooltipDirective,
8045
- TcRevIconButtonDirective
8046
- ], template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b>{{ label() }}</b>\n }\n <span class=\"tc-rev-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n @for (option of options(); track option?.value) {\n <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tc-rev-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n <div class=\"tc-rev-dropdown-menu-section\">\n <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n @for (option of options(); track option?.value) {\n <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
8047
- }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
8048
- type: ViewChild,
8049
- args: ['menuTemplate']
8050
- }], onDocumentClick: [{
8763
+ TcRevDropdownSubMenuComponent
8764
+ ], template: "<div class=\"tc-rev-dropdown-multi-level\">\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--dark-outline tc-rev-dropdown-toggle\"\n [class.tc-rev-btn--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-btn--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-btn--lg]=\"this.size() === dropdownSize.lg\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tc-rev-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li \n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"hoveredIndex = i\"\n (mouseleave)=\"hoveredIndex = null\"\n (click)=\"this.selectParentItem($event, item, item)\">\n {{ item.displayValue }}\n @if (this.selectedParentOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n }\n @if (item?.children?.length && hoveredIndex === i)\n {\n <tc-rev-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"subMenuPosition()\"\n [parentOffsetTop]=\"getItemOffsetTop(i)\"\n [selectedOption]=\"this.selectedOption()\"\n (onOptionSelected)=\"this.selectOption($event, item)\">\n </tc-rev-dropdown-sub-menu>\n }\n </li>\n }\n }\n\t</ul>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-multi-level{position:relative;display:inline-block}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tc-rev-dropdown-multi-level__menu-list{background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);box-shadow:var(--shadow-md);color:var(--c-neutral-700);left:0;list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;position:absolute;top:110%;width:100%;z-index:1000}.tc-rev-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
8765
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
8051
8766
  type: HostListener,
8052
8767
  args: ['document:click', ['$event']]
8768
+ }], menuRoot: [{
8769
+ type: ViewChild,
8770
+ args: ['menuRoot', { static: false }]
8053
8771
  }] } });
8054
8772
 
8055
8773
  /**
@@ -9130,5 +9848,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
9130
9848
  * Generated bundle index. Do not edit.
9131
9849
  */
9132
9850
 
9133
- export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize, DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiButtonDirective, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiElCopyDirective, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchInObjectService, TCloudUiSubNavbarComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
9851
+ export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputContainerComponent, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchInObjectService, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSubNavbarComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
9134
9852
  //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map