@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.
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +1464 -746
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-breadcrumb/tcloud-ui-breadcrumb.component.d.ts +12 -0
- package/lib/_modules/tcloud-ui-breadcrumb/tcloud-ui-breadcrumb.service.d.ts +16 -0
- package/lib/_modules/tcloud-ui-card/tcloud-ui-card.component.d.ts +12 -0
- package/lib/_modules/tcloud-ui-card-accordion/tcloud-ui-card-accordion.component.d.ts +23 -0
- package/lib/_modules/tcloud-ui-card-title/tcloud-ui-card-title.component.d.ts +6 -0
- package/lib/_modules/tcloud-ui-checkbox/tcloud-ui-checkbox.directive.d.ts +6 -0
- package/lib/_modules/tcloud-ui-dropdown/tcloud-ui-dropdown.component.d.ts +46 -0
- package/lib/_modules/tcloud-ui-dropdown-multi/tcloud-ui-dropdown-multi.component.d.ts +44 -0
- package/lib/_modules/tcloud-ui-empty-content/tcloud-ui-empty-content.component.d.ts +5 -0
- package/lib/_modules/tcloud-ui-faq/tcloud-ui-faq.component.d.ts +12 -0
- package/lib/_modules/tcloud-ui-input-container/tcloud-ui-input-container.component.d.ts +10 -0
- package/lib/_modules/tcloud-ui-linha-logo/tcloud-ui-linha-logo.component.d.ts +4 -1
- package/lib/_modules/tcloud-ui-message/tcloud-ui-message.component.d.ts +7 -0
- package/lib/_modules/tcloud-ui-skeleton-loading/tcloud-ui-skeleton-loading.component.d.ts +17 -0
- package/lib/_modules/tcloud-ui-sub-navbar/tcloud-ui-sub-navbar.component.d.ts +1 -1
- package/lib/_modules/tcloud-ui-tab-group/tcloud-ui-tab-group.component.d.ts +12 -0
- package/lib/_modules/tcloud-ui-tab-group/tcloud-ui-tab-item/tcloud-ui-tab-item.component.d.ts +10 -0
- package/lib/_modules/tcloud-ui-tag/tag-colors.enum.d.ts +29 -0
- package/lib/_modules/tcloud-ui-tag/tcloud-ui-tag.component.d.ts +10 -0
- package/lib/_modules/tcloud-ui-toast/tcloud-ui-toast.component.d.ts +8 -0
- package/lib/revitalizacao/components/tc-rev-input-container/tc-rev-input-container.component.d.ts +1 -1
- package/lib/revitalizacao/components/tc-rev-tooltip/tc-rev-tooltip.directive.d.ts +1 -1
- package/lib/tcloud-ui.module.d.ts +70 -53
- package/package.json +1 -1
- package/public-api.d.ts +19 -2
- 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,
|
|
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
|
|
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
|
-
],
|
|
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',
|
|
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
|
-
],
|
|
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',
|
|
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
|
-
],
|
|
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.
|
|
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
|
-
|
|
6534
|
-
|
|
6535
|
-
|
|
6536
|
-
|
|
6537
|
-
|
|
6538
|
-
|
|
6539
|
-
|
|
6540
|
-
|
|
6541
|
-
|
|
6542
|
-
|
|
6543
|
-
|
|
6544
|
-
|
|
6545
|
-
|
|
6546
|
-
|
|
6547
|
-
|
|
6548
|
-
|
|
6549
|
-
|
|
6550
|
-
|
|
6551
|
-
|
|
6552
|
-
|
|
6553
|
-
|
|
6554
|
-
|
|
6555
|
-
|
|
6556
|
-
|
|
6557
|
-
|
|
6558
|
-
|
|
6559
|
-
|
|
6560
|
-
|
|
6561
|
-
|
|
6562
|
-
|
|
6563
|
-
|
|
6564
|
-
|
|
6565
|
-
|
|
6566
|
-
|
|
6567
|
-
|
|
6568
|
-
|
|
6569
|
-
|
|
6570
|
-
|
|
6571
|
-
|
|
6572
|
-
|
|
6573
|
-
|
|
6574
|
-
|
|
6575
|
-
|
|
6576
|
-
|
|
6577
|
-
|
|
6578
|
-
|
|
6579
|
-
|
|
6580
|
-
|
|
6581
|
-
|
|
6582
|
-
|
|
6583
|
-
|
|
6584
|
-
|
|
6585
|
-
|
|
6586
|
-
|
|
6587
|
-
|
|
6588
|
-
|
|
6589
|
-
|
|
6590
|
-
|
|
6591
|
-
|
|
6592
|
-
|
|
6593
|
-
|
|
6594
|
-
|
|
6595
|
-
|
|
6596
|
-
|
|
6597
|
-
|
|
6598
|
-
|
|
6599
|
-
|
|
6600
|
-
|
|
6601
|
-
|
|
6602
|
-
|
|
6603
|
-
|
|
6604
|
-
|
|
6605
|
-
|
|
6606
|
-
|
|
6607
|
-
|
|
6608
|
-
|
|
6609
|
-
|
|
6610
|
-
|
|
6611
|
-
|
|
6612
|
-
|
|
6613
|
-
|
|
6614
|
-
|
|
6615
|
-
|
|
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
|
-
|
|
6618
|
-
|
|
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
|
-
|
|
6621
|
-
|
|
6622
|
-
|
|
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:
|
|
6626
|
-
static { this.ɵ
|
|
6627
|
-
|
|
6628
|
-
|
|
6629
|
-
|
|
6630
|
-
|
|
6631
|
-
|
|
6632
|
-
|
|
6633
|
-
|
|
6634
|
-
|
|
6635
|
-
|
|
6636
|
-
|
|
6637
|
-
|
|
6638
|
-
|
|
6639
|
-
|
|
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,
|
|
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,
|
|
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:
|
|
6992
|
-
type:
|
|
8015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingTransitionsService, decorators: [{
|
|
8016
|
+
type: Injectable,
|
|
6993
8017
|
args: [{
|
|
6994
|
-
|
|
6995
|
-
host: {
|
|
6996
|
-
class: 'tc-rev-btn'
|
|
6997
|
-
}
|
|
8018
|
+
providedIn: 'root',
|
|
6998
8019
|
}]
|
|
6999
|
-
}], ctorParameters: () => [
|
|
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:
|
|
7350
|
-
static { this.ɵ
|
|
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:
|
|
7353
|
-
type:
|
|
7354
|
-
args: [{
|
|
7355
|
-
|
|
7356
|
-
|
|
7357
|
-
|
|
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
|
-
|
|
7857
|
-
|
|
7858
|
-
|
|
7859
|
-
|
|
7860
|
-
|
|
7861
|
-
|
|
7862
|
-
|
|
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
|
-
|
|
7882
|
-
|
|
7883
|
-
|
|
7884
|
-
this.
|
|
8657
|
+
toggleSelectAll(event) {
|
|
8658
|
+
event.stopPropagation();
|
|
8659
|
+
if (this.isAllSelected()) {
|
|
8660
|
+
this.clearAll();
|
|
7885
8661
|
}
|
|
7886
|
-
|
|
7887
|
-
|
|
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:
|
|
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:
|
|
7920
|
-
type:
|
|
7921
|
-
args: [{
|
|
7922
|
-
|
|
7923
|
-
|
|
7924
|
-
|
|
7925
|
-
|
|
7926
|
-
type: HostListener,
|
|
7927
|
-
|
|
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: ['
|
|
8679
|
+
args: ['document:click', ['$event']]
|
|
7931
8680
|
}] } });
|
|
7932
8681
|
|
|
7933
|
-
|
|
7934
|
-
(
|
|
7935
|
-
|
|
7936
|
-
|
|
7937
|
-
|
|
7938
|
-
|
|
7939
|
-
|
|
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.
|
|
7948
|
-
this.
|
|
7949
|
-
this.
|
|
7950
|
-
this.
|
|
7951
|
-
this.
|
|
7952
|
-
this.
|
|
7953
|
-
this.
|
|
7954
|
-
this.
|
|
7955
|
-
this.
|
|
7956
|
-
this.
|
|
7957
|
-
this.isOpen = false;
|
|
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
|
-
|
|
7966
|
-
|
|
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
|
-
|
|
7972
|
-
|
|
7973
|
-
|
|
7974
|
-
const
|
|
7975
|
-
|
|
7976
|
-
|
|
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
|
-
|
|
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.
|
|
7999
|
-
this.optionSelected.emit(option); // Emite
|
|
8000
|
-
//
|
|
8001
|
-
|
|
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
|
-
|
|
8009
|
-
|
|
8010
|
-
|
|
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:
|
|
8036
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type:
|
|
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:
|
|
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
|
-
|
|
8043
|
-
|
|
8044
|
-
|
|
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
|