@dev-tcloud/tcloud-ui 6.28.3-beta.0 → 6.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/tcloud-ui-dialog.md +20 -1
- package/docs/tcloud-ui-el-copy.md +10 -0
- package/docs/tcloud-ui-popover.md +54 -0
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +2175 -128
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/js/tcloud-ui-app.js +1 -1
- package/lib/_modules/tcloud-ui-dialog/models/tcloud-ui-dialog.model.d.ts +3 -1
- package/lib/_modules/tcloud-ui-dialog/tcloud-ui-dialog.component.d.ts +2 -0
- package/lib/_modules/tcloud-ui-popover/tcloud-ui-popover.component.d.ts +24 -0
- package/lib/_modules/tcloud-ui-popover/tcloud-ui-popover.d.ts +3 -0
- package/lib/revitalizacao/components/tc-rev-breadcrumb/tc-rev-breadcrumb.component.d.ts +12 -0
- package/lib/revitalizacao/components/tc-rev-breadcrumb/tc-rev-breadcrumb.service.d.ts +16 -0
- package/lib/revitalizacao/components/tc-rev-button/tc-rev-button.directive.d.ts +13 -0
- package/lib/revitalizacao/components/tc-rev-calendar/tc-rev-calendar.component.d.ts +43 -0
- package/lib/revitalizacao/components/tc-rev-card/tc-rev-card.component.d.ts +12 -0
- package/lib/revitalizacao/components/tc-rev-card-accordion/tc-rev-card-accordion.component.d.ts +23 -0
- package/lib/revitalizacao/components/tc-rev-card-title/tc-rev-card-title.component.d.ts +6 -0
- package/lib/revitalizacao/components/tc-rev-checkbox/tc-rev-checkbox.directive.d.ts +6 -0
- package/lib/revitalizacao/components/tc-rev-components.module.d.ts +41 -0
- package/lib/revitalizacao/components/tc-rev-dropdown/tc-rev-dropdown.component.d.ts +46 -0
- package/lib/revitalizacao/components/tc-rev-dropdown-grouped/tc-rev-dropdown-grouped.component.d.ts +54 -0
- package/lib/revitalizacao/components/tc-rev-dropdown-multi/tc-rev-dropdown-multi.component.d.ts +44 -0
- package/lib/revitalizacao/components/tc-rev-dropdown-multi-level/tc-rev-dropdown-multi-level.component.d.ts +42 -0
- package/lib/revitalizacao/components/tc-rev-dropdown-multi-level/tc-rev-dropdown-sub-menu/tc-rev-dropdown-sub-menu.component.d.ts +17 -0
- package/lib/revitalizacao/components/tc-rev-empty-content/tc-rev-empty-content.component.d.ts +5 -0
- package/lib/revitalizacao/components/tc-rev-faq/tc-rev-faq.component.d.ts +12 -0
- package/lib/revitalizacao/components/tc-rev-icon-button/tc-rev-icon-button.directive.d.ts +12 -0
- package/lib/revitalizacao/components/tc-rev-input/tc-rev-input.directive.d.ts +10 -0
- package/lib/revitalizacao/components/tc-rev-input-container/tc-rev-input-container.component.d.ts +10 -0
- package/lib/revitalizacao/components/tc-rev-loading/tc-rev-loading.component.d.ts +6 -0
- package/lib/revitalizacao/components/tc-rev-message/tc-rev-message.component.d.ts +7 -0
- package/lib/revitalizacao/components/tc-rev-multi-input/tc-rev-multi-input.component.d.ts +24 -0
- package/lib/revitalizacao/components/tc-rev-pagination/tc-rev-pagination.component.d.ts +14 -0
- package/lib/revitalizacao/components/tc-rev-progress-status-bar/tc-rev-progress-status-bar.component.d.ts +23 -0
- package/lib/revitalizacao/components/tc-rev-radio/tc-rev-radio.directive.d.ts +6 -0
- package/lib/revitalizacao/components/tc-rev-search-input/tc-rev-search-input.component.d.ts +17 -0
- package/lib/revitalizacao/components/tc-rev-side-drawer/tc-rev-side-drawer.component.d.ts +24 -0
- package/lib/revitalizacao/components/tc-rev-skeleton-loading/tc-rev-skeleton-loading.component.d.ts +17 -0
- package/lib/revitalizacao/components/tc-rev-slide-toggle/tc-rev-slide-toggle.directive.d.ts +5 -0
- package/lib/revitalizacao/components/tc-rev-small-loading/tc-rev-small-loading.component.d.ts +26 -0
- package/lib/revitalizacao/components/tc-rev-tab-group/tc-rev-tab-group.component.d.ts +12 -0
- package/lib/revitalizacao/components/tc-rev-tab-group/tc-rev-tab-item/tc-rev-tab-item.component.d.ts +10 -0
- package/lib/revitalizacao/components/tc-rev-tag/tag-colors.enum.d.ts +29 -0
- package/lib/revitalizacao/components/tc-rev-tag/tc-rev-tag.component.d.ts +10 -0
- package/lib/revitalizacao/components/tc-rev-toast/tc-rev-toast.component.d.ts +8 -0
- package/lib/revitalizacao/components/tc-rev-tooltip/tc-rev-tooltip.directive.d.ts +19 -0
- package/lib/revitalizacao/components/tc-rev-wizard-steps/tc-rev-wizard-steps.component.d.ts +19 -0
- package/lib/revitalizacao/components/tc-sub-navbar/component/tc-sub-navbar-item/tc-sub-navbar-item.component.d.ts +13 -0
- package/lib/revitalizacao/components/tc-sub-navbar/tc-sub-navbar.component.d.ts +12 -0
- package/lib/tcloud-ui.module.d.ts +85 -84
- package/package.json +1 -1
- package/public-api.d.ts +40 -2
- /package/lib/{util → revitalizacao/charts}/echarts.d.ts +0 -0
- /package/lib/{util → revitalizacao/util}/ellipsed-text.d.ts +0 -0
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, EventEmitter, Input, Output, InjectionToken, Optional, Inject, inject, signal, Pipe, forwardRef, ViewChild, input, effect, Directive, ViewEncapsulation, SkipSelf, ChangeDetectionStrategy,
|
|
2
|
+
import { Injectable, Component, EventEmitter, Input, Output, InjectionToken, Optional, Inject, inject, signal, Pipe, forwardRef, ViewChild, input, effect, Directive, ViewEncapsulation, HostListener, SkipSelf, ChangeDetectionStrategy, ChangeDetectorRef, computed, ApplicationRef, output, model, numberAttribute, booleanAttribute, HostBinding, ContentChildren, viewChild, EnvironmentInjector, createComponent, ViewContainerRef, NgModule, makeEnvironmentProviders } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { CommonModule, DatePipe } from '@angular/common';
|
|
4
|
+
import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
|
|
5
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
|
-
import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, NG_VALIDATORS, Validators } from '@angular/forms';
|
|
8
|
+
import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, NG_VALIDATORS, Validators, FormGroup } from '@angular/forms';
|
|
9
9
|
import * as i1$1 from '@angular/router';
|
|
10
10
|
import { Router, RouterModule } from '@angular/router';
|
|
11
11
|
import hljs from 'highlight.js';
|
|
@@ -4004,6 +4004,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
4004
4004
|
args: ['_formulario']
|
|
4005
4005
|
}] } });
|
|
4006
4006
|
|
|
4007
|
+
class TCloudUiPopoverComponent {
|
|
4008
|
+
set open(open) {
|
|
4009
|
+
this._open = open;
|
|
4010
|
+
}
|
|
4011
|
+
get open() {
|
|
4012
|
+
return this._open;
|
|
4013
|
+
}
|
|
4014
|
+
constructor(elementRef) {
|
|
4015
|
+
this.elementRef = elementRef;
|
|
4016
|
+
this.position = 'bottom';
|
|
4017
|
+
this.align = 'start';
|
|
4018
|
+
this.maxWidth = 320;
|
|
4019
|
+
this.disabled = false;
|
|
4020
|
+
this.showCloseIcon = false;
|
|
4021
|
+
this._open = false;
|
|
4022
|
+
this.openChange = new EventEmitter();
|
|
4023
|
+
}
|
|
4024
|
+
get maxWidthValue() {
|
|
4025
|
+
return typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth;
|
|
4026
|
+
}
|
|
4027
|
+
toToggle(event) {
|
|
4028
|
+
event.stopPropagation();
|
|
4029
|
+
if (this.disabled) {
|
|
4030
|
+
return;
|
|
4031
|
+
}
|
|
4032
|
+
this.setOpen(!this.open);
|
|
4033
|
+
}
|
|
4034
|
+
toClose(event) {
|
|
4035
|
+
event?.stopPropagation();
|
|
4036
|
+
this.setOpen(false);
|
|
4037
|
+
}
|
|
4038
|
+
setOpen(open) {
|
|
4039
|
+
if (this._open === open) {
|
|
4040
|
+
return;
|
|
4041
|
+
}
|
|
4042
|
+
this._open = open;
|
|
4043
|
+
this.openChange.emit(open);
|
|
4044
|
+
}
|
|
4045
|
+
onDocumentClick(event) {
|
|
4046
|
+
if (!this.open) {
|
|
4047
|
+
return;
|
|
4048
|
+
}
|
|
4049
|
+
const target = event.target;
|
|
4050
|
+
if (target && !this.elementRef.nativeElement.contains(target)) {
|
|
4051
|
+
this.toClose();
|
|
4052
|
+
}
|
|
4053
|
+
}
|
|
4054
|
+
onEscape() {
|
|
4055
|
+
if (this.open) {
|
|
4056
|
+
this.toClose();
|
|
4057
|
+
}
|
|
4058
|
+
}
|
|
4059
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiPopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4060
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiPopoverComponent, isStandalone: true, selector: "tcloud-ui-popover", inputs: { position: "position", align: "align", maxWidth: "maxWidth", disabled: "disabled", showCloseIcon: "showCloseIcon", open: "open" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div\n class=\"tcloud-ui-popover\"\n [class.is-open]=\"open\"\n [class.is-disabled]=\"disabled\"\n [ngClass]=\"['position-' + position, 'align-' + align]\">\n <div\n class=\"tcloud-ui-popover-trigger\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"toToggle($event)\">\n <ng-content select=\"[popover-trigger]\"></ng-content>\n </div>\n\n <div\n *ngIf=\"open\"\n class=\"tcloud-ui-popover-panel\"\n role=\"dialog\"\n [style.max-width]=\"maxWidthValue\"\n (click)=\"$event.stopPropagation()\">\n <button\n *ngIf=\"showCloseIcon\"\n type=\"button\"\n class=\"tcloud-ui-popover-close\"\n aria-label=\"Fechar popover\"\n (click)=\"toClose($event)\">\n <i class=\"fas fa-times\"></i>\n </button>\n\n <div class=\"tcloud-ui-popover-content\">\n <ng-content select=\"[popover-content]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-popover{display:inline-block;position:relative;text-align:left}.tcloud-ui-popover-trigger{display:inline-flex}.tcloud-ui-popover.is-disabled .tcloud-ui-popover-trigger{cursor:not-allowed;opacity:.65}.tcloud-ui-popover-panel{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);border-radius:8px;box-shadow:2px 2px 10px #0003;color:var(--c-neutral-900);min-width:180px;padding:12px;position:absolute;width:max-content;z-index:4006}.tcloud-ui-popover-content{max-width:100%}.tcloud-ui-popover-close{align-items:center;background-color:transparent;border:0;color:var(--c-neutral-600);cursor:pointer;display:inline-flex;font-size:14px;height:24px;justify-content:center;padding:0;position:absolute;right:6px;top:6px;transition:color .2s ease,background-color .2s ease;width:24px}.tcloud-ui-popover-close:hover,.tcloud-ui-popover-close:focus-visible{background-color:var(--c-neutral-100);border-radius:4px;color:var(--c-neutral-900);outline:none}.tcloud-ui-popover-close+.tcloud-ui-popover-content{padding-right:24px}.position-bottom .tcloud-ui-popover-panel{top:calc(100% + 8px)}.position-top .tcloud-ui-popover-panel{bottom:calc(100% + 8px)}.position-bottom.align-start .tcloud-ui-popover-panel,.position-top.align-start .tcloud-ui-popover-panel{left:0}.position-bottom.align-center .tcloud-ui-popover-panel,.position-top.align-center .tcloud-ui-popover-panel{left:50%;transform:translate(-50%)}.position-bottom.align-end .tcloud-ui-popover-panel,.position-top.align-end .tcloud-ui-popover-panel{right:0}.position-right .tcloud-ui-popover-panel{left:calc(100% + 8px)}.position-left .tcloud-ui-popover-panel{right:calc(100% + 8px)}.position-right.align-start .tcloud-ui-popover-panel,.position-left.align-start .tcloud-ui-popover-panel{top:0}.position-right.align-center .tcloud-ui-popover-panel,.position-left.align-center .tcloud-ui-popover-panel{top:50%;transform:translateY(-50%)}.position-right.align-end .tcloud-ui-popover-panel,.position-left.align-end .tcloud-ui-popover-panel{bottom:0}:host-context(.tc-dark) .tcloud-ui-popover-panel,:host-context(body.tc-dark) .tcloud-ui-popover-panel{box-shadow:2px 2px 10px #00000073}@media (prefers-reduced-motion: reduce){.tcloud-ui-popover-close{transition:none}}\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"] }] }); }
|
|
4061
|
+
}
|
|
4062
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiPopoverComponent, decorators: [{
|
|
4063
|
+
type: Component,
|
|
4064
|
+
args: [{ selector: 'tcloud-ui-popover', standalone: true, imports: [CommonModule], template: "<div\n class=\"tcloud-ui-popover\"\n [class.is-open]=\"open\"\n [class.is-disabled]=\"disabled\"\n [ngClass]=\"['position-' + position, 'align-' + align]\">\n <div\n class=\"tcloud-ui-popover-trigger\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"toToggle($event)\">\n <ng-content select=\"[popover-trigger]\"></ng-content>\n </div>\n\n <div\n *ngIf=\"open\"\n class=\"tcloud-ui-popover-panel\"\n role=\"dialog\"\n [style.max-width]=\"maxWidthValue\"\n (click)=\"$event.stopPropagation()\">\n <button\n *ngIf=\"showCloseIcon\"\n type=\"button\"\n class=\"tcloud-ui-popover-close\"\n aria-label=\"Fechar popover\"\n (click)=\"toClose($event)\">\n <i class=\"fas fa-times\"></i>\n </button>\n\n <div class=\"tcloud-ui-popover-content\">\n <ng-content select=\"[popover-content]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-popover{display:inline-block;position:relative;text-align:left}.tcloud-ui-popover-trigger{display:inline-flex}.tcloud-ui-popover.is-disabled .tcloud-ui-popover-trigger{cursor:not-allowed;opacity:.65}.tcloud-ui-popover-panel{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);border-radius:8px;box-shadow:2px 2px 10px #0003;color:var(--c-neutral-900);min-width:180px;padding:12px;position:absolute;width:max-content;z-index:4006}.tcloud-ui-popover-content{max-width:100%}.tcloud-ui-popover-close{align-items:center;background-color:transparent;border:0;color:var(--c-neutral-600);cursor:pointer;display:inline-flex;font-size:14px;height:24px;justify-content:center;padding:0;position:absolute;right:6px;top:6px;transition:color .2s ease,background-color .2s ease;width:24px}.tcloud-ui-popover-close:hover,.tcloud-ui-popover-close:focus-visible{background-color:var(--c-neutral-100);border-radius:4px;color:var(--c-neutral-900);outline:none}.tcloud-ui-popover-close+.tcloud-ui-popover-content{padding-right:24px}.position-bottom .tcloud-ui-popover-panel{top:calc(100% + 8px)}.position-top .tcloud-ui-popover-panel{bottom:calc(100% + 8px)}.position-bottom.align-start .tcloud-ui-popover-panel,.position-top.align-start .tcloud-ui-popover-panel{left:0}.position-bottom.align-center .tcloud-ui-popover-panel,.position-top.align-center .tcloud-ui-popover-panel{left:50%;transform:translate(-50%)}.position-bottom.align-end .tcloud-ui-popover-panel,.position-top.align-end .tcloud-ui-popover-panel{right:0}.position-right .tcloud-ui-popover-panel{left:calc(100% + 8px)}.position-left .tcloud-ui-popover-panel{right:calc(100% + 8px)}.position-right.align-start .tcloud-ui-popover-panel,.position-left.align-start .tcloud-ui-popover-panel{top:0}.position-right.align-center .tcloud-ui-popover-panel,.position-left.align-center .tcloud-ui-popover-panel{top:50%;transform:translateY(-50%)}.position-right.align-end .tcloud-ui-popover-panel,.position-left.align-end .tcloud-ui-popover-panel{bottom:0}:host-context(.tc-dark) .tcloud-ui-popover-panel,:host-context(body.tc-dark) .tcloud-ui-popover-panel{box-shadow:2px 2px 10px #00000073}@media (prefers-reduced-motion: reduce){.tcloud-ui-popover-close{transition:none}}\n"] }]
|
|
4065
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { position: [{
|
|
4066
|
+
type: Input
|
|
4067
|
+
}], align: [{
|
|
4068
|
+
type: Input
|
|
4069
|
+
}], maxWidth: [{
|
|
4070
|
+
type: Input
|
|
4071
|
+
}], disabled: [{
|
|
4072
|
+
type: Input
|
|
4073
|
+
}], showCloseIcon: [{
|
|
4074
|
+
type: Input
|
|
4075
|
+
}], open: [{
|
|
4076
|
+
type: Input
|
|
4077
|
+
}], openChange: [{
|
|
4078
|
+
type: Output
|
|
4079
|
+
}], onDocumentClick: [{
|
|
4080
|
+
type: HostListener,
|
|
4081
|
+
args: ['document:click', ['$event']]
|
|
4082
|
+
}], onEscape: [{
|
|
4083
|
+
type: HostListener,
|
|
4084
|
+
args: ['document:keydown.escape']
|
|
4085
|
+
}] } });
|
|
4086
|
+
|
|
4007
4087
|
const CUSTOM_INPUT_VALIDATORS$2 = {
|
|
4008
4088
|
provide: NG_VALIDATORS,
|
|
4009
4089
|
useExisting: forwardRef(() => TCloudUiMultiInputComponent),
|
|
@@ -5671,14 +5751,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
5671
5751
|
type: Input
|
|
5672
5752
|
}] } });
|
|
5673
5753
|
|
|
5674
|
-
var ProgressStatusBarGradientStatus;
|
|
5754
|
+
var ProgressStatusBarGradientStatus$1;
|
|
5675
5755
|
(function (ProgressStatusBarGradientStatus) {
|
|
5676
5756
|
ProgressStatusBarGradientStatus["info"] = "info";
|
|
5677
5757
|
ProgressStatusBarGradientStatus["danger"] = "danger";
|
|
5678
5758
|
ProgressStatusBarGradientStatus["success"] = "success";
|
|
5679
5759
|
ProgressStatusBarGradientStatus["alert"] = "alert";
|
|
5680
|
-
})(ProgressStatusBarGradientStatus || (ProgressStatusBarGradientStatus = {}));
|
|
5681
|
-
var ProgressStatusBarRangeColor;
|
|
5760
|
+
})(ProgressStatusBarGradientStatus$1 || (ProgressStatusBarGradientStatus$1 = {}));
|
|
5761
|
+
var ProgressStatusBarRangeColor$1;
|
|
5682
5762
|
(function (ProgressStatusBarRangeColor) {
|
|
5683
5763
|
ProgressStatusBarRangeColor["dangerStart"] = "#F48E85";
|
|
5684
5764
|
ProgressStatusBarRangeColor["dangerEnd"] = "#DC3545";
|
|
@@ -5688,7 +5768,7 @@ var ProgressStatusBarRangeColor;
|
|
|
5688
5768
|
ProgressStatusBarRangeColor["infoEnd"] = "#0897E9";
|
|
5689
5769
|
ProgressStatusBarRangeColor["successStart"] = "#A3E78C";
|
|
5690
5770
|
ProgressStatusBarRangeColor["successEnd"] = "#47B13D";
|
|
5691
|
-
})(ProgressStatusBarRangeColor || (ProgressStatusBarRangeColor = {}));
|
|
5771
|
+
})(ProgressStatusBarRangeColor$1 || (ProgressStatusBarRangeColor$1 = {}));
|
|
5692
5772
|
class TCloudUiProgressStatusBarComponent {
|
|
5693
5773
|
constructor() {
|
|
5694
5774
|
this.currentValue = input.required();
|
|
@@ -5716,14 +5796,14 @@ class TCloudUiProgressStatusBarComponent {
|
|
|
5716
5796
|
}
|
|
5717
5797
|
getProgressStatusBarRangeColor(_gradientStatus, position) {
|
|
5718
5798
|
switch (_gradientStatus) {
|
|
5719
|
-
case ProgressStatusBarGradientStatus.alert:
|
|
5720
|
-
return position === 'start' ? ProgressStatusBarRangeColor.alertStart : ProgressStatusBarRangeColor.alertEnd;
|
|
5721
|
-
case ProgressStatusBarGradientStatus.danger:
|
|
5722
|
-
return position === 'start' ? ProgressStatusBarRangeColor.dangerStart : ProgressStatusBarRangeColor.dangerEnd;
|
|
5723
|
-
case ProgressStatusBarGradientStatus.success:
|
|
5724
|
-
return position === 'start' ? ProgressStatusBarRangeColor.successStart : ProgressStatusBarRangeColor.successEnd;
|
|
5799
|
+
case ProgressStatusBarGradientStatus$1.alert:
|
|
5800
|
+
return position === 'start' ? ProgressStatusBarRangeColor$1.alertStart : ProgressStatusBarRangeColor$1.alertEnd;
|
|
5801
|
+
case ProgressStatusBarGradientStatus$1.danger:
|
|
5802
|
+
return position === 'start' ? ProgressStatusBarRangeColor$1.dangerStart : ProgressStatusBarRangeColor$1.dangerEnd;
|
|
5803
|
+
case ProgressStatusBarGradientStatus$1.success:
|
|
5804
|
+
return position === 'start' ? ProgressStatusBarRangeColor$1.successStart : ProgressStatusBarRangeColor$1.successEnd;
|
|
5725
5805
|
default:
|
|
5726
|
-
return position === 'start' ? ProgressStatusBarRangeColor.infoStart : ProgressStatusBarRangeColor.infoEnd;
|
|
5806
|
+
return position === 'start' ? ProgressStatusBarRangeColor$1.infoStart : ProgressStatusBarRangeColor$1.infoEnd;
|
|
5727
5807
|
}
|
|
5728
5808
|
}
|
|
5729
5809
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiProgressStatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -8291,6 +8371,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
8291
8371
|
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"] }]
|
|
8292
8372
|
}] });
|
|
8293
8373
|
|
|
8374
|
+
class TcRevButtonDirective {
|
|
8375
|
+
constructor(_el) {
|
|
8376
|
+
this._el = _el;
|
|
8377
|
+
this.color = input('primary');
|
|
8378
|
+
this.size = input('sm');
|
|
8379
|
+
this.fullWidth = input(false);
|
|
8380
|
+
this.tcRevButton = input('filled');
|
|
8381
|
+
effect(() => {
|
|
8382
|
+
this.setClasses();
|
|
8383
|
+
});
|
|
8384
|
+
}
|
|
8385
|
+
setClasses() {
|
|
8386
|
+
const tokenList = this._el.nativeElement.classList;
|
|
8387
|
+
tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
|
|
8388
|
+
let tcRevButton = this.tcRevButton();
|
|
8389
|
+
if (!tcRevButton) {
|
|
8390
|
+
tcRevButton = 'filled';
|
|
8391
|
+
}
|
|
8392
|
+
this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-btn--full-width') : null;
|
|
8393
|
+
this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
|
|
8394
|
+
this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevButton}`);
|
|
8395
|
+
}
|
|
8396
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8397
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", 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 }); }
|
|
8398
|
+
}
|
|
8399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevButtonDirective, decorators: [{
|
|
8400
|
+
type: Directive,
|
|
8401
|
+
args: [{
|
|
8402
|
+
selector: 'button[tcRevButton]',
|
|
8403
|
+
host: {
|
|
8404
|
+
class: 'tc-rev-btn'
|
|
8405
|
+
}
|
|
8406
|
+
}]
|
|
8407
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
8408
|
+
|
|
8409
|
+
class TcRevCardTitleComponent {
|
|
8410
|
+
constructor() {
|
|
8411
|
+
this.title = input.required();
|
|
8412
|
+
}
|
|
8413
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", 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"] }); }
|
|
8415
|
+
}
|
|
8416
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevCardTitleComponent, decorators: [{
|
|
8417
|
+
type: Component,
|
|
8418
|
+
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"] }]
|
|
8419
|
+
}] });
|
|
8420
|
+
|
|
8294
8421
|
class TCloudUiCardAccordionComponent {
|
|
8295
8422
|
constructor() {
|
|
8296
8423
|
this._viewPort = inject(TCloudUiDeviceUtilsService);
|
|
@@ -8318,11 +8445,11 @@ class TCloudUiCardAccordionComponent {
|
|
|
8318
8445
|
return ['pad-14'];
|
|
8319
8446
|
}
|
|
8320
8447
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiCardAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8321
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 <
|
|
8448
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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"] }] }); }
|
|
8322
8449
|
}
|
|
8323
8450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiCardAccordionComponent, decorators: [{
|
|
8324
8451
|
type: Component,
|
|
8325
|
-
args: [{ selector: 'tcloud-ui-card-accordion', imports: [CommonModule,
|
|
8452
|
+
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"] }]
|
|
8326
8453
|
}] });
|
|
8327
8454
|
|
|
8328
8455
|
class TCloudUiCalendarComponent {
|
|
@@ -8878,13 +9005,190 @@ function isTextEllipsed(text, containerWidth) {
|
|
|
8878
9005
|
document.body.removeChild(tempElement);
|
|
8879
9006
|
return textWidth > maxWidth;
|
|
8880
9007
|
}
|
|
9008
|
+
// export class EllipsedTextHelper
|
|
9009
|
+
// {
|
|
9010
|
+
// public static isEllipsed(id: string): boolean
|
|
9011
|
+
// {
|
|
9012
|
+
// const element = document.querySelector<any>(`#${id}`);
|
|
9013
|
+
// return element ? (element.offsetWidth < element.scrollWidth) : false;
|
|
9014
|
+
// }
|
|
9015
|
+
// /**
|
|
9016
|
+
// *
|
|
9017
|
+
// * @param _textField - Stands for the text you want to compare
|
|
9018
|
+
// * @param _fontProperties - Text CSS properties (font-size & font-family)
|
|
9019
|
+
// * @param _divId - divId you want to compare
|
|
9020
|
+
// * @param _isEllipsed - is it Ellipsed? (optional)
|
|
9021
|
+
// */
|
|
9022
|
+
// public static calculate( _textField: string, _fontProperties: string, _divId: string, _isEllipsed: boolean = false, _whiteSpaceNoWrap = true): boolean
|
|
9023
|
+
// {
|
|
9024
|
+
// if (_isEllipsed)
|
|
9025
|
+
// {
|
|
9026
|
+
// return true;
|
|
9027
|
+
// }
|
|
9028
|
+
// const textDiv = document.getElementById(_divId);
|
|
9029
|
+
// if (textDiv)
|
|
9030
|
+
// {
|
|
9031
|
+
// const widthText = this.textWidthCalc(_textField, _fontProperties, _whiteSpaceNoWrap);
|
|
9032
|
+
// return widthText > textDiv.clientWidth;
|
|
9033
|
+
// }
|
|
9034
|
+
// return false
|
|
9035
|
+
// }
|
|
9036
|
+
// public static textWidthCalc(_text: string, _fontProperties: string, _whiteSpaceNoWrap: boolean): number
|
|
9037
|
+
// {
|
|
9038
|
+
// let tag = document.createElement('div');
|
|
9039
|
+
// tag.style.position = 'absolute';
|
|
9040
|
+
// tag.style.left = '-99in';
|
|
9041
|
+
// tag.style.font = _fontProperties;
|
|
9042
|
+
// tag.innerHTML = _text;
|
|
9043
|
+
// if (_whiteSpaceNoWrap)
|
|
9044
|
+
// {
|
|
9045
|
+
// tag.style.whiteSpace = 'nowrap';
|
|
9046
|
+
// }
|
|
9047
|
+
// document.body.appendChild(tag);
|
|
9048
|
+
// const result = tag.clientWidth;
|
|
9049
|
+
// document.body.removeChild(tag);
|
|
9050
|
+
// return result;
|
|
9051
|
+
// }
|
|
9052
|
+
// }
|
|
9053
|
+
|
|
9054
|
+
class TcRevTooltipDirective {
|
|
9055
|
+
constructor(_el, _renderer, _vcr) {
|
|
9056
|
+
this._el = _el;
|
|
9057
|
+
this._renderer = _renderer;
|
|
9058
|
+
this._vcr = _vcr;
|
|
9059
|
+
this.tcRevTooltip = input('');
|
|
9060
|
+
this.position = input('top');
|
|
9061
|
+
this.tooltipElement = null;
|
|
9062
|
+
}
|
|
9063
|
+
onMouseEnter() {
|
|
9064
|
+
const tooltipText = this.tcRevTooltip();
|
|
9065
|
+
if (this.isValidTooltipText(tooltipText)) {
|
|
9066
|
+
this.showTooltip(tooltipText);
|
|
9067
|
+
}
|
|
9068
|
+
}
|
|
9069
|
+
onMouseLeave() {
|
|
9070
|
+
this.hideTooltip();
|
|
9071
|
+
}
|
|
9072
|
+
isValidTooltipText(text) {
|
|
9073
|
+
return text && text.trim().length > 0;
|
|
9074
|
+
}
|
|
9075
|
+
showTooltip(text) {
|
|
9076
|
+
if (this.tooltipElement) {
|
|
9077
|
+
this.hideTooltip();
|
|
9078
|
+
}
|
|
9079
|
+
// Create tooltip element
|
|
9080
|
+
this.tooltipElement = this._renderer.createElement('div');
|
|
9081
|
+
// Add text content
|
|
9082
|
+
const textNode = this._renderer.createText(text);
|
|
9083
|
+
this._renderer.appendChild(this.tooltipElement, textNode);
|
|
9084
|
+
// Add CSS classes
|
|
9085
|
+
this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip');
|
|
9086
|
+
this._renderer.addClass(this.tooltipElement, `tc-rev-tooltip--${this.position()}`);
|
|
9087
|
+
// Set initial styles
|
|
9088
|
+
this._renderer.setStyle(this.tooltipElement, 'position', 'absolute');
|
|
9089
|
+
this._renderer.setStyle(this.tooltipElement, 'z-index', '9999');
|
|
9090
|
+
this._renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
|
|
9091
|
+
// this._renderer.setStyle(this.tooltipElement, 'opacity', '0');
|
|
9092
|
+
// Append to body
|
|
9093
|
+
this._renderer.appendChild(document.body, this.tooltipElement);
|
|
9094
|
+
// Position tooltip
|
|
9095
|
+
this.positionTooltip();
|
|
9096
|
+
// Show tooltip with animation
|
|
9097
|
+
this._renderer.setStyle(this.tooltipElement, 'visibility', 'visible');
|
|
9098
|
+
this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip--visible');
|
|
9099
|
+
}
|
|
9100
|
+
hideTooltip() {
|
|
9101
|
+
if (this.tooltipElement) {
|
|
9102
|
+
this._renderer.removeChild(document.body, this.tooltipElement);
|
|
9103
|
+
this.tooltipElement = null;
|
|
9104
|
+
}
|
|
9105
|
+
}
|
|
9106
|
+
positionTooltip() {
|
|
9107
|
+
if (!this.tooltipElement)
|
|
9108
|
+
return;
|
|
9109
|
+
const hostRect = this._el.nativeElement.getBoundingClientRect();
|
|
9110
|
+
const tooltipRect = this.tooltipElement.getBoundingClientRect();
|
|
9111
|
+
const position = this.position();
|
|
9112
|
+
let top = 0;
|
|
9113
|
+
let left = 0;
|
|
9114
|
+
switch (position) {
|
|
9115
|
+
case 'top':
|
|
9116
|
+
top = hostRect.top + window.scrollY - tooltipRect.height - 8;
|
|
9117
|
+
left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
|
|
9118
|
+
break;
|
|
9119
|
+
case 'bottom':
|
|
9120
|
+
top = hostRect.bottom + window.scrollY + 8;
|
|
9121
|
+
left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
|
|
9122
|
+
break;
|
|
9123
|
+
case 'left':
|
|
9124
|
+
top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
|
|
9125
|
+
left = hostRect.left + window.scrollX - tooltipRect.width - 8;
|
|
9126
|
+
break;
|
|
9127
|
+
case 'right':
|
|
9128
|
+
top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
|
|
9129
|
+
left = hostRect.right + window.scrollX + 8;
|
|
9130
|
+
break;
|
|
9131
|
+
}
|
|
9132
|
+
this._renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
|
|
9133
|
+
this._renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
|
|
9134
|
+
}
|
|
9135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9136
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", 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 }); }
|
|
9137
|
+
}
|
|
9138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevTooltipDirective, decorators: [{
|
|
9139
|
+
type: Directive,
|
|
9140
|
+
args: [{
|
|
9141
|
+
selector: '[tcRevTooltip]',
|
|
9142
|
+
standalone: true
|
|
9143
|
+
}]
|
|
9144
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { onMouseEnter: [{
|
|
9145
|
+
type: HostListener,
|
|
9146
|
+
args: ['mouseenter']
|
|
9147
|
+
}], onMouseLeave: [{
|
|
9148
|
+
type: HostListener,
|
|
9149
|
+
args: ['mouseleave']
|
|
9150
|
+
}] } });
|
|
8881
9151
|
|
|
8882
|
-
|
|
9152
|
+
class TcRevIconButtonDirective {
|
|
9153
|
+
constructor(_el) {
|
|
9154
|
+
this._el = _el;
|
|
9155
|
+
this.color = input('primary');
|
|
9156
|
+
this.size = input('sm');
|
|
9157
|
+
this.tcRevIconButton = input('filled');
|
|
9158
|
+
effect(() => {
|
|
9159
|
+
this.setClasses();
|
|
9160
|
+
});
|
|
9161
|
+
}
|
|
9162
|
+
setClasses() {
|
|
9163
|
+
const tokenList = this._el.nativeElement.classList;
|
|
9164
|
+
tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
|
|
9165
|
+
let tcRevIconButton = this.tcRevIconButton();
|
|
9166
|
+
if (!tcRevIconButton) {
|
|
9167
|
+
tcRevIconButton = 'filled';
|
|
9168
|
+
}
|
|
9169
|
+
this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
|
|
9170
|
+
this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}-icon`);
|
|
9171
|
+
this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevIconButton}`);
|
|
9172
|
+
}
|
|
9173
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevIconButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9174
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", 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 }); }
|
|
9175
|
+
}
|
|
9176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevIconButtonDirective, decorators: [{
|
|
9177
|
+
type: Directive,
|
|
9178
|
+
args: [{
|
|
9179
|
+
selector: 'button[tcRevIconButton]',
|
|
9180
|
+
host: {
|
|
9181
|
+
class: 'tc-rev-btn tc-rev-btn-icon'
|
|
9182
|
+
}
|
|
9183
|
+
}]
|
|
9184
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
9185
|
+
|
|
9186
|
+
var DropdownSize$1;
|
|
8883
9187
|
(function (DropdownSize) {
|
|
8884
9188
|
DropdownSize["sm"] = "sm";
|
|
8885
9189
|
DropdownSize["md"] = "md";
|
|
8886
9190
|
DropdownSize["lg"] = "lg";
|
|
8887
|
-
})(DropdownSize || (DropdownSize = {}));
|
|
9191
|
+
})(DropdownSize$1 || (DropdownSize$1 = {}));
|
|
8888
9192
|
const noop = () => { };
|
|
8889
9193
|
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
|
|
8890
9194
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -8906,14 +9210,14 @@ class TCloudUiDropdownComponent {
|
|
|
8906
9210
|
this.options = input.required(); // Lista de opções no novo formato
|
|
8907
9211
|
this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
|
|
8908
9212
|
this.value = model(null); // Two-way binding para o valor selecionado
|
|
8909
|
-
this.size = input(DropdownSize.sm);
|
|
9213
|
+
this.size = input(DropdownSize$1.sm);
|
|
8910
9214
|
this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
|
|
8911
9215
|
this.searchable = input(false); // Habilita campo de busca
|
|
8912
9216
|
this.searchPlaceholder = input('Buscar...'); // Placeholder do campo de busca
|
|
8913
9217
|
this.optionSelected = output(); // Emissor para o valor selecionado
|
|
8914
9218
|
this.selectedOption = signal(null); // Opção selecionada
|
|
8915
9219
|
this.isOpen = false; // Controla se o dropdown está aberto
|
|
8916
|
-
this.dropdownSize = DropdownSize;
|
|
9220
|
+
this.dropdownSize = DropdownSize$1;
|
|
8917
9221
|
this.isDesktop = this._deviceService.isDesktop;
|
|
8918
9222
|
this.isMobile = this._deviceService.isMobile;
|
|
8919
9223
|
this.searchText = signal(''); // Texto de busca
|
|
@@ -9048,7 +9352,7 @@ class TCloudUiDropdownComponent {
|
|
|
9048
9352
|
this._disabledByForm.set(isDisabled);
|
|
9049
9353
|
}
|
|
9050
9354
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9051
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"isDisabled()\"\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]=\"isDisabled()\"\n [disabled]=\"isDisabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"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 <!-- Campo de busca -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); 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 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 <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\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 tcloudUiIconButton=\"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 <!-- Campo de busca mobile -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search tcloud-ui-dropdown-search--mobile\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); 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 <!-- Mensagem quando nenhum item for encontrado na busca mobile -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results tcloud-ui-dropdown-no-results--mobile\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\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);border:1px solid var(--c-neutral-300);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 .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic}.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}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-12) 0;margin-bottom:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{height:var(--size-40);font-size:var(--f-size-14);padding:var(--size-12) var(--size-40) var(--size-12) var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{left:var(--size-12);font-size:var(--f-size-14)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{right:var(--size-12);padding:var(--size-4)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-no-results--mobile{padding:var(--size-16) var(--size-12);font-size:var(--f-size-14);color:var(--c-neutral-600)}\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: TCloudUiIconButtonDirective, selector: "button[tcloudUiIconButton]", inputs: ["color", "size", "tcloudUiIconButton"] }] }); }
|
|
9355
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"isDisabled()\"\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]=\"isDisabled()\"\n [disabled]=\"isDisabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"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 <!-- Campo de busca -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); 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 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 <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\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 <!-- Campo de busca mobile -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search tcloud-ui-dropdown-search--mobile\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); 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 <!-- Mensagem quando nenhum item for encontrado na busca mobile -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results tcloud-ui-dropdown-no-results--mobile\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\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);border:1px solid var(--c-neutral-300);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 .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic}.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}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-12) 0;margin-bottom:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{height:var(--size-40);font-size:var(--f-size-14);padding:var(--size-12) var(--size-40) var(--size-12) var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{left:var(--size-12);font-size:var(--f-size-14)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{right:var(--size-12);padding:var(--size-4)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-no-results--mobile{padding:var(--size-16) var(--size-12);font-size:var(--f-size-14);color:var(--c-neutral-600)}\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: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
|
|
9052
9356
|
}
|
|
9053
9357
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDropdownComponent, decorators: [{
|
|
9054
9358
|
type: Component,
|
|
@@ -9056,8 +9360,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
9056
9360
|
CommonModule,
|
|
9057
9361
|
FormsModule,
|
|
9058
9362
|
ReactiveFormsModule,
|
|
9059
|
-
|
|
9060
|
-
], providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"isDisabled()\"\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]=\"isDisabled()\"\n [disabled]=\"isDisabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"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 <!-- Campo de busca -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); 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 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 <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\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 tcloudUiIconButton=\"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 <!-- Campo de busca mobile -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search tcloud-ui-dropdown-search--mobile\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); 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 <!-- Mensagem quando nenhum item for encontrado na busca mobile -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results tcloud-ui-dropdown-no-results--mobile\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\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);border:1px solid var(--c-neutral-300);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 .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic}.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}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-12) 0;margin-bottom:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{height:var(--size-40);font-size:var(--f-size-14);padding:var(--size-12) var(--size-40) var(--size-12) var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{left:var(--size-12);font-size:var(--f-size-14)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{right:var(--size-12);padding:var(--size-4)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-no-results--mobile{padding:var(--size-16) var(--size-12);font-size:var(--f-size-14);color:var(--c-neutral-600)}\n"] }]
|
|
9363
|
+
TcRevTooltipDirective,
|
|
9364
|
+
TcRevIconButtonDirective
|
|
9365
|
+
], providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"isDisabled()\"\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]=\"isDisabled()\"\n [disabled]=\"isDisabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"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 <!-- Campo de busca -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); 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 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 <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\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 <!-- Campo de busca mobile -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search tcloud-ui-dropdown-search--mobile\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); 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 <!-- Mensagem quando nenhum item for encontrado na busca mobile -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results tcloud-ui-dropdown-no-results--mobile\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\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);border:1px solid var(--c-neutral-300);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 .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic}.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}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-12) 0;margin-bottom:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{height:var(--size-40);font-size:var(--f-size-14);padding:var(--size-12) var(--size-40) var(--size-12) var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{left:var(--size-12);font-size:var(--f-size-14)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{right:var(--size-12);padding:var(--size-4)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-no-results--mobile{padding:var(--size-16) var(--size-12);font-size:var(--f-size-14);color:var(--c-neutral-600)}\n"] }]
|
|
9061
9366
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
|
|
9062
9367
|
type: ViewChild,
|
|
9063
9368
|
args: ['menuTemplate']
|
|
@@ -9066,12 +9371,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
9066
9371
|
args: ['document:click', ['$event']]
|
|
9067
9372
|
}] } });
|
|
9068
9373
|
|
|
9069
|
-
var DropdownMultiSize;
|
|
9374
|
+
var DropdownMultiSize$1;
|
|
9070
9375
|
(function (DropdownMultiSize) {
|
|
9071
9376
|
DropdownMultiSize["sm"] = "sm";
|
|
9072
9377
|
DropdownMultiSize["md"] = "md";
|
|
9073
9378
|
DropdownMultiSize["lg"] = "lg";
|
|
9074
|
-
})(DropdownMultiSize || (DropdownMultiSize = {}));
|
|
9379
|
+
})(DropdownMultiSize$1 || (DropdownMultiSize$1 = {}));
|
|
9075
9380
|
class TCloudUiDropdownMultiComponent {
|
|
9076
9381
|
onDocumentClick(event) {
|
|
9077
9382
|
if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
|
|
@@ -9085,7 +9390,7 @@ class TCloudUiDropdownMultiComponent {
|
|
|
9085
9390
|
this.options = input.required(); // Lista de opções no novo formato
|
|
9086
9391
|
this.initialValues = input([]); // Valores pré-selecionados (deprecated - use values instead)
|
|
9087
9392
|
this.values = model([]); // Two-way binding para os valores selecionados
|
|
9088
|
-
this.size = input(DropdownMultiSize.sm);
|
|
9393
|
+
this.size = input(DropdownMultiSize$1.sm);
|
|
9089
9394
|
this.width = input(''); // Largura do dropdown
|
|
9090
9395
|
this.placeholder = input('Selecione'); // Placeholder quando nenhum item estiver selecionado
|
|
9091
9396
|
this.maxDisplayItems = input(2); // Máximo de itens a serem exibidos no botão
|
|
@@ -9094,7 +9399,7 @@ class TCloudUiDropdownMultiComponent {
|
|
|
9094
9399
|
this.optionsSelected = output(); // Emissor para os valores selecionados
|
|
9095
9400
|
this.selectedOptions = signal([]); // Opções selecionadas
|
|
9096
9401
|
this.isOpen = false; // Controla se o dropdown está aberto
|
|
9097
|
-
this.dropdownSize = DropdownMultiSize;
|
|
9402
|
+
this.dropdownSize = DropdownMultiSize$1;
|
|
9098
9403
|
this.searchText = signal(''); // Texto de busca
|
|
9099
9404
|
// Opções filtradas baseadas na busca
|
|
9100
9405
|
this.filteredOptions = computed(() => {
|
|
@@ -9321,7 +9626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
9321
9626
|
class TCloudUiSkeletonLoadingComponentStyle {
|
|
9322
9627
|
}
|
|
9323
9628
|
|
|
9324
|
-
var TagColorsEnum;
|
|
9629
|
+
var TagColorsEnum$1;
|
|
9325
9630
|
(function (TagColorsEnum) {
|
|
9326
9631
|
TagColorsEnum["neutral-50"] = "neutral-50";
|
|
9327
9632
|
TagColorsEnum["neutral-100"] = "neutral-100";
|
|
@@ -9355,12 +9660,12 @@ var TagColorsEnum;
|
|
|
9355
9660
|
TagColorsEnum["success-300"] = "success-300";
|
|
9356
9661
|
TagColorsEnum["success-400"] = "success-400";
|
|
9357
9662
|
TagColorsEnum["success-500"] = "success-500";
|
|
9358
|
-
})(TagColorsEnum || (TagColorsEnum = {}));
|
|
9663
|
+
})(TagColorsEnum$1 || (TagColorsEnum$1 = {}));
|
|
9359
9664
|
|
|
9360
9665
|
class TCloudUiTagComponent {
|
|
9361
9666
|
constructor() {
|
|
9362
9667
|
this.size = input('md');
|
|
9363
|
-
this.color = input(TagColorsEnum['primary-500']);
|
|
9668
|
+
this.color = input(TagColorsEnum$1['primary-500']);
|
|
9364
9669
|
this.variant = input('filled');
|
|
9365
9670
|
this.shape = input('rectangle');
|
|
9366
9671
|
this.fullWidth = input(false);
|
|
@@ -9622,6 +9927,38 @@ var TCloudUiDialogEventsEnum;
|
|
|
9622
9927
|
TCloudUiDialogEventsEnum[TCloudUiDialogEventsEnum["close"] = 1] = "close";
|
|
9623
9928
|
})(TCloudUiDialogEventsEnum || (TCloudUiDialogEventsEnum = {}));
|
|
9624
9929
|
|
|
9930
|
+
class TcRevSmallLoadingComponent {
|
|
9931
|
+
constructor() {
|
|
9932
|
+
/** Width of the loading spinner accepts string with CSS units (px, rem, em) */
|
|
9933
|
+
this.width = input('1.25rem');
|
|
9934
|
+
/** Margin top in pixels */
|
|
9935
|
+
this.marginTop = input(0);
|
|
9936
|
+
/** Margin bottom in pixels */
|
|
9937
|
+
this.marginBottom = input(0);
|
|
9938
|
+
/** Margin right in pixels */
|
|
9939
|
+
this.marginRight = input(0);
|
|
9940
|
+
/** Margin left in pixels */
|
|
9941
|
+
this.marginLeft = input(0);
|
|
9942
|
+
this.style = new TcRevSmallLoadingComponentStyle();
|
|
9943
|
+
}
|
|
9944
|
+
ngOnInit() {
|
|
9945
|
+
this.style.marginTop = `${this.marginTop()}px`;
|
|
9946
|
+
this.style.marginRight = `${this.marginRight()}px`;
|
|
9947
|
+
this.style.marginLeft = `${this.marginLeft()}px`;
|
|
9948
|
+
this.style.marginBottom = `${this.marginBottom()}px`;
|
|
9949
|
+
this.style.width = this.width();
|
|
9950
|
+
this.style.height = this.width();
|
|
9951
|
+
}
|
|
9952
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSmallLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9953
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: TcRevSmallLoadingComponent, isStandalone: true, selector: "tc-rev-small-loading", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-small-loading\">\n <span\n class=\"tc-rev-small-loading__spinner\"\n [ngStyle]=\"this.style\">\n </span>\n</div>\n", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tc-rev-small-loading{display:flex;align-items:center;justify-content:center}.tc-rev-small-loading__spinner{animation:rotation 1s linear infinite;border:3px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:inline-block;height:var(--size-20);width:var(--size-20)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
9954
|
+
}
|
|
9955
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSmallLoadingComponent, decorators: [{
|
|
9956
|
+
type: Component,
|
|
9957
|
+
args: [{ selector: 'tc-rev-small-loading', imports: [CommonModule], template: "<div class=\"tc-rev-small-loading\">\n <span\n class=\"tc-rev-small-loading__spinner\"\n [ngStyle]=\"this.style\">\n </span>\n</div>\n", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tc-rev-small-loading{display:flex;align-items:center;justify-content:center}.tc-rev-small-loading__spinner{animation:rotation 1s linear infinite;border:3px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:inline-block;height:var(--size-20);width:var(--size-20)}\n"] }]
|
|
9958
|
+
}] });
|
|
9959
|
+
class TcRevSmallLoadingComponentStyle {
|
|
9960
|
+
}
|
|
9961
|
+
|
|
9625
9962
|
class TCloudUiDialogComponent {
|
|
9626
9963
|
constructor() {
|
|
9627
9964
|
this.animation = 'visible';
|
|
@@ -9631,6 +9968,10 @@ class TCloudUiDialogComponent {
|
|
|
9631
9968
|
// * [Injects]
|
|
9632
9969
|
this.i18n = inject(I18nService);
|
|
9633
9970
|
}
|
|
9971
|
+
/** `true` quando o input de confirmação deve ser exibido/validado (flag + texto definidos). */
|
|
9972
|
+
get hasInputConfirmation() {
|
|
9973
|
+
return this.data?.showInputConfirmation !== false && !!this.data?.inputConfirmationText;
|
|
9974
|
+
}
|
|
9634
9975
|
onKeydownHandler(event) {
|
|
9635
9976
|
if (this.data?.disable || this.data?.loading)
|
|
9636
9977
|
return;
|
|
@@ -9645,7 +9986,7 @@ class TCloudUiDialogComponent {
|
|
|
9645
9986
|
* podem mudar por mutação no modelo após abrir o dialog.
|
|
9646
9987
|
*/
|
|
9647
9988
|
syncInputConfirmationDisabledState() {
|
|
9648
|
-
if (!this.
|
|
9989
|
+
if (!this.hasInputConfirmation)
|
|
9649
9990
|
return;
|
|
9650
9991
|
const shouldDisable = !!(this.data.disable || this.data.loading);
|
|
9651
9992
|
if (shouldDisable && this.inputConfirmationControl.enabled) {
|
|
@@ -9704,7 +10045,7 @@ class TCloudUiDialogComponent {
|
|
|
9704
10045
|
*/
|
|
9705
10046
|
confirm() {
|
|
9706
10047
|
if (!this.data.loading) {
|
|
9707
|
-
if (this.
|
|
10048
|
+
if (this.hasInputConfirmation) {
|
|
9708
10049
|
if (this.checkInputConfirmation()) {
|
|
9709
10050
|
this.confirmFunction(this);
|
|
9710
10051
|
}
|
|
@@ -9735,7 +10076,7 @@ class TCloudUiDialogComponent {
|
|
|
9735
10076
|
return this;
|
|
9736
10077
|
}
|
|
9737
10078
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TCloudUiDialogComponent, isStandalone: true, selector: "tcloud-ui-dialog", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (
|
|
10079
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TCloudUiDialogComponent, isStandalone: true, selector: "tcloud-ui-dialog", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (hasInputConfirmation)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:3000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--c-neutral-50);color:var(--c-neutral-700)}.container-dialog .container-header{display:flex;justify-content:space-between;align-items:center}.container-dialog .container-header .tc-title{font-size:18px;font-weight:700}.container-dialog .container-header .container-close-button{width:40px;height:40px;border-radius:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-neutral-600);border:1px solid var(--c-neutral-300)}.container-dialog .container-input-confirmation{display:grid;gap:8px}.container-dialog .container-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.container-dialog .container-footer button{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }, { kind: "component", type: TcRevSmallLoadingComponent, selector: "tc-rev-small-loading", inputs: ["width", "marginTop", "marginBottom", "marginRight", "marginLeft"] }], animations: [
|
|
9739
10080
|
trigger('fade', [
|
|
9740
10081
|
state('visible', style({ opacity: 1 })),
|
|
9741
10082
|
state('hide', style({ opacity: 0, top: '-38%' })),
|
|
@@ -9759,7 +10100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
9759
10100
|
]),
|
|
9760
10101
|
transition('visible => hide', animate('0.3s ease-out'))
|
|
9761
10102
|
])
|
|
9762
|
-
], standalone: true, imports: [CommonModule, ReactiveFormsModule, I18nTranslatePipe, TCloudUiLoadingComponent], template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (
|
|
10103
|
+
], standalone: true, imports: [CommonModule, ReactiveFormsModule, I18nTranslatePipe, TCloudUiLoadingComponent, TcRevSmallLoadingComponent], template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (hasInputConfirmation)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:3000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--c-neutral-50);color:var(--c-neutral-700)}.container-dialog .container-header{display:flex;justify-content:space-between;align-items:center}.container-dialog .container-header .tc-title{font-size:18px;font-weight:700}.container-dialog .container-header .container-close-button{width:40px;height:40px;border-radius:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-neutral-600);border:1px solid var(--c-neutral-300)}.container-dialog .container-input-confirmation{display:grid;gap:8px}.container-dialog .container-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.container-dialog .container-footer button{width:100%}\n"] }]
|
|
9763
10104
|
}], propDecorators: { onKeydownHandler: [{
|
|
9764
10105
|
type: HostListener,
|
|
9765
10106
|
args: ['document:keydown.escape', ['$event']]
|
|
@@ -9773,7 +10114,7 @@ var TCloudUiDialogTextConfirmationEnum;
|
|
|
9773
10114
|
})(TCloudUiDialogTextConfirmationEnum || (TCloudUiDialogTextConfirmationEnum = {}));
|
|
9774
10115
|
|
|
9775
10116
|
class TCloudUiDialogModel {
|
|
9776
|
-
constructor(_title, _description, _loading = false, _disable = false, _disableClickOutside = false, _inputConfirmationText, _buttonConfirmText, _buttonCancelText) {
|
|
10117
|
+
constructor(_title, _description, _loading = false, _disable = false, _disableClickOutside = false, _inputConfirmationText, _buttonConfirmText, _buttonCancelText, _showInputConfirmation = true) {
|
|
9777
10118
|
this.title = _title;
|
|
9778
10119
|
this.message = _description;
|
|
9779
10120
|
this.loading = _loading;
|
|
@@ -9782,6 +10123,7 @@ class TCloudUiDialogModel {
|
|
|
9782
10123
|
this.inputConfirmationText = _inputConfirmationText;
|
|
9783
10124
|
this.buttonConfirmText = _buttonConfirmText;
|
|
9784
10125
|
this.buttonCancelText = _buttonCancelText;
|
|
10126
|
+
this.showInputConfirmation = _showInputConfirmation;
|
|
9785
10127
|
}
|
|
9786
10128
|
}
|
|
9787
10129
|
|
|
@@ -9800,7 +10142,7 @@ class TCloudUiDialogService {
|
|
|
9800
10142
|
}
|
|
9801
10143
|
open(_data = {}) {
|
|
9802
10144
|
const componentRef = this.createDialogComponent();
|
|
9803
|
-
componentRef.instance.data = new TCloudUiDialogModel(_data.title || this.i18n.i18nTranslate('dialogConfirmation.default_title', 'Atenção'), _data.message || this.i18n.i18nTranslate('dialogConfirmation.default_message', 'Deseja realmente executar esta ação?'), _data.loading, _data.disable, _data.disableClickOutside, _data.inputConfirmationText || TCloudUiDialogTextConfirmationEnum.confirm, _data.buttonConfirmText, _data.buttonCancelText);
|
|
10145
|
+
componentRef.instance.data = new TCloudUiDialogModel(_data.title || this.i18n.i18nTranslate('dialogConfirmation.default_title', 'Atenção'), _data.message || this.i18n.i18nTranslate('dialogConfirmation.default_message', 'Deseja realmente executar esta ação?'), _data.loading, _data.disable, _data.disableClickOutside, _data.inputConfirmationText || TCloudUiDialogTextConfirmationEnum.confirm, _data.buttonConfirmText, _data.buttonCancelText, _data.showInputConfirmation ?? true);
|
|
9804
10146
|
if (componentRef.instance.data.inputConfirmationText)
|
|
9805
10147
|
this.setTextConfirmation(componentRef.instance);
|
|
9806
10148
|
componentRef.instance.events.subscribe(event => {
|
|
@@ -10007,6 +10349,7 @@ const COMPONENTS = [
|
|
|
10007
10349
|
TCloudUiModalBodyComponent,
|
|
10008
10350
|
TCloudUiModalHeaderComponent,
|
|
10009
10351
|
TCloudUiModalFooterComponent,
|
|
10352
|
+
TCloudUiPopoverComponent,
|
|
10010
10353
|
TCloudUiMultiInputComponent,
|
|
10011
10354
|
TCloudUiMultiSelectComponent,
|
|
10012
10355
|
TCloudUiNotFoundComponent,
|
|
@@ -10143,6 +10486,7 @@ class TCloudUiModule {
|
|
|
10143
10486
|
TCloudUiModalBodyComponent,
|
|
10144
10487
|
TCloudUiModalHeaderComponent,
|
|
10145
10488
|
TCloudUiModalFooterComponent,
|
|
10489
|
+
TCloudUiPopoverComponent,
|
|
10146
10490
|
TCloudUiMultiInputComponent,
|
|
10147
10491
|
TCloudUiMultiSelectComponent,
|
|
10148
10492
|
TCloudUiNotFoundComponent,
|
|
@@ -10241,6 +10585,7 @@ class TCloudUiModule {
|
|
|
10241
10585
|
TCloudUiModalBodyComponent,
|
|
10242
10586
|
TCloudUiModalHeaderComponent,
|
|
10243
10587
|
TCloudUiModalFooterComponent,
|
|
10588
|
+
TCloudUiPopoverComponent,
|
|
10244
10589
|
TCloudUiMultiInputComponent,
|
|
10245
10590
|
TCloudUiMultiSelectComponent,
|
|
10246
10591
|
TCloudUiNotFoundComponent,
|
|
@@ -10345,6 +10690,7 @@ class TCloudUiModule {
|
|
|
10345
10690
|
TCloudUiModalBodyComponent,
|
|
10346
10691
|
TCloudUiModalHeaderComponent,
|
|
10347
10692
|
TCloudUiModalFooterComponent,
|
|
10693
|
+
TCloudUiPopoverComponent,
|
|
10348
10694
|
TCloudUiMultiInputComponent,
|
|
10349
10695
|
TCloudUiMultiSelectComponent,
|
|
10350
10696
|
TCloudUiNotFoundComponent,
|
|
@@ -10485,12 +10831,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
10485
10831
|
args: [{ selector: 'tcloud-ui-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 <tcloud-ui-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"position()\"\n [parentOffsetTop]=\"0\"\n [selectedOption]=\"this.selectedOption()\">\n </tcloud-ui-dropdown-sub-menu>\n }\n </li>\n }\n</ul>\n", styles: [".sub-menu{position:absolute;min-width:160px;background:#fff;box-shadow:var(--shadow-md);z-index:1001;padding:0;margin:0;list-style:none}.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-900);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"] }]
|
|
10486
10832
|
}] });
|
|
10487
10833
|
|
|
10488
|
-
var MultiLevelDropdownSize;
|
|
10834
|
+
var MultiLevelDropdownSize$1;
|
|
10489
10835
|
(function (MultiLevelDropdownSize) {
|
|
10490
10836
|
MultiLevelDropdownSize["sm"] = "sm";
|
|
10491
10837
|
MultiLevelDropdownSize["md"] = "md";
|
|
10492
10838
|
MultiLevelDropdownSize["lg"] = "lg";
|
|
10493
|
-
})(MultiLevelDropdownSize || (MultiLevelDropdownSize = {}));
|
|
10839
|
+
})(MultiLevelDropdownSize$1 || (MultiLevelDropdownSize$1 = {}));
|
|
10494
10840
|
class TCloudUiDropdownMultiLevelComponent {
|
|
10495
10841
|
onDocumentClick(event) {
|
|
10496
10842
|
if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
|
|
@@ -10499,11 +10845,11 @@ class TCloudUiDropdownMultiLevelComponent {
|
|
|
10499
10845
|
}
|
|
10500
10846
|
constructor(elementRef) {
|
|
10501
10847
|
this.elementRef = elementRef;
|
|
10502
|
-
this.dropdownSize = MultiLevelDropdownSize;
|
|
10848
|
+
this.dropdownSize = MultiLevelDropdownSize$1;
|
|
10503
10849
|
this.menu = input.required();
|
|
10504
10850
|
this.subMenuPosition = input('right');
|
|
10505
10851
|
this.disabled = input(false);
|
|
10506
|
-
this.size = input(MultiLevelDropdownSize.sm);
|
|
10852
|
+
this.size = input(MultiLevelDropdownSize$1.sm);
|
|
10507
10853
|
this.initialValue = input(null); // Valor pré-selecionado
|
|
10508
10854
|
this.optionSelected = output();
|
|
10509
10855
|
this.selectedOption = signal(null);
|
|
@@ -10619,93 +10965,1794 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
10619
10965
|
}]
|
|
10620
10966
|
}], ctorParameters: () => [] });
|
|
10621
10967
|
|
|
10622
|
-
|
|
10623
|
-
|
|
10624
|
-
|
|
10625
|
-
|
|
10626
|
-
|
|
10627
|
-
|
|
10628
|
-
|
|
10629
|
-
|
|
10630
|
-
|
|
10631
|
-
|
|
10632
|
-
|
|
10633
|
-
|
|
10634
|
-
|
|
10635
|
-
|
|
10636
|
-
|
|
10637
|
-
|
|
10638
|
-
|
|
10639
|
-
|
|
10640
|
-
|
|
10641
|
-
|
|
10642
|
-
|
|
10643
|
-
|
|
10644
|
-
|
|
10645
|
-
|
|
10646
|
-
|
|
10647
|
-
|
|
10648
|
-
|
|
10649
|
-
|
|
10650
|
-
|
|
10651
|
-
|
|
10652
|
-
|
|
10653
|
-
|
|
10654
|
-
|
|
10655
|
-
|
|
10656
|
-
|
|
10657
|
-
|
|
10658
|
-
|
|
10659
|
-
|
|
10660
|
-
|
|
10661
|
-
|
|
10662
|
-
|
|
10663
|
-
|
|
10664
|
-
|
|
10665
|
-
|
|
10666
|
-
|
|
10667
|
-
|
|
10668
|
-
|
|
10669
|
-
|
|
10670
|
-
|
|
10671
|
-
|
|
10672
|
-
|
|
10673
|
-
|
|
10674
|
-
|
|
10675
|
-
}
|
|
10676
|
-
}
|
|
10677
|
-
|
|
10678
|
-
|
|
10679
|
-
|
|
10680
|
-
|
|
10681
|
-
}
|
|
10682
|
-
|
|
10683
|
-
|
|
10684
|
-
|
|
10685
|
-
|
|
10686
|
-
|
|
10687
|
-
|
|
10688
|
-
|
|
10689
|
-
|
|
10690
|
-
|
|
10691
|
-
|
|
10692
|
-
|
|
10693
|
-
|
|
10694
|
-
|
|
10695
|
-
|
|
10696
|
-
|
|
10697
|
-
|
|
10698
|
-
|
|
10699
|
-
|
|
10700
|
-
|
|
10701
|
-
|
|
10702
|
-
|
|
10703
|
-
|
|
10704
|
-
|
|
10705
|
-
|
|
10706
|
-
|
|
10707
|
-
|
|
10708
|
-
|
|
10968
|
+
class TcRevCalendarComponent {
|
|
10969
|
+
constructor() {
|
|
10970
|
+
this.appointments = []; // Updated to use the new type
|
|
10971
|
+
/** Active date format
|
|
10972
|
+
* @format YYYY-MM-DD
|
|
10973
|
+
* @example 2023-10-01
|
|
10974
|
+
*/
|
|
10975
|
+
this.activeDate = input();
|
|
10976
|
+
this.innerActiveDate = computed(() => {
|
|
10977
|
+
if (!this.activeDate())
|
|
10978
|
+
return '';
|
|
10979
|
+
const date = new Date(`${this.activeDate()} 00:00:00`);
|
|
10980
|
+
return date;
|
|
10981
|
+
});
|
|
10982
|
+
this.onSelectDate = output();
|
|
10983
|
+
this.currentDate = new Date();
|
|
10984
|
+
this.viewMode = 'days';
|
|
10985
|
+
this.yearOffset = 0; // Offset for year navigation
|
|
10986
|
+
}
|
|
10987
|
+
ngOnInit() {
|
|
10988
|
+
this.updateMonth();
|
|
10989
|
+
this.updateYear();
|
|
10990
|
+
this.updateDaysOfWeek();
|
|
10991
|
+
this.updateCalendarDays();
|
|
10992
|
+
this.updateCalendarMonths();
|
|
10993
|
+
this.updateCalendarYears();
|
|
10994
|
+
}
|
|
10995
|
+
// Methods to update fixed properties
|
|
10996
|
+
updateMonth() {
|
|
10997
|
+
this.month = this.currentDate.toLocaleString('default', { month: 'long' });
|
|
10998
|
+
}
|
|
10999
|
+
updateYear() {
|
|
11000
|
+
this.year = this.currentDate.getFullYear();
|
|
11001
|
+
}
|
|
11002
|
+
updateDaysOfWeek() {
|
|
11003
|
+
this.daysOfWeek = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
|
|
11004
|
+
}
|
|
11005
|
+
updateCalendarDays() {
|
|
11006
|
+
const year = this.currentDate.getFullYear();
|
|
11007
|
+
const month = this.currentDate.getMonth();
|
|
11008
|
+
const firstDayOfMonth = new Date(year, month, 1);
|
|
11009
|
+
const lastDayOfMonth = new Date(year, month + 1, 0);
|
|
11010
|
+
const daysInLastMonth = firstDayOfMonth.getDay();
|
|
11011
|
+
const daysInCurrentMonth = lastDayOfMonth.getDate();
|
|
11012
|
+
const calendarDays = [];
|
|
11013
|
+
// Add last days of the previous month
|
|
11014
|
+
for (let i = daysInLastMonth - 1; i >= 0; i--) {
|
|
11015
|
+
const date = new Date(year, month, -i);
|
|
11016
|
+
calendarDays.push({ date, isCurrentMonth: false });
|
|
11017
|
+
}
|
|
11018
|
+
// Add all days of the current month
|
|
11019
|
+
for (let i = 1; i <= daysInCurrentMonth; i++) {
|
|
11020
|
+
const date = new Date(year, month, i);
|
|
11021
|
+
calendarDays.push({ date, isCurrentMonth: true });
|
|
11022
|
+
}
|
|
11023
|
+
// Add first days of the next month
|
|
11024
|
+
const remainingDays = 35 - calendarDays.length;
|
|
11025
|
+
for (let i = 1; i <= remainingDays; i++) {
|
|
11026
|
+
const date = new Date(year, month + 1, i);
|
|
11027
|
+
calendarDays.push({ date, isCurrentMonth: false });
|
|
11028
|
+
}
|
|
11029
|
+
this.calendarDays = calendarDays;
|
|
11030
|
+
console.log('calendarDays', this.calendarDays[16].date);
|
|
11031
|
+
}
|
|
11032
|
+
updateCalendarMonths() {
|
|
11033
|
+
this.calendarMonths = Array.from({ length: 12 }, (_, i) => new Date(this.year, i).toLocaleString('default', { month: 'long' }));
|
|
11034
|
+
}
|
|
11035
|
+
updateCalendarYears() {
|
|
11036
|
+
const startYear = this.year - 5 + this.yearOffset * 12;
|
|
11037
|
+
this.calendarYears = Array.from({ length: 12 }, (_, i) => startYear + i);
|
|
11038
|
+
}
|
|
11039
|
+
// Existing methods updated to call the update methods
|
|
11040
|
+
changeMonth(offset) {
|
|
11041
|
+
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + offset, 1);
|
|
11042
|
+
this.updateMonth();
|
|
11043
|
+
this.updateYear();
|
|
11044
|
+
this.updateCalendarDays();
|
|
11045
|
+
}
|
|
11046
|
+
selectMonth(monthIndex) {
|
|
11047
|
+
this.currentDate = new Date(this.year, monthIndex, 1);
|
|
11048
|
+
this.viewMode = 'days';
|
|
11049
|
+
this.updateMonth();
|
|
11050
|
+
this.updateCalendarDays();
|
|
11051
|
+
}
|
|
11052
|
+
changeYearOffset(offset) {
|
|
11053
|
+
if (this.viewMode === 'months') {
|
|
11054
|
+
// Adjust the current date by adding or subtracting a year
|
|
11055
|
+
this.currentDate = new Date(this.currentDate.getFullYear() + offset, this.currentDate.getMonth(), 1);
|
|
11056
|
+
this.updateYear();
|
|
11057
|
+
this.updateCalendarMonths();
|
|
11058
|
+
}
|
|
11059
|
+
else if (this.viewMode === 'years') {
|
|
11060
|
+
// Adjust the year offset for the year view
|
|
11061
|
+
this.yearOffset += offset;
|
|
11062
|
+
this.updateCalendarYears();
|
|
11063
|
+
}
|
|
11064
|
+
}
|
|
11065
|
+
selectYear(year) {
|
|
11066
|
+
this.currentDate = new Date(year, this.currentDate.getMonth(), 1);
|
|
11067
|
+
this.viewMode = 'months';
|
|
11068
|
+
this.updateYear();
|
|
11069
|
+
this.updateCalendarMonths();
|
|
11070
|
+
}
|
|
11071
|
+
toggleViewMode(mode) {
|
|
11072
|
+
this.viewMode = mode;
|
|
11073
|
+
if (mode === 'years') {
|
|
11074
|
+
this.yearOffset = 0; // Reset year offset when entering year view
|
|
11075
|
+
this.updateCalendarYears();
|
|
11076
|
+
}
|
|
11077
|
+
}
|
|
11078
|
+
isAppointment(date) {
|
|
11079
|
+
const dateString = date.toISOString().split('T')[0];
|
|
11080
|
+
return this.appointments.find(appointment => appointment.appointmentDate === dateString);
|
|
11081
|
+
}
|
|
11082
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11083
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TcRevCalendarComponent, isStandalone: true, selector: "tc-rev-calendar", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: false, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectDate: "onSelectDate" }, ngImport: i0, template: "<div class=\"tc-rev-calendar\">\n <div class=\"calendar-header\">\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\" *ngIf=\"viewMode === 'days'\"><i class=\"fa-light fa-chevron-left\"></i></button>\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\" *ngIf=\"viewMode === 'months' || viewMode === 'years'\"><i class=\"fa-light fa-chevron-left\"></i></button>\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n } \n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\" *ngIf=\"viewMode === 'months' || viewMode === 'years'\"><i class=\"fa-light fa-chevron-right\"></i></button>\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\" *ngIf=\"viewMode === 'days'\"><i class=\"fa-light fa-chevron-right\"></i></button>\n </div>\n\n <div class=\"calendar-grid\" *ngIf=\"viewMode === 'days'\">\n <div class=\"day-header\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n <button\n *ngFor=\"let day of calendarDays\"\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n <span\n *ngIf=\"isAppointment(day.date)\"\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n {{ day.date.getDate() }}\n </button>\n </div>\n\n <div class=\"calendar-grid months\" *ngIf=\"viewMode === 'months'\">\n <div\n class=\"month\"\n *ngFor=\"let month of calendarMonths; let i = index\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n </div>\n\n <div class=\"calendar-grid years\" *ngIf=\"viewMode === 'years'\">\n <div\n class=\"year\"\n *ngFor=\"let year of calendarYears\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n </div>\n</div>", styles: [":host{display:block}.tc-rev-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tc-rev-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tc-rev-calendar .calendar-header .prev-btn,.tc-rev-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tc-rev-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tc-rev-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tc-rev-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tc-rev-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tc-rev-calendar .day:hover,.tc-rev-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .day:active,.tc-rev-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-rev-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tc-rev-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tc-rev-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tc-rev-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tc-rev-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tc-rev-calendar .month,.tc-rev-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tc-rev-calendar .month:hover,.tc-rev-calendar .month:focus,.tc-rev-calendar .year:hover,.tc-rev-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .month:active,.tc-rev-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\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"] }] }); }
|
|
11084
|
+
}
|
|
11085
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevCalendarComponent, decorators: [{
|
|
11086
|
+
type: Component,
|
|
11087
|
+
args: [{ selector: 'tc-rev-calendar', imports: [
|
|
11088
|
+
CommonModule,
|
|
11089
|
+
], template: "<div class=\"tc-rev-calendar\">\n <div class=\"calendar-header\">\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\" *ngIf=\"viewMode === 'days'\"><i class=\"fa-light fa-chevron-left\"></i></button>\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\" *ngIf=\"viewMode === 'months' || viewMode === 'years'\"><i class=\"fa-light fa-chevron-left\"></i></button>\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n } \n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\" *ngIf=\"viewMode === 'months' || viewMode === 'years'\"><i class=\"fa-light fa-chevron-right\"></i></button>\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\" *ngIf=\"viewMode === 'days'\"><i class=\"fa-light fa-chevron-right\"></i></button>\n </div>\n\n <div class=\"calendar-grid\" *ngIf=\"viewMode === 'days'\">\n <div class=\"day-header\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n <button\n *ngFor=\"let day of calendarDays\"\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n <span\n *ngIf=\"isAppointment(day.date)\"\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n {{ day.date.getDate() }}\n </button>\n </div>\n\n <div class=\"calendar-grid months\" *ngIf=\"viewMode === 'months'\">\n <div\n class=\"month\"\n *ngFor=\"let month of calendarMonths; let i = index\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n </div>\n\n <div class=\"calendar-grid years\" *ngIf=\"viewMode === 'years'\">\n <div\n class=\"year\"\n *ngFor=\"let year of calendarYears\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n </div>\n</div>", styles: [":host{display:block}.tc-rev-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tc-rev-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tc-rev-calendar .calendar-header .prev-btn,.tc-rev-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tc-rev-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tc-rev-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tc-rev-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tc-rev-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tc-rev-calendar .day:hover,.tc-rev-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .day:active,.tc-rev-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-rev-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tc-rev-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tc-rev-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tc-rev-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tc-rev-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tc-rev-calendar .month,.tc-rev-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tc-rev-calendar .month:hover,.tc-rev-calendar .month:focus,.tc-rev-calendar .year:hover,.tc-rev-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .month:active,.tc-rev-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
|
|
11090
|
+
}], propDecorators: { appointments: [{
|
|
11091
|
+
type: Input
|
|
11092
|
+
}] } });
|
|
11093
|
+
|
|
11094
|
+
class TcRevCardAccordionComponent {
|
|
11095
|
+
constructor() {
|
|
11096
|
+
this._viewPort = inject(TCloudUiDeviceUtilsService);
|
|
11097
|
+
this.toggle = output();
|
|
11098
|
+
this.title = input('');
|
|
11099
|
+
this.iconClass = input('fa-light fa-hard-drive');
|
|
11100
|
+
this.showMoreText = input('Exibir mais');
|
|
11101
|
+
this.showLessText = input('Exibir menos');
|
|
11102
|
+
this.badge = input(null);
|
|
11103
|
+
this.isOpen = model();
|
|
11104
|
+
this.isDesktop = this._viewPort.isDesktop;
|
|
11105
|
+
}
|
|
11106
|
+
toggleAccordion() {
|
|
11107
|
+
this.isOpen.update((current) => !current);
|
|
11108
|
+
this.toggle.emit(this.isOpen());
|
|
11109
|
+
}
|
|
11110
|
+
/**
|
|
11111
|
+
* APPLY FUNCTIONS RESPONSIVE < 500PX
|
|
11112
|
+
*/
|
|
11113
|
+
get accordionExtraClasses() {
|
|
11114
|
+
if (this.isDesktop()) {
|
|
11115
|
+
return ['pad-16'];
|
|
11116
|
+
}
|
|
11117
|
+
//Responsive Classes
|
|
11118
|
+
return ['pad-14'];
|
|
11119
|
+
}
|
|
11120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevCardAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TcRevCardAccordionComponent, isStandalone: true, selector: "tc-rev-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=\"tc-rev-card-accordion tc-rev-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=\"tc-rev-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}.tc-rev-card-accordion{border-color:var(--c-neutral-400)}@media (max-width: 480px){.tc-rev-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"] }] }); }
|
|
11122
|
+
}
|
|
11123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevCardAccordionComponent, decorators: [{
|
|
11124
|
+
type: Component,
|
|
11125
|
+
args: [{ selector: 'tc-rev-card-accordion', imports: [CommonModule, TcRevCardTitleComponent, TcRevButtonDirective], template: "<div class=\"tc-rev-card-accordion tc-rev-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=\"tc-rev-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}.tc-rev-card-accordion{border-color:var(--c-neutral-400)}@media (max-width: 480px){.tc-rev-card-accordion__arrow-mobile{font-size:var(--f-size-16);padding:0 var(--size-6)}}\n"] }]
|
|
11126
|
+
}] });
|
|
11127
|
+
|
|
11128
|
+
class TcRevCardComponent {
|
|
11129
|
+
constructor() {
|
|
11130
|
+
this._viewPort = inject(TCloudUiDeviceUtilsService);
|
|
11131
|
+
this.isDesktop = this._viewPort.isDesktop;
|
|
11132
|
+
}
|
|
11133
|
+
/**
|
|
11134
|
+
* APPLY FUNCTIONS RESPONSIVE < 480PX
|
|
11135
|
+
*/
|
|
11136
|
+
get extraClasses() {
|
|
11137
|
+
if (this.isDesktop()) {
|
|
11138
|
+
return ['shadow-md', 'pad-16'];
|
|
11139
|
+
}
|
|
11140
|
+
//Responsive Classes
|
|
11141
|
+
return ['shadow-sm', 'pad-14'];
|
|
11142
|
+
}
|
|
11143
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TcRevCardComponent, isStandalone: true, selector: "tc-rev-card", ngImport: i0, template: "<div class=\"tc-rev-card bg-c-neutral-50 bor-rad-16\"\n[ngClass]=\"extraClasses\"\n>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
11145
|
+
}
|
|
11146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevCardComponent, decorators: [{
|
|
11147
|
+
type: Component,
|
|
11148
|
+
args: [{ selector: 'tc-rev-card', imports: [CommonModule], template: "<div class=\"tc-rev-card bg-c-neutral-50 bor-rad-16\"\n[ngClass]=\"extraClasses\"\n>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
|
|
11149
|
+
}] });
|
|
11150
|
+
|
|
11151
|
+
class TcRevCheckboxDirective {
|
|
11152
|
+
constructor() { }
|
|
11153
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
11154
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TcRevCheckboxDirective, isStandalone: true, selector: "input[type=\"checkbox\"][tcRevCheckbox]", host: { classAttribute: "tc-rev-checkbox" }, ngImport: i0 }); }
|
|
11155
|
+
}
|
|
11156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevCheckboxDirective, decorators: [{
|
|
11157
|
+
type: Directive,
|
|
11158
|
+
args: [{
|
|
11159
|
+
selector: 'input[type="checkbox"][tcRevCheckbox]',
|
|
11160
|
+
host: {
|
|
11161
|
+
class: 'tc-rev-checkbox'
|
|
11162
|
+
}
|
|
11163
|
+
}]
|
|
11164
|
+
}], ctorParameters: () => [] });
|
|
11165
|
+
|
|
11166
|
+
var DropdownSize;
|
|
11167
|
+
(function (DropdownSize) {
|
|
11168
|
+
DropdownSize["sm"] = "sm";
|
|
11169
|
+
DropdownSize["md"] = "md";
|
|
11170
|
+
DropdownSize["lg"] = "lg";
|
|
11171
|
+
})(DropdownSize || (DropdownSize = {}));
|
|
11172
|
+
class TcRevDropdownComponent {
|
|
11173
|
+
onDocumentClick(event) {
|
|
11174
|
+
if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
|
|
11175
|
+
this.isOpen = false;
|
|
11176
|
+
}
|
|
11177
|
+
}
|
|
11178
|
+
constructor(elementRef) {
|
|
11179
|
+
this.elementRef = elementRef;
|
|
11180
|
+
this._deviceService = inject(TCloudUiDeviceUtilsService);
|
|
11181
|
+
this.label = input(''); // Label que será exibida
|
|
11182
|
+
this.disabled = input(false); // Desabilita o dropdown
|
|
11183
|
+
this.options = input.required(); // Lista de opções no novo formato
|
|
11184
|
+
this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
|
|
11185
|
+
this.value = model(null); // Two-way binding para o valor selecionado
|
|
11186
|
+
this.size = input(DropdownSize.sm);
|
|
11187
|
+
this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
|
|
11188
|
+
this.optionSelected = output(); // Emissor para o valor selecionado
|
|
11189
|
+
this.selectedOption = signal(null); // Opção selecionada
|
|
11190
|
+
this.isOpen = false; // Controla se o dropdown está aberto
|
|
11191
|
+
this.dropdownSize = DropdownSize;
|
|
11192
|
+
this.isDesktop = this._deviceService.isDesktop;
|
|
11193
|
+
this.isMobile = this._deviceService.isMobile;
|
|
11194
|
+
}
|
|
11195
|
+
ngOnChanges(_simpleChanges) {
|
|
11196
|
+
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
11197
|
+
if (_simpleChanges['initialValue'] ||
|
|
11198
|
+
_simpleChanges['options'] ||
|
|
11199
|
+
_simpleChanges['value']) {
|
|
11200
|
+
const valueToUse = this.value() || this.initialValue();
|
|
11201
|
+
this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
|
|
11202
|
+
}
|
|
11203
|
+
}
|
|
11204
|
+
ngOnInit() {
|
|
11205
|
+
// Prioriza o valor do model, mas mantém compatibilidade com initialValue
|
|
11206
|
+
const valueToUse = this.value() || this.initialValue();
|
|
11207
|
+
const foundOption = this.options().find((option) => option.value === valueToUse) || null;
|
|
11208
|
+
this.selectedOption.set(foundOption);
|
|
11209
|
+
// Se não havia valor no model mas havia initialValue, sincroniza o model
|
|
11210
|
+
if (!this.value() && this.initialValue() && foundOption) {
|
|
11211
|
+
this.value.set(foundOption.value);
|
|
11212
|
+
}
|
|
11213
|
+
// Escuta mudanças no model e atualiza a opção selecionada
|
|
11214
|
+
this.value.subscribe((newValue) => {
|
|
11215
|
+
const option = this.options().find((opt) => opt.value === newValue) || null;
|
|
11216
|
+
if (this.selectedOption() !== option) {
|
|
11217
|
+
this.selectedOption.set(option);
|
|
11218
|
+
}
|
|
11219
|
+
});
|
|
11220
|
+
}
|
|
11221
|
+
toggleDropdown() {
|
|
11222
|
+
// Abertura do dropdown para mobile
|
|
11223
|
+
if (this.isMobile()) {
|
|
11224
|
+
this._deviceService.openDropdownDevice(this.menuTemplate);
|
|
11225
|
+
return;
|
|
11226
|
+
}
|
|
11227
|
+
this.isOpen = !this.isOpen;
|
|
11228
|
+
}
|
|
11229
|
+
selectOption(option) {
|
|
11230
|
+
this.selectedOption.set(option);
|
|
11231
|
+
this.value.set(option.value); // Atualiza o model com two-way binding
|
|
11232
|
+
this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
|
|
11233
|
+
// Fechamento dd dropdown para mobile
|
|
11234
|
+
if (this.isMobile()) {
|
|
11235
|
+
this._deviceService.closeDropdownDevice();
|
|
11236
|
+
return;
|
|
11237
|
+
}
|
|
11238
|
+
this.isOpen = false; // Fecha o dropdown
|
|
11239
|
+
}
|
|
11240
|
+
/**
|
|
11241
|
+
* Verifica se o texto de uma opção na lista está elipsado
|
|
11242
|
+
* @param text - Texto a ser verificado
|
|
11243
|
+
* @returns true se o texto estiver elipsado
|
|
11244
|
+
*/
|
|
11245
|
+
isOptionEllipsed(text) {
|
|
11246
|
+
if (!text)
|
|
11247
|
+
return false;
|
|
11248
|
+
// Calcula a largura disponível para o texto nas opções da lista
|
|
11249
|
+
const menuElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown-menu');
|
|
11250
|
+
if (!menuElement) {
|
|
11251
|
+
// Se o menu não está aberto, usa a largura do dropdown
|
|
11252
|
+
const dropdownElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown');
|
|
11253
|
+
if (!dropdownElement)
|
|
11254
|
+
return false;
|
|
11255
|
+
const dropdownWidth = dropdownElement.clientWidth;
|
|
11256
|
+
const padding = 16; // 8px de cada lado do botão
|
|
11257
|
+
const iconSpace = 24; // Espaço do ícone de check quando selecionado
|
|
11258
|
+
const availableWidth = Math.max(50, dropdownWidth - padding - iconSpace);
|
|
11259
|
+
return isTextEllipsed(text, availableWidth);
|
|
11260
|
+
}
|
|
11261
|
+
// Largura do menu menos padding do item (16px total) e espaço do ícone de check (24px)
|
|
11262
|
+
const menuWidth = menuElement.clientWidth;
|
|
11263
|
+
const padding = 16; // 8px de cada lado do botão do item
|
|
11264
|
+
const iconSpace = 24; // Espaço do ícone de check quando selecionado
|
|
11265
|
+
const availableWidth = Math.max(50, menuWidth - padding - iconSpace);
|
|
11266
|
+
return isTextEllipsed(text, availableWidth);
|
|
11267
|
+
}
|
|
11268
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11269
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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"] }] }); }
|
|
11270
|
+
}
|
|
11271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
|
|
11272
|
+
type: Component,
|
|
11273
|
+
args: [{ selector: 'tc-rev-dropdown', imports: [
|
|
11274
|
+
CommonModule,
|
|
11275
|
+
FormsModule,
|
|
11276
|
+
ReactiveFormsModule,
|
|
11277
|
+
TcRevTooltipDirective,
|
|
11278
|
+
TcRevIconButtonDirective
|
|
11279
|
+
], 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"] }]
|
|
11280
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
|
|
11281
|
+
type: ViewChild,
|
|
11282
|
+
args: ['menuTemplate']
|
|
11283
|
+
}], onDocumentClick: [{
|
|
11284
|
+
type: HostListener,
|
|
11285
|
+
args: ['document:click', ['$event']]
|
|
11286
|
+
}] } });
|
|
11287
|
+
|
|
11288
|
+
class TcRevSearchInputComponent {
|
|
11289
|
+
constructor() {
|
|
11290
|
+
this.searchTextChange = new EventEmitter();
|
|
11291
|
+
this.searchInput = viewChild('searchInput');
|
|
11292
|
+
this.searchTextForm = new FormControl('');
|
|
11293
|
+
this.placeholder = input('');
|
|
11294
|
+
this.onSearch = output();
|
|
11295
|
+
this.autoFocus = input(false);
|
|
11296
|
+
}
|
|
11297
|
+
ngOnChanges(_simpleChanges) {
|
|
11298
|
+
if (_simpleChanges['searchText']) {
|
|
11299
|
+
this.searchTextForm.setValue(this.searchText);
|
|
11300
|
+
}
|
|
11301
|
+
}
|
|
11302
|
+
ngOnInit() {
|
|
11303
|
+
// Inicializa o FormControl com o valor do model
|
|
11304
|
+
this.searchTextForm.setValue(this.searchText);
|
|
11305
|
+
this.searchTextForm.valueChanges
|
|
11306
|
+
.pipe(debounceTime(500), distinctUntilChanged(), map((text) => text?.toLowerCase() || ''))
|
|
11307
|
+
.subscribe((text) => {
|
|
11308
|
+
this.searchTextChange.emit(text);
|
|
11309
|
+
this.onSearch.emit(text);
|
|
11310
|
+
});
|
|
11311
|
+
}
|
|
11312
|
+
ngAfterViewInit() {
|
|
11313
|
+
if (this.autoFocus() && this.searchInput) {
|
|
11314
|
+
this.searchInput().nativeElement.focus();
|
|
11315
|
+
}
|
|
11316
|
+
}
|
|
11317
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11318
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.20", 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"] }] }); }
|
|
11319
|
+
}
|
|
11320
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSearchInputComponent, decorators: [{
|
|
11321
|
+
type: Component,
|
|
11322
|
+
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"] }]
|
|
11323
|
+
}], propDecorators: { searchText: [{
|
|
11324
|
+
type: Input
|
|
11325
|
+
}], searchTextChange: [{
|
|
11326
|
+
type: Output
|
|
11327
|
+
}] } });
|
|
11328
|
+
|
|
11329
|
+
var DropdownGroupedSize;
|
|
11330
|
+
(function (DropdownGroupedSize) {
|
|
11331
|
+
DropdownGroupedSize["sm"] = "sm";
|
|
11332
|
+
DropdownGroupedSize["md"] = "md";
|
|
11333
|
+
DropdownGroupedSize["lg"] = "lg";
|
|
11334
|
+
})(DropdownGroupedSize || (DropdownGroupedSize = {}));
|
|
11335
|
+
class TcRevDropdownGroupedComponent {
|
|
11336
|
+
onDocumentClick(event) {
|
|
11337
|
+
if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
|
|
11338
|
+
this.isOpen = false;
|
|
11339
|
+
}
|
|
11340
|
+
}
|
|
11341
|
+
constructor(elementRef) {
|
|
11342
|
+
this.elementRef = elementRef;
|
|
11343
|
+
this._deviceService = inject(TCloudUiDeviceUtilsService);
|
|
11344
|
+
this.label = input(''); // Label que será exibida
|
|
11345
|
+
this.disabled = input(false); // Desabilita o dropdown
|
|
11346
|
+
this.options = input.required(); // Lista de opções agrupadas
|
|
11347
|
+
this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
|
|
11348
|
+
this.value = model(null); // Two-way binding para o valor selecionado
|
|
11349
|
+
this.size = input(DropdownGroupedSize.sm);
|
|
11350
|
+
this.placeholder = input('Selecione');
|
|
11351
|
+
this.searchPlaceholder = input('Buscar...');
|
|
11352
|
+
this.showSearch = input(true); // Controla se mostra o input de busca
|
|
11353
|
+
this.width = input(''); // Largura do dropdown
|
|
11354
|
+
this.optionSelected = output(); // Emissor para o valor selecionado
|
|
11355
|
+
this.selectedOption = signal(null); // Opção selecionada
|
|
11356
|
+
this.isOpen = false; // Controla se o dropdown está aberto
|
|
11357
|
+
this.searchTerm = signal(''); // Termo de busca
|
|
11358
|
+
this.dropdownSize = DropdownGroupedSize;
|
|
11359
|
+
this.isDesktop = this._deviceService.isDesktop;
|
|
11360
|
+
this.isMobile = this._deviceService.isMobile;
|
|
11361
|
+
}
|
|
11362
|
+
ngOnChanges(_simpleChanges) {
|
|
11363
|
+
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
11364
|
+
if (_simpleChanges['initialValue'] ||
|
|
11365
|
+
_simpleChanges['options'] ||
|
|
11366
|
+
_simpleChanges['value']) {
|
|
11367
|
+
const valueToUse = this.value() || this.initialValue();
|
|
11368
|
+
this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
|
|
11369
|
+
}
|
|
11370
|
+
}
|
|
11371
|
+
ngOnInit() {
|
|
11372
|
+
// Prioriza o valor do model, mas mantém compatibilidade com initialValue
|
|
11373
|
+
const valueToUse = this.value() || this.initialValue();
|
|
11374
|
+
const foundOption = this.options().find((option) => option.value === valueToUse) || null;
|
|
11375
|
+
this.selectedOption.set(foundOption);
|
|
11376
|
+
// Se não havia valor no model mas havia initialValue, sincroniza o model
|
|
11377
|
+
if (!this.value() && this.initialValue() && foundOption) {
|
|
11378
|
+
this.value.set(foundOption.value);
|
|
11379
|
+
}
|
|
11380
|
+
// Escuta mudanças no model e atualiza a opção selecionada
|
|
11381
|
+
this.value.subscribe((newValue) => {
|
|
11382
|
+
const option = this.options().find((opt) => opt.value === newValue) || null;
|
|
11383
|
+
if (this.selectedOption() !== option) {
|
|
11384
|
+
this.selectedOption.set(option);
|
|
11385
|
+
}
|
|
11386
|
+
});
|
|
11387
|
+
}
|
|
11388
|
+
toggleDropdown() {
|
|
11389
|
+
if (!this.disabled()) {
|
|
11390
|
+
// Abertura do dropdown para mobile
|
|
11391
|
+
if (this.isMobile()) {
|
|
11392
|
+
this._deviceService.openDropdownDevice(this.menuTemplate);
|
|
11393
|
+
return;
|
|
11394
|
+
}
|
|
11395
|
+
this.isOpen = !this.isOpen;
|
|
11396
|
+
if (this.isOpen) {
|
|
11397
|
+
this.searchTerm.set('');
|
|
11398
|
+
// Foca no input de busca quando abre o dropdown
|
|
11399
|
+
setTimeout(() => {
|
|
11400
|
+
const searchInput = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown-search input');
|
|
11401
|
+
if (searchInput) {
|
|
11402
|
+
searchInput.focus();
|
|
11403
|
+
}
|
|
11404
|
+
}, 100);
|
|
11405
|
+
}
|
|
11406
|
+
}
|
|
11407
|
+
}
|
|
11408
|
+
selectOption(option) {
|
|
11409
|
+
if (!option.disabled) {
|
|
11410
|
+
this.selectedOption.set(option);
|
|
11411
|
+
this.value.set(option.value); // Atualiza o model com two-way binding
|
|
11412
|
+
this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
|
|
11413
|
+
if (this.isMobile()) {
|
|
11414
|
+
this._deviceService.closeDropdownDevice();
|
|
11415
|
+
return;
|
|
11416
|
+
}
|
|
11417
|
+
this.isOpen = false;
|
|
11418
|
+
this.searchTerm.set('');
|
|
11419
|
+
}
|
|
11420
|
+
}
|
|
11421
|
+
onSearchChange(searchText) {
|
|
11422
|
+
this.searchTerm.set(searchText);
|
|
11423
|
+
}
|
|
11424
|
+
getGroupedOptions() {
|
|
11425
|
+
const filtered = this.getFilteredOptions();
|
|
11426
|
+
const groups = {};
|
|
11427
|
+
// Agrupa as opções filtradas
|
|
11428
|
+
filtered.forEach((option) => {
|
|
11429
|
+
const groupName = option.group || 'Sem grupo';
|
|
11430
|
+
if (!groups[groupName]) {
|
|
11431
|
+
groups[groupName] = [];
|
|
11432
|
+
}
|
|
11433
|
+
groups[groupName].push(option);
|
|
11434
|
+
});
|
|
11435
|
+
// Converte para array de grupos
|
|
11436
|
+
return Object.keys(groups).map((groupName) => ({
|
|
11437
|
+
groupName,
|
|
11438
|
+
options: groups[groupName],
|
|
11439
|
+
}));
|
|
11440
|
+
}
|
|
11441
|
+
getFilteredOptions() {
|
|
11442
|
+
const search = this.searchTerm().toLowerCase().trim();
|
|
11443
|
+
if (!search) {
|
|
11444
|
+
return this.options();
|
|
11445
|
+
}
|
|
11446
|
+
return this.options().filter((option) => option.displayValue.toLowerCase().includes(search) ||
|
|
11447
|
+
(option.group && option.group.toLowerCase().includes(search)));
|
|
11448
|
+
}
|
|
11449
|
+
clearSearch() {
|
|
11450
|
+
this.searchTerm.set('');
|
|
11451
|
+
}
|
|
11452
|
+
hasResults() {
|
|
11453
|
+
return this.getFilteredOptions().length > 0;
|
|
11454
|
+
}
|
|
11455
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevDropdownGroupedComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11456
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TcRevDropdownGroupedComponent, isStandalone: true, selector: "tc-rev-dropdown-grouped", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", 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 class=\"tc-rev-dropdown-grouped\" [class.disabled]=\"disabled()\">\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 [style.width]=\"this.width()\"\n >\n @if (label()) {\n <b>{{ label() }}</b>\n }\n {{ selectedOption() ? selectedOption()?.displayValue : placeholder() }}\n <i class=\"fa-light fa-chevron-down mar-l-a\" [class.rotate]=\"isOpen\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen && isDesktop()\"\n class=\"tc-rev-dropdown-menu\"\n [style.width]=\"this.width()\"\n >\n <!-- Input de busca -->\n @if (showSearch()) {\n <div class=\"tc-rev-dropdown-search\">\n <tc-rev-search-input\n (onSearch)=\"onSearchChange($event)\"\n [placeholder]=\"this.searchPlaceholder()\"\n />\n </div>\n <!-- <div class=\"tc-rev-dropdown-search\">\n <i class=\"fa-light fa-magnifying-glass search-icon\"></i>\n <input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchChange($event)\"\n class=\"search-input\">\n @if (searchTerm()) {\n <button\n type=\"button\"\n class=\"clear-search\"\n (click)=\"clearSearch()\"\n title=\"Limpar busca\">\n <i class=\"fa-light fa-xmark\"></i>\n </button>\n }\n </div> -->\n }\n\n <!-- Lista de op\u00E7\u00F5es agrupadas -->\n @if (hasResults()) {\n <ul class=\"tc-rev-dropdown-options\">\n @for (group of getGroupedOptions(); track group.groupName) {\n <li class=\"tc-rev-dropdown-group\">\n <div class=\"tc-rev-dropdown-group-header\">\n {{ group.groupName }}\n </div>\n <ul class=\"tc-rev-dropdown-group-options\">\n @for (option of group.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\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </li>\n }\n </ul>\n } @else {\n <div class=\"tc-rev-dropdown-no-results f-family\">\n <i class=\"fa-light fa-magnifying-glass\"></i>\n <span>Nenhum resultado encontrado</span>\n </div>\n }\n </div>\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\n @if (showSearch()) {\n <div class=\"tc-rev-dropdown-search mar-b-12\">\n <tc-rev-search-input\n (onSearch)=\"onSearchChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n />\n </div>\n } @if (hasResults()) {\n <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n @for (group of getGroupedOptions(); track group.groupName) {\n <li class=\"tc-rev-dropdown-group\">\n <div class=\"tc-rev-dropdown-group-header\">\n {{ group.groupName }}\n </div>\n <ul class=\"tc-rev-dropdown-group-options\">\n @for (option of group.options; track option?.value) {\n <li\n class=\"tc-rev-dropdown-menu-item\"\n (click)=\"selectOption(option)\"\n >\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 </li>\n }\n </ul>\n }\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-grouped{position:relative;display:inline-block}.tc-rev-dropdown-grouped .tc-rev-dropdown-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:inline-flex;align-items:center;justify-content:flex-start;gap:var(--size-4);font-family:var(--f-family);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);min-width:5rem}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i.rotate{transform:rotate(-180deg)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i{transition:transform .2s ease}.tc-rev-dropdown-grouped .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);max-height:20rem;overflow:hidden;width:100%;min-width:10rem;z-index:1000;display:flex;flex-direction:column}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search{position:relative;padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);background-color:var(--c-neutral-50)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-icon{position:absolute;left:var(--size-20);top:50%;transform:translateY(-50%);color:var(--c-neutral-500);font-size:var(--f-size-14)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input{width:100%;height:var(--size-40);padding:var(--size-8) var(--size-12) var(--size-8) var(--size-36);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:border-color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input::placeholder{color:var(--c-neutral-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search{position:absolute;right:var(--size-20);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-4);border-radius:var(--bor-radius-4);transition:color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search:hover{color:var(--c-neutral-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-14);font-weight:var(--f-weight-500);line-height:var(--l-height-16);padding:var(--size-10);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-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-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-400);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled:hover{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--size-24);color:var(--c-neutral-500);text-align:center}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results i{font-size:var(--f-size-24);margin-bottom:var(--size-8);opacity:.5}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results span{font-size:var(--f-size-12);line-height:var(--l-height-16)}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle:hover{border-color:var(--c-neutral-300)}.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;overflow-y:auto;flex:1}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-14);font-weight:var(--f-weight-500);line-height:var(--l-height-16);padding:var(--size-10);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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: "component", type: TcRevSearchInputComponent, selector: "tc-rev-search-input", inputs: ["searchText", "placeholder", "autoFocus"], outputs: ["searchTextChange", "onSearch"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
|
|
11457
|
+
}
|
|
11458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevDropdownGroupedComponent, decorators: [{
|
|
11459
|
+
type: Component,
|
|
11460
|
+
args: [{ selector: 'tc-rev-dropdown-grouped', imports: [
|
|
11461
|
+
CommonModule,
|
|
11462
|
+
FormsModule,
|
|
11463
|
+
ReactiveFormsModule,
|
|
11464
|
+
TcRevSearchInputComponent,
|
|
11465
|
+
TcRevIconButtonDirective
|
|
11466
|
+
], template: "<div class=\"tc-rev-dropdown-grouped\" [class.disabled]=\"disabled()\">\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 [style.width]=\"this.width()\"\n >\n @if (label()) {\n <b>{{ label() }}</b>\n }\n {{ selectedOption() ? selectedOption()?.displayValue : placeholder() }}\n <i class=\"fa-light fa-chevron-down mar-l-a\" [class.rotate]=\"isOpen\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen && isDesktop()\"\n class=\"tc-rev-dropdown-menu\"\n [style.width]=\"this.width()\"\n >\n <!-- Input de busca -->\n @if (showSearch()) {\n <div class=\"tc-rev-dropdown-search\">\n <tc-rev-search-input\n (onSearch)=\"onSearchChange($event)\"\n [placeholder]=\"this.searchPlaceholder()\"\n />\n </div>\n <!-- <div class=\"tc-rev-dropdown-search\">\n <i class=\"fa-light fa-magnifying-glass search-icon\"></i>\n <input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchChange($event)\"\n class=\"search-input\">\n @if (searchTerm()) {\n <button\n type=\"button\"\n class=\"clear-search\"\n (click)=\"clearSearch()\"\n title=\"Limpar busca\">\n <i class=\"fa-light fa-xmark\"></i>\n </button>\n }\n </div> -->\n }\n\n <!-- Lista de op\u00E7\u00F5es agrupadas -->\n @if (hasResults()) {\n <ul class=\"tc-rev-dropdown-options\">\n @for (group of getGroupedOptions(); track group.groupName) {\n <li class=\"tc-rev-dropdown-group\">\n <div class=\"tc-rev-dropdown-group-header\">\n {{ group.groupName }}\n </div>\n <ul class=\"tc-rev-dropdown-group-options\">\n @for (option of group.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\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </li>\n }\n </ul>\n } @else {\n <div class=\"tc-rev-dropdown-no-results f-family\">\n <i class=\"fa-light fa-magnifying-glass\"></i>\n <span>Nenhum resultado encontrado</span>\n </div>\n }\n </div>\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\n @if (showSearch()) {\n <div class=\"tc-rev-dropdown-search mar-b-12\">\n <tc-rev-search-input\n (onSearch)=\"onSearchChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n />\n </div>\n } @if (hasResults()) {\n <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n @for (group of getGroupedOptions(); track group.groupName) {\n <li class=\"tc-rev-dropdown-group\">\n <div class=\"tc-rev-dropdown-group-header\">\n {{ group.groupName }}\n </div>\n <ul class=\"tc-rev-dropdown-group-options\">\n @for (option of group.options; track option?.value) {\n <li\n class=\"tc-rev-dropdown-menu-item\"\n (click)=\"selectOption(option)\"\n >\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 </li>\n }\n </ul>\n }\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-grouped{position:relative;display:inline-block}.tc-rev-dropdown-grouped .tc-rev-dropdown-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:inline-flex;align-items:center;justify-content:flex-start;gap:var(--size-4);font-family:var(--f-family);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);min-width:5rem}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i.rotate{transform:rotate(-180deg)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i{transition:transform .2s ease}.tc-rev-dropdown-grouped .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);max-height:20rem;overflow:hidden;width:100%;min-width:10rem;z-index:1000;display:flex;flex-direction:column}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search{position:relative;padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);background-color:var(--c-neutral-50)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-icon{position:absolute;left:var(--size-20);top:50%;transform:translateY(-50%);color:var(--c-neutral-500);font-size:var(--f-size-14)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input{width:100%;height:var(--size-40);padding:var(--size-8) var(--size-12) var(--size-8) var(--size-36);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:border-color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input::placeholder{color:var(--c-neutral-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search{position:absolute;right:var(--size-20);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-4);border-radius:var(--bor-radius-4);transition:color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search:hover{color:var(--c-neutral-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-14);font-weight:var(--f-weight-500);line-height:var(--l-height-16);padding:var(--size-10);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-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-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-400);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled:hover{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--size-24);color:var(--c-neutral-500);text-align:center}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results i{font-size:var(--f-size-24);margin-bottom:var(--size-8);opacity:.5}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results span{font-size:var(--f-size-12);line-height:var(--l-height-16)}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle:hover{border-color:var(--c-neutral-300)}.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;overflow-y:auto;flex:1}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-14);font-weight:var(--f-weight-500);line-height:var(--l-height-16);padding:var(--size-10);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .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"] }]
|
|
11467
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
|
|
11468
|
+
type: ViewChild,
|
|
11469
|
+
args: ['menuTemplate']
|
|
11470
|
+
}], onDocumentClick: [{
|
|
11471
|
+
type: HostListener,
|
|
11472
|
+
args: ['document:click', ['$event']]
|
|
11473
|
+
}] } });
|
|
11474
|
+
|
|
11475
|
+
var DropdownMultiSize;
|
|
11476
|
+
(function (DropdownMultiSize) {
|
|
11477
|
+
DropdownMultiSize["sm"] = "sm";
|
|
11478
|
+
DropdownMultiSize["md"] = "md";
|
|
11479
|
+
DropdownMultiSize["lg"] = "lg";
|
|
11480
|
+
})(DropdownMultiSize || (DropdownMultiSize = {}));
|
|
11481
|
+
class TcRevDropdownMultiComponent {
|
|
11482
|
+
onDocumentClick(event) {
|
|
11483
|
+
if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
|
|
11484
|
+
this.isOpen = false;
|
|
11485
|
+
}
|
|
11486
|
+
}
|
|
11487
|
+
constructor(elementRef) {
|
|
11488
|
+
this.elementRef = elementRef;
|
|
11489
|
+
this.label = input(''); // Label que será exibida
|
|
11490
|
+
this.disabled = input(false); // Desabilita o dropdown
|
|
11491
|
+
this.options = input.required(); // Lista de opções no novo formato
|
|
11492
|
+
this.initialValues = input([]); // Valores pré-selecionados (deprecated - use values instead)
|
|
11493
|
+
this.values = model([]); // Two-way binding para os valores selecionados
|
|
11494
|
+
this.size = input(DropdownMultiSize.sm);
|
|
11495
|
+
this.width = input(''); // Largura do dropdown
|
|
11496
|
+
this.placeholder = input('Selecione'); // Placeholder quando nenhum item estiver selecionado
|
|
11497
|
+
this.maxDisplayItems = input(2); // Máximo de itens a serem exibidos no botão
|
|
11498
|
+
this.optionsSelected = output(); // Emissor para os valores selecionados
|
|
11499
|
+
this.selectedOptions = signal([]); // Opções selecionadas
|
|
11500
|
+
this.isOpen = false; // Controla se o dropdown está aberto
|
|
11501
|
+
this.dropdownSize = DropdownMultiSize;
|
|
11502
|
+
}
|
|
11503
|
+
ngOnChanges(_simpleChanges) {
|
|
11504
|
+
// Atualiza as opções selecionadas quando os valores pré-selecionados mudam
|
|
11505
|
+
if (_simpleChanges['initialValues'] || _simpleChanges['options'] || _simpleChanges['values']) {
|
|
11506
|
+
const valuesToUse = this.values().length > 0 ? this.values() : this.initialValues();
|
|
11507
|
+
const selected = this.options().filter(option => valuesToUse.includes(option.value));
|
|
11508
|
+
this.selectedOptions.set(selected);
|
|
11509
|
+
}
|
|
11510
|
+
}
|
|
11511
|
+
ngOnInit() {
|
|
11512
|
+
// Prioriza os valores do model, mas mantém compatibilidade com initialValues
|
|
11513
|
+
const valuesToUse = this.values().length > 0 ? this.values() : this.initialValues();
|
|
11514
|
+
const selected = this.options().filter(option => valuesToUse.includes(option.value));
|
|
11515
|
+
this.selectedOptions.set(selected);
|
|
11516
|
+
// Se não havia valores no model mas havia initialValues, sincroniza o model
|
|
11517
|
+
if (this.values().length === 0 && this.initialValues().length > 0) {
|
|
11518
|
+
this.values.set([...this.initialValues()]);
|
|
11519
|
+
}
|
|
11520
|
+
// Escuta mudanças no model e atualiza as opções selecionadas
|
|
11521
|
+
this.values.subscribe((newValues) => {
|
|
11522
|
+
const newSelected = this.options().filter(option => newValues.includes(option.value));
|
|
11523
|
+
// Só atualiza se realmente mudou para evitar loops
|
|
11524
|
+
const currentSelectedValues = this.selectedOptions().map(opt => opt.value);
|
|
11525
|
+
const newSelectedValues = newSelected.map(opt => opt.value);
|
|
11526
|
+
if (JSON.stringify(currentSelectedValues.sort()) !== JSON.stringify(newSelectedValues.sort())) {
|
|
11527
|
+
this.selectedOptions.set(newSelected);
|
|
11528
|
+
}
|
|
11529
|
+
});
|
|
11530
|
+
}
|
|
11531
|
+
toggleDropdown() {
|
|
11532
|
+
if (!this.disabled()) {
|
|
11533
|
+
this.isOpen = !this.isOpen;
|
|
11534
|
+
}
|
|
11535
|
+
}
|
|
11536
|
+
toggleOption(option, event) {
|
|
11537
|
+
event.stopPropagation();
|
|
11538
|
+
if (option.disabled)
|
|
11539
|
+
return;
|
|
11540
|
+
const currentSelected = this.selectedOptions();
|
|
11541
|
+
const isSelected = currentSelected.some(selected => selected.value === option.value);
|
|
11542
|
+
let newSelected;
|
|
11543
|
+
if (isSelected) {
|
|
11544
|
+
// Remove a opção se já estiver selecionada
|
|
11545
|
+
newSelected = currentSelected.filter(selected => selected.value !== option.value);
|
|
11546
|
+
}
|
|
11547
|
+
else {
|
|
11548
|
+
// Adiciona a opção se não estiver selecionada
|
|
11549
|
+
newSelected = [...currentSelected, option];
|
|
11550
|
+
}
|
|
11551
|
+
const newValues = newSelected.map(opt => opt.value);
|
|
11552
|
+
this.selectedOptions.set(newSelected);
|
|
11553
|
+
this.values.set(newValues); // Atualiza o model com two-way binding
|
|
11554
|
+
this.optionsSelected.emit(newValues); // Emite os valores para compatibilidade
|
|
11555
|
+
}
|
|
11556
|
+
isOptionSelected(option) {
|
|
11557
|
+
return this.selectedOptions().some(selected => selected.value === option.value);
|
|
11558
|
+
}
|
|
11559
|
+
getDisplayText() {
|
|
11560
|
+
const selected = this.selectedOptions();
|
|
11561
|
+
if (selected.length === 0) {
|
|
11562
|
+
return this.placeholder();
|
|
11563
|
+
}
|
|
11564
|
+
// Se todos os itens (não desabilitados) estão selecionados, mostra "Todos"
|
|
11565
|
+
if (this.isAllSelected()) {
|
|
11566
|
+
return 'Todos';
|
|
11567
|
+
}
|
|
11568
|
+
const maxDisplay = this.maxDisplayItems();
|
|
11569
|
+
if (selected.length <= maxDisplay) {
|
|
11570
|
+
return selected.map(opt => opt.displayValue).join(', ');
|
|
11571
|
+
}
|
|
11572
|
+
const firstItems = selected.slice(0, maxDisplay).map(opt => opt.displayValue).join(', ');
|
|
11573
|
+
const remaining = selected.length - maxDisplay;
|
|
11574
|
+
return `${firstItems} (+${remaining})`;
|
|
11575
|
+
}
|
|
11576
|
+
clearAll() {
|
|
11577
|
+
this.selectedOptions.set([]);
|
|
11578
|
+
this.values.set([]); // Atualiza o model com two-way binding
|
|
11579
|
+
this.optionsSelected.emit([]);
|
|
11580
|
+
}
|
|
11581
|
+
selectAll() {
|
|
11582
|
+
const enabledOptions = this.options().filter(option => !option.disabled);
|
|
11583
|
+
const allValues = enabledOptions.map(opt => opt.value);
|
|
11584
|
+
this.selectedOptions.set(enabledOptions);
|
|
11585
|
+
this.values.set(allValues); // Atualiza o model com two-way binding
|
|
11586
|
+
this.optionsSelected.emit(allValues);
|
|
11587
|
+
}
|
|
11588
|
+
isAllSelected() {
|
|
11589
|
+
const enabledOptions = this.options().filter(option => !option.disabled);
|
|
11590
|
+
const selectedOptions = this.selectedOptions();
|
|
11591
|
+
if (enabledOptions.length === 0)
|
|
11592
|
+
return false;
|
|
11593
|
+
return enabledOptions.every(option => selectedOptions.some(selected => selected.value === option.value));
|
|
11594
|
+
}
|
|
11595
|
+
isSomeSelected() {
|
|
11596
|
+
const enabledOptions = this.options().filter(option => !option.disabled);
|
|
11597
|
+
const selectedOptions = this.selectedOptions();
|
|
11598
|
+
if (enabledOptions.length === 0 || selectedOptions.length === 0)
|
|
11599
|
+
return false;
|
|
11600
|
+
const selectedCount = enabledOptions.filter(option => selectedOptions.some(selected => selected.value === option.value)).length;
|
|
11601
|
+
return selectedCount > 0 && selectedCount < enabledOptions.length;
|
|
11602
|
+
}
|
|
11603
|
+
toggleSelectAll(event) {
|
|
11604
|
+
event.stopPropagation();
|
|
11605
|
+
if (this.isAllSelected()) {
|
|
11606
|
+
this.clearAll();
|
|
11607
|
+
}
|
|
11608
|
+
else {
|
|
11609
|
+
this.selectAll();
|
|
11610
|
+
}
|
|
11611
|
+
}
|
|
11612
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevDropdownMultiComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11613
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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]" }] }); }
|
|
11614
|
+
}
|
|
11615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevDropdownMultiComponent, decorators: [{
|
|
11616
|
+
type: Component,
|
|
11617
|
+
args: [{ selector: 'tc-rev-dropdown-multi', imports: [
|
|
11618
|
+
CommonModule,
|
|
11619
|
+
FormsModule,
|
|
11620
|
+
ReactiveFormsModule,
|
|
11621
|
+
TcRevCheckboxDirective
|
|
11622
|
+
], 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"] }]
|
|
11623
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
11624
|
+
type: HostListener,
|
|
11625
|
+
args: ['document:click', ['$event']]
|
|
11626
|
+
}] } });
|
|
11627
|
+
|
|
11628
|
+
class TcRevDropdownSubMenuComponent {
|
|
11629
|
+
constructor() {
|
|
11630
|
+
this.items = input.required();
|
|
11631
|
+
this.position = input('right');
|
|
11632
|
+
this.parentOffsetTop = input.required();
|
|
11633
|
+
this.selectedOption = input();
|
|
11634
|
+
this.onOptionSelected = output();
|
|
11635
|
+
}
|
|
11636
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevDropdownSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11637
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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"] }] }); }
|
|
11638
|
+
}
|
|
11639
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevDropdownSubMenuComponent, decorators: [{
|
|
11640
|
+
type: Component,
|
|
11641
|
+
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"] }]
|
|
11642
|
+
}] });
|
|
11643
|
+
|
|
11644
|
+
var MultiLevelDropdownSize;
|
|
11645
|
+
(function (MultiLevelDropdownSize) {
|
|
11646
|
+
MultiLevelDropdownSize["sm"] = "sm";
|
|
11647
|
+
MultiLevelDropdownSize["md"] = "md";
|
|
11648
|
+
MultiLevelDropdownSize["lg"] = "lg";
|
|
11649
|
+
})(MultiLevelDropdownSize || (MultiLevelDropdownSize = {}));
|
|
11650
|
+
class TcRevDropdownMultiLevelComponent {
|
|
11651
|
+
onDocumentClick(event) {
|
|
11652
|
+
if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
|
|
11653
|
+
this.isOpen = false;
|
|
11654
|
+
}
|
|
11655
|
+
}
|
|
11656
|
+
constructor(elementRef) {
|
|
11657
|
+
this.elementRef = elementRef;
|
|
11658
|
+
this.dropdownSize = MultiLevelDropdownSize;
|
|
11659
|
+
this.menu = input.required();
|
|
11660
|
+
this.subMenuPosition = input('right');
|
|
11661
|
+
this.disabled = input(false);
|
|
11662
|
+
this.size = input(MultiLevelDropdownSize.sm);
|
|
11663
|
+
this.initialValue = input(null); // Valor pré-selecionado
|
|
11664
|
+
this.optionSelected = output();
|
|
11665
|
+
this.selectedOption = signal(null);
|
|
11666
|
+
this.selectedParentOption = signal(null);
|
|
11667
|
+
this.hoveredIndex = null;
|
|
11668
|
+
this.isOpen = false;
|
|
11669
|
+
}
|
|
11670
|
+
ngOnChanges(_simpleChanges) {
|
|
11671
|
+
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
11672
|
+
if (_simpleChanges['initialValue'] || _simpleChanges['menu']) {
|
|
11673
|
+
this.selectedOption.set(null);
|
|
11674
|
+
this.selectedParentOption.set(null);
|
|
11675
|
+
}
|
|
11676
|
+
}
|
|
11677
|
+
getItemOffsetTop(index) {
|
|
11678
|
+
if (!this.menuRoot)
|
|
11679
|
+
return 0;
|
|
11680
|
+
const items = this.menuRoot.nativeElement.querySelectorAll('.menu-item');
|
|
11681
|
+
if (items && items[index]) {
|
|
11682
|
+
return items[index].offsetTop;
|
|
11683
|
+
}
|
|
11684
|
+
return 0;
|
|
11685
|
+
}
|
|
11686
|
+
toggleDropdown() {
|
|
11687
|
+
this.isOpen = !this.isOpen;
|
|
11688
|
+
}
|
|
11689
|
+
selectOption(option, parentOption) {
|
|
11690
|
+
this.selectedOption.set(option);
|
|
11691
|
+
this.selectedParentOption.set(parentOption);
|
|
11692
|
+
this.optionSelected.emit({ option, parentOption }); // Emite apenas o valor da opção selecionada
|
|
11693
|
+
// this.isOpen = false; // Fecha o dropdown
|
|
11694
|
+
// this.hoveredIndex = null;
|
|
11695
|
+
}
|
|
11696
|
+
selectParentItem($event, option, parentOption) {
|
|
11697
|
+
$event.stopPropagation();
|
|
11698
|
+
if (parentOption?.children?.length)
|
|
11699
|
+
return;
|
|
11700
|
+
this.selectOption(option, parentOption);
|
|
11701
|
+
}
|
|
11702
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevDropdownMultiLevelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11703
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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"] }] }); }
|
|
11704
|
+
}
|
|
11705
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevDropdownMultiLevelComponent, decorators: [{
|
|
11706
|
+
type: Component,
|
|
11707
|
+
args: [{ selector: 'tc-rev-dropdown-multi-level', imports: [
|
|
11708
|
+
CommonModule,
|
|
11709
|
+
TcRevDropdownSubMenuComponent
|
|
11710
|
+
], 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"] }]
|
|
11711
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
11712
|
+
type: HostListener,
|
|
11713
|
+
args: ['document:click', ['$event']]
|
|
11714
|
+
}], menuRoot: [{
|
|
11715
|
+
type: ViewChild,
|
|
11716
|
+
args: ['menuRoot', { static: false }]
|
|
11717
|
+
}] } });
|
|
11718
|
+
|
|
11719
|
+
/**
|
|
11720
|
+
*
|
|
11721
|
+
* @param echarts echars instance
|
|
11722
|
+
* @param chartData chart info to build the config
|
|
11723
|
+
* @returns a bar chart config for echarts with the given data
|
|
11724
|
+
*/
|
|
11725
|
+
function echartBarConfig(echarts, chartData) {
|
|
11726
|
+
const { xAxisName, xAxisLabels, seriesData, tooltipFormatter, yAxisLabelFormatter, xAxisLabelFormatter } = chartData;
|
|
11727
|
+
return {
|
|
11728
|
+
grid: {
|
|
11729
|
+
left: '6.5%',
|
|
11730
|
+
top: 48,
|
|
11731
|
+
right: '2%',
|
|
11732
|
+
bottom: 56
|
|
11733
|
+
},
|
|
11734
|
+
tooltip: {
|
|
11735
|
+
trigger: 'axis',
|
|
11736
|
+
backgroundColor: '#131313',
|
|
11737
|
+
formatter: tooltipFormatter,
|
|
11738
|
+
textStyle: {
|
|
11739
|
+
color: '#f3f3f3',
|
|
11740
|
+
fontSize: 12,
|
|
11741
|
+
fontFamily: 'Nunito Sans'
|
|
11742
|
+
}
|
|
11743
|
+
},
|
|
11744
|
+
xAxis: {
|
|
11745
|
+
type: 'category',
|
|
11746
|
+
axisLabel: {
|
|
11747
|
+
color: '#131313',
|
|
11748
|
+
fontSize: 14,
|
|
11749
|
+
fontFamily: 'Nunito Sans',
|
|
11750
|
+
margin: 16,
|
|
11751
|
+
formatter: xAxisLabelFormatter,
|
|
11752
|
+
},
|
|
11753
|
+
axisLine: {
|
|
11754
|
+
show: true,
|
|
11755
|
+
lineStyle: {
|
|
11756
|
+
color: '#BAC0C6'
|
|
11757
|
+
}
|
|
11758
|
+
},
|
|
11759
|
+
axisTick: {
|
|
11760
|
+
show: false
|
|
11761
|
+
},
|
|
11762
|
+
data: xAxisLabels,
|
|
11763
|
+
name: xAxisName,
|
|
11764
|
+
nameLocation: 'start',
|
|
11765
|
+
nameTextStyle: {
|
|
11766
|
+
align: 'left',
|
|
11767
|
+
color: '#131313',
|
|
11768
|
+
fontFamily: 'Nunito Sans',
|
|
11769
|
+
fontSize: 14,
|
|
11770
|
+
fontWeight: 700,
|
|
11771
|
+
padding: [0, 0, -46, -36]
|
|
11772
|
+
}
|
|
11773
|
+
},
|
|
11774
|
+
yAxis: {
|
|
11775
|
+
type: 'value',
|
|
11776
|
+
axisLine: {
|
|
11777
|
+
show: false
|
|
11778
|
+
},
|
|
11779
|
+
axisTick: {
|
|
11780
|
+
show: false
|
|
11781
|
+
},
|
|
11782
|
+
axisLabel: {
|
|
11783
|
+
formatter: yAxisLabelFormatter,
|
|
11784
|
+
align: 'left',
|
|
11785
|
+
color: '#131313',
|
|
11786
|
+
fontSize: 14,
|
|
11787
|
+
fontFamily: 'Nunito Sans',
|
|
11788
|
+
inside: false,
|
|
11789
|
+
padding: [-40, 0, 0, -40]
|
|
11790
|
+
}
|
|
11791
|
+
},
|
|
11792
|
+
series: seriesData.map((serie) => ({
|
|
11793
|
+
name: serie.serieName,
|
|
11794
|
+
type: 'bar',
|
|
11795
|
+
data: serie.values,
|
|
11796
|
+
itemStyle: {
|
|
11797
|
+
barBorderRadius: [8, 8, 8, 8],
|
|
11798
|
+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
11799
|
+
{ offset: 0, color: '#0897E9' },
|
|
11800
|
+
{ offset: 1, color: '#75D8FF' }
|
|
11801
|
+
])
|
|
11802
|
+
}
|
|
11803
|
+
}))
|
|
11804
|
+
};
|
|
11805
|
+
}
|
|
11806
|
+
|
|
11807
|
+
class TcRevEmptyContentComponent {
|
|
11808
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevEmptyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11809
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TcRevEmptyContentComponent, isStandalone: true, selector: "tc-rev-empty-content", ngImport: i0, template: "<div class=\"tc-rev-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: [""] }); }
|
|
11810
|
+
}
|
|
11811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevEmptyContentComponent, decorators: [{
|
|
11812
|
+
type: Component,
|
|
11813
|
+
args: [{ selector: 'tc-rev-empty-content', imports: [], template: "<div class=\"tc-rev-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" }]
|
|
11814
|
+
}] });
|
|
11815
|
+
|
|
11816
|
+
class TcRevFaqComponent {
|
|
11817
|
+
constructor() {
|
|
11818
|
+
this.title = 'Dúvidas frequentes';
|
|
11819
|
+
this.questions = [];
|
|
11820
|
+
this.openIndex = signal(null);
|
|
11821
|
+
}
|
|
11822
|
+
toggle(index) {
|
|
11823
|
+
if (this.openIndex() === index) {
|
|
11824
|
+
this.openIndex.set(null);
|
|
11825
|
+
}
|
|
11826
|
+
else {
|
|
11827
|
+
this.openIndex.set(index);
|
|
11828
|
+
}
|
|
11829
|
+
}
|
|
11830
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevFaqComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11831
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TcRevFaqComponent, isStandalone: true, selector: "tc-rev-faq", inputs: { title: "title", questions: "questions" }, ngImport: i0, template: "<div class=\"tc-rev-faq\">\n <div class=\"tc-rev-faq-list\">\n <div\n class=\"tc-rev-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=\"tc-rev-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=\"tc-rev-faq-answer\"\n >\n <p>{{ q.answer }}</p>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tc-rev-faq{background-color:var(--c-neutral-50)}.tc-rev-faq .faq-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tc-rev-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)}.tc-rev-faq .faq-header .icon i{font-size:1.5rem;color:var(--c-neutral-700)}.tc-rev-faq .faq-header h2{font-size:var(--f-size-20);font-weight:var(--f-weight-700);font-family:var(--f-family)}.tc-rev-faq .tc-rev-faq-list .tc-rev-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}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item.open{height:auto;overflow:visible}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item:first-child{border-top:none}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-question{display:flex;justify-content:space-between;align-items:center}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-question p{margin:0}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-question .arrow{transition:all .3s ease}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-question .arrow.open{transform:rotate(180deg)}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-answer{border:0;margin-top:1rem;padding:0}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-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 }); }
|
|
11832
|
+
}
|
|
11833
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevFaqComponent, decorators: [{
|
|
11834
|
+
type: Component,
|
|
11835
|
+
args: [{ selector: 'tc-rev-faq', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tc-rev-faq\">\n <div class=\"tc-rev-faq-list\">\n <div\n class=\"tc-rev-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=\"tc-rev-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=\"tc-rev-faq-answer\"\n >\n <p>{{ q.answer }}</p>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tc-rev-faq{background-color:var(--c-neutral-50)}.tc-rev-faq .faq-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tc-rev-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)}.tc-rev-faq .faq-header .icon i{font-size:1.5rem;color:var(--c-neutral-700)}.tc-rev-faq .faq-header h2{font-size:var(--f-size-20);font-weight:var(--f-weight-700);font-family:var(--f-family)}.tc-rev-faq .tc-rev-faq-list .tc-rev-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}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item.open{height:auto;overflow:visible}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item:first-child{border-top:none}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-question{display:flex;justify-content:space-between;align-items:center}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-question p{margin:0}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-question .arrow{transition:all .3s ease}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-question .arrow.open{transform:rotate(180deg)}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-answer{border:0;margin-top:1rem;padding:0}.tc-rev-faq .tc-rev-faq-list .tc-rev-faq-item .tc-rev-faq-answer p{margin:0;line-height:1.6}\n"] }]
|
|
11836
|
+
}], propDecorators: { title: [{
|
|
11837
|
+
type: Input
|
|
11838
|
+
}], questions: [{
|
|
11839
|
+
type: Input
|
|
11840
|
+
}] } });
|
|
11841
|
+
|
|
11842
|
+
class TcRevInputContainerComponent {
|
|
11843
|
+
constructor() {
|
|
11844
|
+
this.fullWidth = input(false);
|
|
11845
|
+
this.inputId = input('');
|
|
11846
|
+
this.label = input('');
|
|
11847
|
+
this.labelPosition = input('top');
|
|
11848
|
+
this.required = input(false);
|
|
11849
|
+
}
|
|
11850
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevInputContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11851
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TcRevInputContainerComponent, isStandalone: true, selector: "tc-rev-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=\"{{ 'tc-rev-input-container ' + 'label-' + this.labelPosition() }}\"\n [class.full-width]=\"this.fullWidth()\">\n @if (this.label()) {\n @if (this.inputId()) {\n <label\n class=\"tc-rev-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=\"tc-rev-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}.tc-rev-input-container{display:inline-flex;gap:var(--size-4)}.tc-rev-input-container.full-width{width:100%}.tc-rev-input-container .tc-rev-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}.tc-rev-input-container.label-top{flex-direction:column}.tc-rev-input-container.label-right{align-items:center;flex-direction:row-reverse}.tc-rev-input-container.label-bottom{flex-direction:column-reverse}.tc-rev-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"] }] }); }
|
|
11852
|
+
}
|
|
11853
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevInputContainerComponent, decorators: [{
|
|
11854
|
+
type: Component,
|
|
11855
|
+
args: [{ selector: 'tc-rev-input-container', imports: [CommonModule], template: "<div\n class=\"{{ 'tc-rev-input-container ' + 'label-' + this.labelPosition() }}\"\n [class.full-width]=\"this.fullWidth()\">\n @if (this.label()) {\n @if (this.inputId()) {\n <label\n class=\"tc-rev-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=\"tc-rev-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}.tc-rev-input-container{display:inline-flex;gap:var(--size-4)}.tc-rev-input-container.full-width{width:100%}.tc-rev-input-container .tc-rev-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}.tc-rev-input-container.label-top{flex-direction:column}.tc-rev-input-container.label-right{align-items:center;flex-direction:row-reverse}.tc-rev-input-container.label-bottom{flex-direction:column-reverse}.tc-rev-input-container.label-left{align-items:center;flex-direction:row}\n"] }]
|
|
11856
|
+
}] });
|
|
11857
|
+
|
|
11858
|
+
class TcRevInputDirective {
|
|
11859
|
+
constructor(_el) {
|
|
11860
|
+
this._el = _el;
|
|
11861
|
+
this.fullWidth = input(false);
|
|
11862
|
+
effect(() => {
|
|
11863
|
+
this.setClasses();
|
|
11864
|
+
});
|
|
11865
|
+
}
|
|
11866
|
+
setClasses() {
|
|
11867
|
+
this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-input-control--full-width') : null;
|
|
11868
|
+
}
|
|
11869
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
11870
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: TcRevInputDirective, isStandalone: true, selector: "input[tcRevInput], select[tcRevInput]", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-input-control" }, ngImport: i0 }); }
|
|
11871
|
+
}
|
|
11872
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevInputDirective, decorators: [{
|
|
11873
|
+
type: Directive,
|
|
11874
|
+
args: [{
|
|
11875
|
+
selector: 'input[tcRevInput], select[tcRevInput]',
|
|
11876
|
+
host: {
|
|
11877
|
+
class: 'tc-rev-input-control'
|
|
11878
|
+
}
|
|
11879
|
+
}]
|
|
11880
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
11881
|
+
|
|
11882
|
+
class TcRevLoadingComponent {
|
|
11883
|
+
constructor() {
|
|
11884
|
+
this.message = input('Carregando');
|
|
11885
|
+
}
|
|
11886
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11887
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: TcRevLoadingComponent, isStandalone: true, selector: "tc-rev-loading", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-loading-overlay\">\n <div class=\"tc-rev-loading-container\">\n <span\n class=\"tc-rev-loading-spinner\">\n </span>\n <p class=\"tc-rev-loading-message\">{{message()}}...</p>\n </div>\n</div>\n", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tc-rev-loading-overlay{background:#00000080;display:grid;inset:0;place-items:center;position:fixed;z-index:1000}.tc-rev-loading-overlay .tc-rev-loading-container{align-items:center;display:flex;flex-direction:column;gap:.5rem}.tc-rev-loading-overlay .tc-rev-loading-container .tc-rev-loading-spinner{animation:rotation 1s linear infinite;border:8px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:block;height:8rem;width:8rem}.tc-rev-loading-overlay .tc-rev-loading-container .tc-rev-loading-message{background-color:var(--c-neutral-600);border-radius:var(--bor-radius-8);color:var(--c-neutral-50);font-family:var(--f-family);font-size:var(--f-size-16);margin:var(--size-12) 0 0 0;padding:var(--size-4) var(--size-12)}\n"] }); }
|
|
11888
|
+
}
|
|
11889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevLoadingComponent, decorators: [{
|
|
11890
|
+
type: Component,
|
|
11891
|
+
args: [{ selector: 'tc-rev-loading', imports: [], template: "<div class=\"tc-rev-loading-overlay\">\n <div class=\"tc-rev-loading-container\">\n <span\n class=\"tc-rev-loading-spinner\">\n </span>\n <p class=\"tc-rev-loading-message\">{{message()}}...</p>\n </div>\n</div>\n", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tc-rev-loading-overlay{background:#00000080;display:grid;inset:0;place-items:center;position:fixed;z-index:1000}.tc-rev-loading-overlay .tc-rev-loading-container{align-items:center;display:flex;flex-direction:column;gap:.5rem}.tc-rev-loading-overlay .tc-rev-loading-container .tc-rev-loading-spinner{animation:rotation 1s linear infinite;border:8px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:block;height:8rem;width:8rem}.tc-rev-loading-overlay .tc-rev-loading-container .tc-rev-loading-message{background-color:var(--c-neutral-600);border-radius:var(--bor-radius-8);color:var(--c-neutral-50);font-family:var(--f-family);font-size:var(--f-size-16);margin:var(--size-12) 0 0 0;padding:var(--size-4) var(--size-12)}\n"] }]
|
|
11892
|
+
}] });
|
|
11893
|
+
|
|
11894
|
+
class TcRevMessageComponent {
|
|
11895
|
+
constructor() {
|
|
11896
|
+
this.message = '';
|
|
11897
|
+
this.type = 'info';
|
|
11898
|
+
}
|
|
11899
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11900
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TcRevMessageComponent, isStandalone: true, selector: "tc-rev-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", 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 }); }
|
|
11901
|
+
}
|
|
11902
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevMessageComponent, decorators: [{
|
|
11903
|
+
type: Component,
|
|
11904
|
+
args: [{ selector: 'tc-rev-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", 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"] }]
|
|
11905
|
+
}], propDecorators: { message: [{
|
|
11906
|
+
type: Input
|
|
11907
|
+
}], type: [{
|
|
11908
|
+
type: Input
|
|
11909
|
+
}] } });
|
|
11910
|
+
|
|
11911
|
+
class TcRevMultiInputComponent {
|
|
11912
|
+
constructor() {
|
|
11913
|
+
this.autoFocus = false;
|
|
11914
|
+
this.initialValue = input('');
|
|
11915
|
+
this.description = input('');
|
|
11916
|
+
this.initialList = input([]); // Deprecated - use items instead
|
|
11917
|
+
this.items = model([]); // Two-way binding para a lista de itens
|
|
11918
|
+
this.validators = input([]);
|
|
11919
|
+
this.disabled = input(false);
|
|
11920
|
+
this.itemsList = signal([]);
|
|
11921
|
+
this.onChangeList = output();
|
|
11922
|
+
effect(() => {
|
|
11923
|
+
this.disabled() ? this.multiInputForm?.get('multiInput')?.disable() : this.multiInputForm?.get('multiInput')?.enable();
|
|
11924
|
+
});
|
|
11925
|
+
}
|
|
11926
|
+
ngOnInit() {
|
|
11927
|
+
this.multiInputForm = new FormGroup({
|
|
11928
|
+
multiInput: new FormControl('', [Validators.required, ...this.validators()])
|
|
11929
|
+
});
|
|
11930
|
+
// Prioriza os itens do model, mas mantém compatibilidade com initialList
|
|
11931
|
+
const itemsToUse = this.items().length > 0 ? this.items() : this.initialList();
|
|
11932
|
+
if (itemsToUse?.length) {
|
|
11933
|
+
this.itemsList.set([...itemsToUse]);
|
|
11934
|
+
}
|
|
11935
|
+
// Se não havia itens no model mas havia initialList, sincroniza o model
|
|
11936
|
+
if (this.items().length === 0 && this.initialList().length > 0) {
|
|
11937
|
+
this.items.set([...this.initialList()]);
|
|
11938
|
+
}
|
|
11939
|
+
// Escuta mudanças no model e atualiza a lista interna
|
|
11940
|
+
this.items.subscribe((newItems) => {
|
|
11941
|
+
// Só atualiza se realmente mudou para evitar loops
|
|
11942
|
+
const currentItems = this.itemsList();
|
|
11943
|
+
if (JSON.stringify(currentItems) !== JSON.stringify(newItems)) {
|
|
11944
|
+
this.itemsList.set([...newItems]);
|
|
11945
|
+
}
|
|
11946
|
+
});
|
|
11947
|
+
setTimeout(() => {
|
|
11948
|
+
if (this.initialValue() !== '') {
|
|
11949
|
+
this.autoFocus = true;
|
|
11950
|
+
this.multiInputForm?.get('multiInput')?.setValue(this.initialValue());
|
|
11951
|
+
}
|
|
11952
|
+
});
|
|
11953
|
+
}
|
|
11954
|
+
ngAfterViewInit() {
|
|
11955
|
+
setTimeout(() => {
|
|
11956
|
+
if (this.autoFocus) {
|
|
11957
|
+
this.multiInputRef?.nativeElement?.focus();
|
|
11958
|
+
}
|
|
11959
|
+
}, 0);
|
|
11960
|
+
}
|
|
11961
|
+
isEllipsed(text) {
|
|
11962
|
+
return isTextEllipsed(text);
|
|
11963
|
+
}
|
|
11964
|
+
addItem() {
|
|
11965
|
+
const newItem = this.multiInputForm?.get('multiInput').value;
|
|
11966
|
+
this.itemsList.update((currentItems) => {
|
|
11967
|
+
const updatedItems = currentItems.includes(newItem)
|
|
11968
|
+
? currentItems
|
|
11969
|
+
: [...currentItems, newItem];
|
|
11970
|
+
// Atualiza o model com two-way binding
|
|
11971
|
+
this.items.set([...updatedItems]);
|
|
11972
|
+
this.onChangeList.emit(updatedItems);
|
|
11973
|
+
return updatedItems;
|
|
11974
|
+
});
|
|
11975
|
+
this.multiInputForm?.reset();
|
|
11976
|
+
}
|
|
11977
|
+
removeItem(index) {
|
|
11978
|
+
this.itemsList.update((currentItems) => {
|
|
11979
|
+
const newItems = [...currentItems];
|
|
11980
|
+
newItems.splice(index, 1);
|
|
11981
|
+
// Atualiza o model com two-way binding
|
|
11982
|
+
this.items.set([...newItems]);
|
|
11983
|
+
this.onChangeList.emit(newItems);
|
|
11984
|
+
return newItems;
|
|
11985
|
+
});
|
|
11986
|
+
}
|
|
11987
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11988
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TcRevMultiInputComponent, isStandalone: true, selector: "tc-rev-multi-input", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: false, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, initialList: { classPropertyName: "initialList", publicName: "initialList", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", onChangeList: "onChangeList" }, viewQueries: [{ propertyName: "multiInputRef", first: true, predicate: ["multiInputRef "], descendants: true }], ngImport: i0, template: "<div class=\"tc-rev-multi-input\">\n\t<div class=\"tc-rev-multi-input__input-container\">\n\t\t<form\n [formGroup]=\"multiInputForm\"\n (ngSubmit)=\"addItem()\">\n\n <input\n #multiInputRef\n type=\"text\"\n class=\"tc-rev-input-control\"\n formControlName=\"multiInput\"\n />\n\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--primary-filled add-button\"\n type=\"submit\"\n [disabled]=\"multiInputForm.invalid || disabled()\">\n\t\t\t\tAdicionar\n\t\t\t</button>\n\t\t</form>\n\t</div>\n\n\t@if (description()) {\n <span class=\"description f-sm c-neutral-700 mar-t-4 mar-b-16 d-block\">\n {{ description() }}\n </span>\n\t}\n\n @if (itemsList().length > 0) {\n <div class=\"tc-rev-multi-input__added-list\">\n @for (item of itemsList(); track item; let i = $index) {\n <div class=\"list-item h-28 pad-x-8 f-md f-weight-500 bor-rad-4 bg-c-neutral-100\">\n <span\n class=\"c-primary-500 mar-r-4 list-item__text\"\n [tcRevTooltip]=\"isEllipsed(item) ? item : ''\"\n position=\"top\">{{ item }}</span>\n\n <button class=\"h-24 w-24 d-inline-block cursor-pointer bg-c-transparent c-neutral-700 bor-none\" (click)=\"removeItem(i)\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.tc-rev-multi-input__input-container{height:var(--size-40);position:relative}.tc-rev-multi-input__input-container .tc-rev-input-control{height:var(--size-40);position:absolute;top:0;left:0;width:100%;z-index:1}.tc-rev-multi-input__input-container .add-button{display:block;height:var(--size-34);min-height:var(--size-34);max-height:var(--size-34);position:absolute;right:3px;top:3px;width:6.125rem;z-index:2}.tc-rev-multi-input__added-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tc-rev-multi-input__added-list .list-item{align-content:center;max-width:12.5rem;display:flex;align-items:center}.tc-rev-multi-input__added-list .list-item__text{flex:1;max-width:calc(100% - 1.75rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }] }); }
|
|
11989
|
+
}
|
|
11990
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevMultiInputComponent, decorators: [{
|
|
11991
|
+
type: Component,
|
|
11992
|
+
args: [{ selector: 'tc-rev-multi-input', imports: [
|
|
11993
|
+
CommonModule,
|
|
11994
|
+
ReactiveFormsModule,
|
|
11995
|
+
TcRevTooltipDirective
|
|
11996
|
+
], template: "<div class=\"tc-rev-multi-input\">\n\t<div class=\"tc-rev-multi-input__input-container\">\n\t\t<form\n [formGroup]=\"multiInputForm\"\n (ngSubmit)=\"addItem()\">\n\n <input\n #multiInputRef\n type=\"text\"\n class=\"tc-rev-input-control\"\n formControlName=\"multiInput\"\n />\n\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--primary-filled add-button\"\n type=\"submit\"\n [disabled]=\"multiInputForm.invalid || disabled()\">\n\t\t\t\tAdicionar\n\t\t\t</button>\n\t\t</form>\n\t</div>\n\n\t@if (description()) {\n <span class=\"description f-sm c-neutral-700 mar-t-4 mar-b-16 d-block\">\n {{ description() }}\n </span>\n\t}\n\n @if (itemsList().length > 0) {\n <div class=\"tc-rev-multi-input__added-list\">\n @for (item of itemsList(); track item; let i = $index) {\n <div class=\"list-item h-28 pad-x-8 f-md f-weight-500 bor-rad-4 bg-c-neutral-100\">\n <span\n class=\"c-primary-500 mar-r-4 list-item__text\"\n [tcRevTooltip]=\"isEllipsed(item) ? item : ''\"\n position=\"top\">{{ item }}</span>\n\n <button class=\"h-24 w-24 d-inline-block cursor-pointer bg-c-transparent c-neutral-700 bor-none\" (click)=\"removeItem(i)\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.tc-rev-multi-input__input-container{height:var(--size-40);position:relative}.tc-rev-multi-input__input-container .tc-rev-input-control{height:var(--size-40);position:absolute;top:0;left:0;width:100%;z-index:1}.tc-rev-multi-input__input-container .add-button{display:block;height:var(--size-34);min-height:var(--size-34);max-height:var(--size-34);position:absolute;right:3px;top:3px;width:6.125rem;z-index:2}.tc-rev-multi-input__added-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tc-rev-multi-input__added-list .list-item{align-content:center;max-width:12.5rem;display:flex;align-items:center}.tc-rev-multi-input__added-list .list-item__text{flex:1;max-width:calc(100% - 1.75rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
11997
|
+
}], ctorParameters: () => [], propDecorators: { autoFocus: [{
|
|
11998
|
+
type: Input
|
|
11999
|
+
}], multiInputRef: [{
|
|
12000
|
+
type: ViewChild,
|
|
12001
|
+
args: ['multiInputRef ']
|
|
12002
|
+
}] } });
|
|
12003
|
+
|
|
12004
|
+
class TcRevPaginationComponent {
|
|
12005
|
+
constructor() {
|
|
12006
|
+
this.currentPage = 1;
|
|
12007
|
+
this.totalPages = 1;
|
|
12008
|
+
this.pageChange = new EventEmitter();
|
|
12009
|
+
this.pageInputError = false;
|
|
12010
|
+
}
|
|
12011
|
+
previous() {
|
|
12012
|
+
if (this.currentPage > 1) {
|
|
12013
|
+
this.currentPage--;
|
|
12014
|
+
this.pageChange.emit(this.currentPage);
|
|
12015
|
+
}
|
|
12016
|
+
}
|
|
12017
|
+
next() {
|
|
12018
|
+
if (this.currentPage < this.totalPages) {
|
|
12019
|
+
this.currentPage++;
|
|
12020
|
+
this.pageChange.emit(this.currentPage);
|
|
12021
|
+
}
|
|
12022
|
+
}
|
|
12023
|
+
goToPage(event) {
|
|
12024
|
+
const input = event.target;
|
|
12025
|
+
const value = input.value;
|
|
12026
|
+
let pageNumber = parseInt(value.replace(/^0+/, ''), 10);
|
|
12027
|
+
if (isNaN(pageNumber) || pageNumber < 1 || pageNumber > this.totalPages) {
|
|
12028
|
+
this.pageInputError = true;
|
|
12029
|
+
if (isNaN(pageNumber) || pageNumber < 1) {
|
|
12030
|
+
pageNumber = 1;
|
|
12031
|
+
}
|
|
12032
|
+
else if (pageNumber > this.totalPages) {
|
|
12033
|
+
pageNumber = this.totalPages;
|
|
12034
|
+
}
|
|
12035
|
+
}
|
|
12036
|
+
else {
|
|
12037
|
+
this.pageInputError = false;
|
|
12038
|
+
}
|
|
12039
|
+
input.value = this.formatPage(pageNumber);
|
|
12040
|
+
if (pageNumber !== this.currentPage) {
|
|
12041
|
+
this.currentPage = pageNumber;
|
|
12042
|
+
this.pageChange.emit(this.currentPage);
|
|
12043
|
+
}
|
|
12044
|
+
}
|
|
12045
|
+
formatPage(page) {
|
|
12046
|
+
return page < 10 ? `0${page}` : `${page}`;
|
|
12047
|
+
}
|
|
12048
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12049
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TcRevPaginationComponent, isStandalone: true, selector: "tc-rev-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de {{ totalPages }}</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700)}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-100);border-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12050
|
+
}
|
|
12051
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevPaginationComponent, decorators: [{
|
|
12052
|
+
type: Component,
|
|
12053
|
+
args: [{ selector: 'tc-rev-pagination', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de {{ totalPages }}</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700)}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-100);border-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
|
|
12054
|
+
}], propDecorators: { currentPage: [{
|
|
12055
|
+
type: Input
|
|
12056
|
+
}], totalPages: [{
|
|
12057
|
+
type: Input
|
|
12058
|
+
}], pageChange: [{
|
|
12059
|
+
type: Output
|
|
12060
|
+
}] } });
|
|
12061
|
+
|
|
12062
|
+
var ProgressStatusBarGradientStatus;
|
|
12063
|
+
(function (ProgressStatusBarGradientStatus) {
|
|
12064
|
+
ProgressStatusBarGradientStatus["info"] = "info";
|
|
12065
|
+
ProgressStatusBarGradientStatus["danger"] = "danger";
|
|
12066
|
+
ProgressStatusBarGradientStatus["success"] = "success";
|
|
12067
|
+
ProgressStatusBarGradientStatus["alert"] = "alert";
|
|
12068
|
+
})(ProgressStatusBarGradientStatus || (ProgressStatusBarGradientStatus = {}));
|
|
12069
|
+
var ProgressStatusBarRangeColor;
|
|
12070
|
+
(function (ProgressStatusBarRangeColor) {
|
|
12071
|
+
ProgressStatusBarRangeColor["dangerStart"] = "#F48E85";
|
|
12072
|
+
ProgressStatusBarRangeColor["dangerEnd"] = "#DC3545";
|
|
12073
|
+
ProgressStatusBarRangeColor["alertStart"] = "#FECD6E";
|
|
12074
|
+
ProgressStatusBarRangeColor["alertEnd"] = "#FEAC0E";
|
|
12075
|
+
ProgressStatusBarRangeColor["infoStart"] = "#6BC1F2";
|
|
12076
|
+
ProgressStatusBarRangeColor["infoEnd"] = "#0897E9";
|
|
12077
|
+
ProgressStatusBarRangeColor["successStart"] = "#A3E78C";
|
|
12078
|
+
ProgressStatusBarRangeColor["successEnd"] = "#47B13D";
|
|
12079
|
+
})(ProgressStatusBarRangeColor || (ProgressStatusBarRangeColor = {}));
|
|
12080
|
+
class TcRevProgressStatusBarComponent {
|
|
12081
|
+
constructor() {
|
|
12082
|
+
this.currentValue = input.required();
|
|
12083
|
+
this.progressStatusConfig = input.required();
|
|
12084
|
+
this.backgroundStyle = '';
|
|
12085
|
+
effect(() => {
|
|
12086
|
+
this.backgroundStyle = this.getBackgroundStyle();
|
|
12087
|
+
});
|
|
12088
|
+
}
|
|
12089
|
+
getBackgroundStyle() {
|
|
12090
|
+
if (!this.currentValue())
|
|
12091
|
+
return '';
|
|
12092
|
+
let currentStatusConfig = this.progressStatusConfig().find((x) => (this.currentValue() >= x.start && this.currentValue() <= x.end));
|
|
12093
|
+
const lastStatusConfig = this.progressStatusConfig()[this.progressStatusConfig()?.length - 1];
|
|
12094
|
+
if (!currentStatusConfig && this.currentValue() < lastStatusConfig.end)
|
|
12095
|
+
return '';
|
|
12096
|
+
if (!currentStatusConfig && this.currentValue() > lastStatusConfig.end) {
|
|
12097
|
+
currentStatusConfig = { start: 0, end: 100, gradientStatus: lastStatusConfig.gradientStatus };
|
|
12098
|
+
}
|
|
12099
|
+
const startStatus = this.getProgressStatusBarRangeColor(currentStatusConfig.gradientStatus, 'start');
|
|
12100
|
+
const endStatus = this.getProgressStatusBarRangeColor(currentStatusConfig.gradientStatus, 'end');
|
|
12101
|
+
let style = `width:${this.currentValue()}%;backgroundImage:linear-gradient(90deg`;
|
|
12102
|
+
style += `,${startStatus} 0%,${endStatus} 100%);`;
|
|
12103
|
+
return style;
|
|
12104
|
+
}
|
|
12105
|
+
getProgressStatusBarRangeColor(_gradientStatus, position) {
|
|
12106
|
+
switch (_gradientStatus) {
|
|
12107
|
+
case ProgressStatusBarGradientStatus.alert:
|
|
12108
|
+
return position === 'start' ? ProgressStatusBarRangeColor.alertStart : ProgressStatusBarRangeColor.alertEnd;
|
|
12109
|
+
case ProgressStatusBarGradientStatus.danger:
|
|
12110
|
+
return position === 'start' ? ProgressStatusBarRangeColor.dangerStart : ProgressStatusBarRangeColor.dangerEnd;
|
|
12111
|
+
case ProgressStatusBarGradientStatus.success:
|
|
12112
|
+
return position === 'start' ? ProgressStatusBarRangeColor.successStart : ProgressStatusBarRangeColor.successEnd;
|
|
12113
|
+
default:
|
|
12114
|
+
return position === 'start' ? ProgressStatusBarRangeColor.infoStart : ProgressStatusBarRangeColor.infoEnd;
|
|
12115
|
+
}
|
|
12116
|
+
}
|
|
12117
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevProgressStatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12118
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: TcRevProgressStatusBarComponent, isStandalone: true, selector: "tc-rev-progress-status-bar", inputs: { currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: true, transformFunction: null }, progressStatusConfig: { classPropertyName: "progressStatusConfig", publicName: "progressStatusConfig", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"progress-status-bar-container\">\n <div\n class=\"progress-status-bar\"\n [style]=\"this.backgroundStyle\">\n </div>\n</div>\n", styles: [":host{display:block}.progress-status-bar-container{background-color:var(--c-neutral-200);border-radius:var(--bor-radius-pill);display:block;height:var(--size-12);position:relative}.progress-status-bar-container .progress-status-bar{border-radius:var(--bor-radius-pill);display:block;height:var(--size-12);left:0;max-width:100%;position:absolute;top:0;transition:width .2s linear;width:0}\n"] }); }
|
|
12119
|
+
}
|
|
12120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevProgressStatusBarComponent, decorators: [{
|
|
12121
|
+
type: Component,
|
|
12122
|
+
args: [{ selector: 'tc-rev-progress-status-bar', imports: [], template: "<div class=\"progress-status-bar-container\">\n <div\n class=\"progress-status-bar\"\n [style]=\"this.backgroundStyle\">\n </div>\n</div>\n", styles: [":host{display:block}.progress-status-bar-container{background-color:var(--c-neutral-200);border-radius:var(--bor-radius-pill);display:block;height:var(--size-12);position:relative}.progress-status-bar-container .progress-status-bar{border-radius:var(--bor-radius-pill);display:block;height:var(--size-12);left:0;max-width:100%;position:absolute;top:0;transition:width .2s linear;width:0}\n"] }]
|
|
12123
|
+
}], ctorParameters: () => [] });
|
|
12124
|
+
|
|
12125
|
+
class TcRevRadioDirective {
|
|
12126
|
+
constructor() { }
|
|
12127
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevRadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12128
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TcRevRadioDirective, isStandalone: true, selector: "input[type=\"radio\"][tcRevRadio]", host: { classAttribute: "tc-rev-radio" }, ngImport: i0 }); }
|
|
12129
|
+
}
|
|
12130
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevRadioDirective, decorators: [{
|
|
12131
|
+
type: Directive,
|
|
12132
|
+
args: [{
|
|
12133
|
+
selector: 'input[type="radio"][tcRevRadio]',
|
|
12134
|
+
host: {
|
|
12135
|
+
class: 'tc-rev-radio'
|
|
12136
|
+
}
|
|
12137
|
+
}]
|
|
12138
|
+
}], ctorParameters: () => [] });
|
|
12139
|
+
|
|
12140
|
+
class TcRevSideDrawerComponent {
|
|
12141
|
+
constructor(document, el, renderer) {
|
|
12142
|
+
this.document = document;
|
|
12143
|
+
this.el = el;
|
|
12144
|
+
this.renderer = renderer;
|
|
12145
|
+
this.loading = input(false);
|
|
12146
|
+
this.position = input('right');
|
|
12147
|
+
this.title = input.required();
|
|
12148
|
+
this.xAxis = computed(() => this.position() === 'left' ? `left: 0` : `right: 0`);
|
|
12149
|
+
this.onCloseDrawer = output();
|
|
12150
|
+
this.isOpen = false;
|
|
12151
|
+
this._deviceService = inject(TCloudUiDeviceUtilsService);
|
|
12152
|
+
this.isDesktop = this._deviceService.isDesktop;
|
|
12153
|
+
this.isMobile = this._deviceService.isMobile;
|
|
12154
|
+
}
|
|
12155
|
+
ngOnInit() {
|
|
12156
|
+
this.document.body.style.overflowY = 'hidden';
|
|
12157
|
+
this.isOpen = true;
|
|
12158
|
+
// --- mover o host do componente para o <body> apenas em mobile ---
|
|
12159
|
+
if (this.el &&
|
|
12160
|
+
this.el.nativeElement &&
|
|
12161
|
+
this.el.nativeElement.parentNode !== this.document.body &&
|
|
12162
|
+
this.isMobile()) {
|
|
12163
|
+
this.renderer.appendChild(this.document.body, this.el.nativeElement);
|
|
12164
|
+
}
|
|
12165
|
+
}
|
|
12166
|
+
ngOnDestroy() {
|
|
12167
|
+
this.document.body.style.overflowY = '';
|
|
12168
|
+
// remover o host do body ao destruir apenas em mobile
|
|
12169
|
+
if (this.el &&
|
|
12170
|
+
this.el.nativeElement &&
|
|
12171
|
+
this.el.nativeElement.parentNode === this.document.body &&
|
|
12172
|
+
this.isMobile()) {
|
|
12173
|
+
this.renderer.removeChild(this.document.body, this.el.nativeElement);
|
|
12174
|
+
}
|
|
12175
|
+
}
|
|
12176
|
+
handleClickOverlay() {
|
|
12177
|
+
if (this.loading()) {
|
|
12178
|
+
return;
|
|
12179
|
+
}
|
|
12180
|
+
this.isOpen = false;
|
|
12181
|
+
setTimeout(() => this.onCloseDrawer.emit(), 250);
|
|
12182
|
+
}
|
|
12183
|
+
handleClickContent(_ev) {
|
|
12184
|
+
_ev.stopPropagation();
|
|
12185
|
+
}
|
|
12186
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSideDrawerComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12187
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TcRevSideDrawerComponent, isStandalone: true, selector: "tc-rev-side-drawer", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onCloseDrawer: "onCloseDrawer" }, ngImport: i0, template: "@if(isDesktop()){\n<div\n [@backdropAnimation]\n class=\"tc-rev-side-drawer-overlay\"\n (click)=\"handleClickOverlay()\">\n</div>\n}\n\n<div\n *ngIf=\"isOpen\"\n [@drawerAnimation]=\"isDesktop() ? 'desktop' : 'mobile'\"\n class=\"tc-rev-side-drawer-content\"\n [style.width]=\"isMobile() ? '100%' : null\"\n (click)=\"handleClickContent($event)\"\n [style]=\"xAxis()\">\n\n <div class=\"tc-rev-side-drawer-content__header\">\n <h2 class=\"mar-none f-h2 f-weight-600\">{{title()}}</h2>\n\n <button\n tcRevIconButton=\"outline\" color=\"dark\"\n [disabled]=\"loading()\"\n (click)=\"handleClickOverlay()\">\n <i class=\"fa-light fa-times\"></i>\n </button>\n </div>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}.tc-rev-side-drawer-overlay{background-color:#00000080;inset:0;position:fixed;height:100vh;z-index:3000}.tc-rev-side-drawer-content{background-color:var(--c-neutral-50);height:100vh;position:fixed;z-index:3001;top:0}.tc-rev-side-drawer-content__header{align-items:center;color:var(--c-neutral-700);display:flex;font-family:var(--f-family);gap:var(--size-16);justify-content:space-between;padding:var(--size-16);padding-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }], animations: [
|
|
12188
|
+
trigger('drawerAnimation', [
|
|
12189
|
+
transition('void => desktop', [
|
|
12190
|
+
style({ transform: 'translateX(100%)', opacity: 0 }),
|
|
12191
|
+
animate('250ms', style({ transform: 'translateX(0)', opacity: 1 })),
|
|
12192
|
+
]),
|
|
12193
|
+
transition('desktop => void', [
|
|
12194
|
+
style({ transform: 'translateX(0)', opacity: 1 }),
|
|
12195
|
+
animate('250ms', style({ transform: 'translateX(100%)', opacity: 0 })),
|
|
12196
|
+
]),
|
|
12197
|
+
transition('void => mobile', [
|
|
12198
|
+
style({ opacity: 0 }),
|
|
12199
|
+
animate('200ms ease', style({ opacity: 1 })),
|
|
12200
|
+
]),
|
|
12201
|
+
transition('mobile => void', [
|
|
12202
|
+
style({ opacity: 1 }),
|
|
12203
|
+
animate('200ms ease', style({ opacity: 0 })),
|
|
12204
|
+
]),
|
|
12205
|
+
]),
|
|
12206
|
+
trigger('backdropAnimation', [
|
|
12207
|
+
transition(':enter', [
|
|
12208
|
+
style({ opacity: 0 }),
|
|
12209
|
+
animate('100ms', style({ opacity: 1 })),
|
|
12210
|
+
]),
|
|
12211
|
+
transition(':leave', [
|
|
12212
|
+
style({ opacity: 1 }),
|
|
12213
|
+
animate('250ms', style({ opacity: 0 })),
|
|
12214
|
+
]),
|
|
12215
|
+
]),
|
|
12216
|
+
] }); }
|
|
12217
|
+
}
|
|
12218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSideDrawerComponent, decorators: [{
|
|
12219
|
+
type: Component,
|
|
12220
|
+
args: [{ selector: 'tc-rev-side-drawer', imports: [CommonModule, TcRevIconButtonDirective], animations: [
|
|
12221
|
+
trigger('drawerAnimation', [
|
|
12222
|
+
transition('void => desktop', [
|
|
12223
|
+
style({ transform: 'translateX(100%)', opacity: 0 }),
|
|
12224
|
+
animate('250ms', style({ transform: 'translateX(0)', opacity: 1 })),
|
|
12225
|
+
]),
|
|
12226
|
+
transition('desktop => void', [
|
|
12227
|
+
style({ transform: 'translateX(0)', opacity: 1 }),
|
|
12228
|
+
animate('250ms', style({ transform: 'translateX(100%)', opacity: 0 })),
|
|
12229
|
+
]),
|
|
12230
|
+
transition('void => mobile', [
|
|
12231
|
+
style({ opacity: 0 }),
|
|
12232
|
+
animate('200ms ease', style({ opacity: 1 })),
|
|
12233
|
+
]),
|
|
12234
|
+
transition('mobile => void', [
|
|
12235
|
+
style({ opacity: 1 }),
|
|
12236
|
+
animate('200ms ease', style({ opacity: 0 })),
|
|
12237
|
+
]),
|
|
12238
|
+
]),
|
|
12239
|
+
trigger('backdropAnimation', [
|
|
12240
|
+
transition(':enter', [
|
|
12241
|
+
style({ opacity: 0 }),
|
|
12242
|
+
animate('100ms', style({ opacity: 1 })),
|
|
12243
|
+
]),
|
|
12244
|
+
transition(':leave', [
|
|
12245
|
+
style({ opacity: 1 }),
|
|
12246
|
+
animate('250ms', style({ opacity: 0 })),
|
|
12247
|
+
]),
|
|
12248
|
+
]),
|
|
12249
|
+
], template: "@if(isDesktop()){\n<div\n [@backdropAnimation]\n class=\"tc-rev-side-drawer-overlay\"\n (click)=\"handleClickOverlay()\">\n</div>\n}\n\n<div\n *ngIf=\"isOpen\"\n [@drawerAnimation]=\"isDesktop() ? 'desktop' : 'mobile'\"\n class=\"tc-rev-side-drawer-content\"\n [style.width]=\"isMobile() ? '100%' : null\"\n (click)=\"handleClickContent($event)\"\n [style]=\"xAxis()\">\n\n <div class=\"tc-rev-side-drawer-content__header\">\n <h2 class=\"mar-none f-h2 f-weight-600\">{{title()}}</h2>\n\n <button\n tcRevIconButton=\"outline\" color=\"dark\"\n [disabled]=\"loading()\"\n (click)=\"handleClickOverlay()\">\n <i class=\"fa-light fa-times\"></i>\n </button>\n </div>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}.tc-rev-side-drawer-overlay{background-color:#00000080;inset:0;position:fixed;height:100vh;z-index:3000}.tc-rev-side-drawer-content{background-color:var(--c-neutral-50);height:100vh;position:fixed;z-index:3001;top:0}.tc-rev-side-drawer-content__header{align-items:center;color:var(--c-neutral-700);display:flex;font-family:var(--f-family);gap:var(--size-16);justify-content:space-between;padding:var(--size-16);padding-bottom:0}\n"] }]
|
|
12250
|
+
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
12251
|
+
type: Inject,
|
|
12252
|
+
args: [DOCUMENT]
|
|
12253
|
+
}] }, { type: i0.ElementRef }, { type: i0.Renderer2 }] });
|
|
12254
|
+
|
|
12255
|
+
class TcRevSkeletonLoadingComponent {
|
|
12256
|
+
constructor() {
|
|
12257
|
+
/** Params of the loading skeleton accepts string with CSS units (px, rem, em) */
|
|
12258
|
+
this.width = input('10rem');
|
|
12259
|
+
this.height = input('1.25rem');
|
|
12260
|
+
this.borderRadius = input('0.3rem');
|
|
12261
|
+
this.style = new TcRevSkeletonLoadingComponentStyle();
|
|
12262
|
+
}
|
|
12263
|
+
ngOnInit() {
|
|
12264
|
+
this.style.width = this.width();
|
|
12265
|
+
this.style.height = this.height();
|
|
12266
|
+
this.style.borderRadius = this.borderRadius();
|
|
12267
|
+
}
|
|
12268
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSkeletonLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12269
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: TcRevSkeletonLoadingComponent, isStandalone: true, selector: "tc-rev-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=\"tc-rev-skeleton-loading\" [ngStyle]=\"this.style\"></div>\n", styles: [":host{display:block}.tc-rev-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"] }] }); }
|
|
12270
|
+
}
|
|
12271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSkeletonLoadingComponent, decorators: [{
|
|
12272
|
+
type: Component,
|
|
12273
|
+
args: [{ selector: 'tc-rev-skeleton-loading', imports: [CommonModule], template: "<div class=\"tc-rev-skeleton-loading\" [ngStyle]=\"this.style\"></div>\n", styles: [":host{display:block}.tc-rev-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"] }]
|
|
12274
|
+
}] });
|
|
12275
|
+
class TcRevSkeletonLoadingComponentStyle {
|
|
12276
|
+
}
|
|
12277
|
+
|
|
12278
|
+
class TcRevSlideToggleDirective {
|
|
12279
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSlideToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12280
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TcRevSlideToggleDirective, isStandalone: true, selector: "input[type=\"checkbox\"][tcRevSlideToggle]", host: { classAttribute: "tc-rev-slide-toggle" }, ngImport: i0 }); }
|
|
12281
|
+
}
|
|
12282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSlideToggleDirective, decorators: [{
|
|
12283
|
+
type: Directive,
|
|
12284
|
+
args: [{
|
|
12285
|
+
selector: 'input[type="checkbox"][tcRevSlideToggle]',
|
|
12286
|
+
host: {
|
|
12287
|
+
class: 'tc-rev-slide-toggle'
|
|
12288
|
+
}
|
|
12289
|
+
}]
|
|
12290
|
+
}] });
|
|
12291
|
+
|
|
12292
|
+
class TcRevTabGroupComponent {
|
|
12293
|
+
constructor() {
|
|
12294
|
+
this.isCarouselOverflowed = false;
|
|
12295
|
+
}
|
|
12296
|
+
onResize() {
|
|
12297
|
+
this.checkCarouselOverflow();
|
|
12298
|
+
}
|
|
12299
|
+
ngOnInit() {
|
|
12300
|
+
this.checkCarouselOverflow();
|
|
12301
|
+
}
|
|
12302
|
+
checkCarouselOverflow() {
|
|
12303
|
+
setTimeout(() => {
|
|
12304
|
+
const el = this.tabGroupCarousel?.nativeElement;
|
|
12305
|
+
this.isCarouselOverflowed = !!el && el.scrollWidth > el.clientWidth;
|
|
12306
|
+
});
|
|
12307
|
+
}
|
|
12308
|
+
scrollTabsCarousel(direction) {
|
|
12309
|
+
const el = this.tabGroupCarousel?.nativeElement;
|
|
12310
|
+
if (!el)
|
|
12311
|
+
return;
|
|
12312
|
+
const scrollAmount = 200;
|
|
12313
|
+
if (direction === 'left') {
|
|
12314
|
+
el.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
|
|
12315
|
+
}
|
|
12316
|
+
else {
|
|
12317
|
+
el.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
|
12318
|
+
}
|
|
12319
|
+
}
|
|
12320
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TcRevTabGroupComponent, isStandalone: true, selector: "tc-rev-tab-group", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabGroupCarousel", first: true, predicate: ["tabGroupCarousel"], descendants: true }], ngImport: i0, template: "<div class=\"tc-rev-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-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=\"tc-rev-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-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=\"tc-rev-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=\"tc-rev-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=\"tc-rev-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> -->", styles: [":host{display:block}.tc-rev-tab-group{position:relative;height:var(--size-40);width:100%}.tc-rev-tab-group .tc-rev-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}.tc-rev-tab-group .tc-rev-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tc-rev-tab-group .tc-rev-tab-group-carousel.full-width{width:100%}.tc-rev-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)}.tc-rev-tab-group .carousel-arrow:hover,.tc-rev-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}.tc-rev-tab-group .carousel-arrow:active,.tc-rev-tab-group .carousel-arrow.selected,.tc-rev-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}.tc-rev-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)}.tc-rev-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tc-rev-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 .tc-rev-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 .tc-rev-tab-group-carousel.overflowed{left:auto!important;margin:0!important}:host .tc-rev-tab-group-carousel::-webkit-scrollbar{display:none}:host .tc-rev-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"] }] }); }
|
|
12322
|
+
}
|
|
12323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevTabGroupComponent, decorators: [{
|
|
12324
|
+
type: Component,
|
|
12325
|
+
args: [{ selector: 'tc-rev-tab-group', imports: [CommonModule], template: "<div class=\"tc-rev-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-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=\"tc-rev-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-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=\"tc-rev-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=\"tc-rev-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=\"tc-rev-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> -->", styles: [":host{display:block}.tc-rev-tab-group{position:relative;height:var(--size-40);width:100%}.tc-rev-tab-group .tc-rev-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}.tc-rev-tab-group .tc-rev-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tc-rev-tab-group .tc-rev-tab-group-carousel.full-width{width:100%}.tc-rev-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)}.tc-rev-tab-group .carousel-arrow:hover,.tc-rev-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}.tc-rev-tab-group .carousel-arrow:active,.tc-rev-tab-group .carousel-arrow.selected,.tc-rev-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}.tc-rev-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)}.tc-rev-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tc-rev-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 .tc-rev-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 .tc-rev-tab-group-carousel.overflowed{left:auto!important;margin:0!important}:host .tc-rev-tab-group-carousel::-webkit-scrollbar{display:none}:host .tc-rev-tab-group{left:calc(-1 * var(--size-40));width:calc(100% + var(--size-80))}}\n"] }]
|
|
12326
|
+
}], propDecorators: { onResize: [{
|
|
12327
|
+
type: HostListener,
|
|
12328
|
+
args: ['window:resize']
|
|
12329
|
+
}], tabGroupCarousel: [{
|
|
12330
|
+
type: ViewChild,
|
|
12331
|
+
args: ['tabGroupCarousel']
|
|
12332
|
+
}] } });
|
|
12333
|
+
|
|
12334
|
+
class TcRevTabItemComponent {
|
|
12335
|
+
constructor() {
|
|
12336
|
+
this.onClick = output();
|
|
12337
|
+
this.active = input(false);
|
|
12338
|
+
this.url = input('');
|
|
12339
|
+
this.disabled = input(false);
|
|
12340
|
+
this.fullWidth = input(false);
|
|
12341
|
+
}
|
|
12342
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12343
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: TcRevTabItemComponent, isStandalone: true, selector: "tc-rev-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=\"tc-rev-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=\"tc-rev-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", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-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}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-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 .tc-rev-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"] }] }); }
|
|
12344
|
+
}
|
|
12345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevTabItemComponent, decorators: [{
|
|
12346
|
+
type: Component,
|
|
12347
|
+
args: [{ selector: 'tc-rev-tab-item', imports: [
|
|
12348
|
+
CommonModule,
|
|
12349
|
+
RouterModule
|
|
12350
|
+
], template: "<a\n *ngIf=\"this.url()\"\n class=\"tc-rev-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=\"tc-rev-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", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-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}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-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 .tc-rev-tab-item{width:100%}}\n"] }]
|
|
12351
|
+
}] });
|
|
12352
|
+
|
|
12353
|
+
var TagColorsEnum;
|
|
12354
|
+
(function (TagColorsEnum) {
|
|
12355
|
+
TagColorsEnum["neutral-50"] = "neutral-50";
|
|
12356
|
+
TagColorsEnum["neutral-100"] = "neutral-100";
|
|
12357
|
+
TagColorsEnum["neutral-200"] = "neutral-200";
|
|
12358
|
+
TagColorsEnum["neutral-300"] = "neutral-300";
|
|
12359
|
+
TagColorsEnum["neutral-400"] = "neutral-400";
|
|
12360
|
+
TagColorsEnum["neutral-500"] = "neutral-500";
|
|
12361
|
+
TagColorsEnum["neutral-600"] = "neutral-600";
|
|
12362
|
+
TagColorsEnum["neutral-700"] = "neutral-700";
|
|
12363
|
+
TagColorsEnum["neutral-800"] = "neutral-800";
|
|
12364
|
+
TagColorsEnum["neutral-900"] = "neutral-900";
|
|
12365
|
+
// Primary
|
|
12366
|
+
TagColorsEnum["primary-300"] = "primary-300";
|
|
12367
|
+
TagColorsEnum["primary-400"] = "primary-400";
|
|
12368
|
+
TagColorsEnum["primary-500"] = "primary-500";
|
|
12369
|
+
TagColorsEnum["primary-600"] = "primary-600";
|
|
12370
|
+
TagColorsEnum["primary-700"] = "primary-700";
|
|
12371
|
+
// Danger
|
|
12372
|
+
TagColorsEnum["danger-300"] = "danger-300";
|
|
12373
|
+
TagColorsEnum["danger-400"] = "danger-400";
|
|
12374
|
+
TagColorsEnum["danger-500"] = "danger-500";
|
|
12375
|
+
// Alert
|
|
12376
|
+
TagColorsEnum["alert-300"] = "alert-300";
|
|
12377
|
+
TagColorsEnum["alert-400"] = "alert-400";
|
|
12378
|
+
TagColorsEnum["alert-500"] = "alert-500";
|
|
12379
|
+
// Info
|
|
12380
|
+
TagColorsEnum["info-300"] = "info-300";
|
|
12381
|
+
TagColorsEnum["info-400"] = "info-400";
|
|
12382
|
+
TagColorsEnum["info-500"] = "info-500";
|
|
12383
|
+
// Success
|
|
12384
|
+
TagColorsEnum["success-300"] = "success-300";
|
|
12385
|
+
TagColorsEnum["success-400"] = "success-400";
|
|
12386
|
+
TagColorsEnum["success-500"] = "success-500";
|
|
12387
|
+
})(TagColorsEnum || (TagColorsEnum = {}));
|
|
12388
|
+
|
|
12389
|
+
class TcRevTagComponent {
|
|
12390
|
+
constructor() {
|
|
12391
|
+
this.size = input('md');
|
|
12392
|
+
this.color = input(TagColorsEnum['primary-500']);
|
|
12393
|
+
this.variant = input('filled');
|
|
12394
|
+
this.shape = input('rectangle');
|
|
12395
|
+
this.fullWidth = input(false);
|
|
12396
|
+
}
|
|
12397
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12398
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: TcRevTagComponent, isStandalone: true, selector: "tc-rev-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.tc-rev-tag--sm]=\"size() === 'sm'\"\n [class.tc-rev-tag--md]=\"size() === 'md' || size() === 'regular'\"\n [class.tc-rev-tag--lg]=\"size() === 'lg'\"\n [class.tc-rev-tag--pill]=\"shape() === 'pill'\"\n [class.tc-rev-tag--full-width]=\"fullWidth()\"\n class=\"{{!color() && !variant() ? '' : 'tc-rev-tag tc-rev-tag--c-' + color() + '-' + variant()}}\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{display:block}.tc-rev-tag,.tc-rev-tag--lg,.tc-rev-tag--md,.tc-rev-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)}.tc-rev-tag--full-width{width:100%}.tc-rev-tag--sm{padding:var(--size-2) var(--size-4);height:var(--size-22);max-height:var(--size-22);min-height:var(--size-22)}.tc-rev-tag--md{padding:var(--size-4);height:var(--size-26);max-height:var(--size-26);min-height:var(--size-26)}.tc-rev-tag--lg{padding:var(--size-8);height:var(--size-34);max-height:var(--size-34);min-height:var(--size-34)}.tc-rev-tag--pill{border-radius:var(--bor-radius-pill)}.tc-rev-tag--c-neutral-50-filled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-100-filled{background-color:var(--c-neutral-100);border-color:var(--c-neutral-100);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-200-filled{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-300-filled{background-color:var(--c-neutral-300);border-color:var(--c-neutral-300);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-400-filled{background-color:var(--c-neutral-400);border-color:var(--c-neutral-400);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-500-filled{background-color:var(--c-neutral-500);border-color:var(--c-neutral-500);color:var(--c-neutral-50)}.tc-rev-tag--c-neutral-600-filled{background-color:var(--c-neutral-600);border-color:var(--c-neutral-600);color:var(--c-neutral-50)}.tc-rev-tag--c-neutral-700-filled,.tc-rev-tag--c-neutral-800-filled{background-color:var(--c-neutral-700);border-color:var(--c-neutral-700);color:var(--c-neutral-50)}.tc-rev-tag--c-primary-300-filled{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-neutral-700)}.tc-rev-tag--c-primary-400-filled{background-color:var(--c-primary-400);border-color:var(--c-primary-400);color:var(--c-neutral-700)}.tc-rev-tag--c-primary-500-filled{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-tag--c-primary-600-filled{background-color:var(--c-primary-600);border-color:var(--c-primary-600);color:var(--c-neutral-50)}.tc-rev-tag--c-primary-700-filled{background-color:var(--c-primary-700);border-color:var(--c-primary-700);color:var(--c-neutral-50)}.tc-rev-tag--c-danger-300-filled{background-color:var(--c-danger-300);border-color:var(--c-danger-300);color:var(--c-neutral-700)}.tc-rev-tag--c-danger-400-filled{background-color:var(--c-danger-400);border-color:var(--c-danger-400);color:var(--c-neutral-700)}.tc-rev-tag--c-danger-500-filled{background-color:var(--c-danger-500);border-color:var(--c-danger-500);color:var(--c-neutral-50)}.tc-rev-tag--c-alert-300-filled{background-color:var(--c-alert-300);border-color:var(--c-alert-300);color:var(--c-neutral-700)}.tc-rev-tag--c-alert-400-filled{background-color:var(--c-alert-400);border-color:var(--c-alert-400);color:var(--c-neutral-700)}.tc-rev-tag--c-alert-500-filled{background-color:var(--c-alert-500);border-color:var(--c-alert-500);color:var(--c-neutral-700)}.tc-rev-tag--c-info-300-filled{background-color:var(--c-info-300);border-color:var(--c-info-300);color:var(--c-neutral-700)}.tc-rev-tag--c-info-400-filled{background-color:var(--c-info-400);border-color:var(--c-info-400);color:var(--c-neutral-700)}.tc-rev-tag--c-info-500-filled{background-color:var(--c-info-500);border-color:var(--c-info-500);color:var(--c-neutral-50)}.tc-rev-tag--c-success-300-filled{background-color:var(--c-success-300);border-color:var(--c-success-300);color:var(--c-neutral-700)}.tc-rev-tag--c-success-400-filled{background-color:var(--c-success-400);border-color:var(--c-success-400);color:var(--c-neutral-700)}.tc-rev-tag--c-success-500-filled{background-color:var(--c-success-500);border-color:var(--c-success-500);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-50-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-50)}.tc-rev-tag--c-neutral-100-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-100);color:var(--c-neutral-100)}.tc-rev-tag--c-neutral-200-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-200);color:var(--c-neutral-200)}.tc-rev-tag--c-neutral-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-300)}.tc-rev-tag--c-neutral-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tc-rev-tag--c-neutral-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-500);color:var(--c-neutral-500)}.tc-rev-tag--c-neutral-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-600);color:var(--c-neutral-600)}.tc-rev-tag--c-neutral-700-outline,.tc-rev-tag--c-neutral-800-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-700);color:var(--c-neutral-700)}.tc-rev-tag--c-primary-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-300);color:var(--c-primary-300)}.tc-rev-tag--c-primary-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-400);color:var(--c-primary-400)}.tc-rev-tag--c-primary-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-tag--c-primary-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-600);color:var(--c-primary-600)}.tc-rev-tag--c-primary-700-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-700);color:var(--c-primary-700)}.tc-rev-tag--c-danger-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-300);color:var(--c-danger-300)}.tc-rev-tag--c-danger-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-400);color:var(--c-danger-400)}.tc-rev-tag--c-danger-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-500);color:var(--c-danger-500)}.tc-rev-tag--c-alert-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-300);color:var(--c-alert-300)}.tc-rev-tag--c-alert-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-400);color:var(--c-alert-400)}.tc-rev-tag--c-alert-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-500);color:var(--c-alert-500)}.tc-rev-tag--c-info-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-300);color:var(--c-info-300)}.tc-rev-tag--c-info-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-400);color:var(--c-info-400)}.tc-rev-tag--c-info-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-500);color:var(--c-info-500)}.tc-rev-tag--c-success-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-300);color:var(--c-success-300)}.tc-rev-tag--c-success-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-400);color:var(--c-success-400)}.tc-rev-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 }] }); }
|
|
12399
|
+
}
|
|
12400
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevTagComponent, decorators: [{
|
|
12401
|
+
type: Component,
|
|
12402
|
+
args: [{ selector: 'tc-rev-tag', imports: [
|
|
12403
|
+
CommonModule
|
|
12404
|
+
], template: "<span\n [class.tc-rev-tag--sm]=\"size() === 'sm'\"\n [class.tc-rev-tag--md]=\"size() === 'md' || size() === 'regular'\"\n [class.tc-rev-tag--lg]=\"size() === 'lg'\"\n [class.tc-rev-tag--pill]=\"shape() === 'pill'\"\n [class.tc-rev-tag--full-width]=\"fullWidth()\"\n class=\"{{!color() && !variant() ? '' : 'tc-rev-tag tc-rev-tag--c-' + color() + '-' + variant()}}\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{display:block}.tc-rev-tag,.tc-rev-tag--lg,.tc-rev-tag--md,.tc-rev-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)}.tc-rev-tag--full-width{width:100%}.tc-rev-tag--sm{padding:var(--size-2) var(--size-4);height:var(--size-22);max-height:var(--size-22);min-height:var(--size-22)}.tc-rev-tag--md{padding:var(--size-4);height:var(--size-26);max-height:var(--size-26);min-height:var(--size-26)}.tc-rev-tag--lg{padding:var(--size-8);height:var(--size-34);max-height:var(--size-34);min-height:var(--size-34)}.tc-rev-tag--pill{border-radius:var(--bor-radius-pill)}.tc-rev-tag--c-neutral-50-filled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-100-filled{background-color:var(--c-neutral-100);border-color:var(--c-neutral-100);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-200-filled{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-300-filled{background-color:var(--c-neutral-300);border-color:var(--c-neutral-300);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-400-filled{background-color:var(--c-neutral-400);border-color:var(--c-neutral-400);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-500-filled{background-color:var(--c-neutral-500);border-color:var(--c-neutral-500);color:var(--c-neutral-50)}.tc-rev-tag--c-neutral-600-filled{background-color:var(--c-neutral-600);border-color:var(--c-neutral-600);color:var(--c-neutral-50)}.tc-rev-tag--c-neutral-700-filled,.tc-rev-tag--c-neutral-800-filled{background-color:var(--c-neutral-700);border-color:var(--c-neutral-700);color:var(--c-neutral-50)}.tc-rev-tag--c-primary-300-filled{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-neutral-700)}.tc-rev-tag--c-primary-400-filled{background-color:var(--c-primary-400);border-color:var(--c-primary-400);color:var(--c-neutral-700)}.tc-rev-tag--c-primary-500-filled{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-tag--c-primary-600-filled{background-color:var(--c-primary-600);border-color:var(--c-primary-600);color:var(--c-neutral-50)}.tc-rev-tag--c-primary-700-filled{background-color:var(--c-primary-700);border-color:var(--c-primary-700);color:var(--c-neutral-50)}.tc-rev-tag--c-danger-300-filled{background-color:var(--c-danger-300);border-color:var(--c-danger-300);color:var(--c-neutral-700)}.tc-rev-tag--c-danger-400-filled{background-color:var(--c-danger-400);border-color:var(--c-danger-400);color:var(--c-neutral-700)}.tc-rev-tag--c-danger-500-filled{background-color:var(--c-danger-500);border-color:var(--c-danger-500);color:var(--c-neutral-50)}.tc-rev-tag--c-alert-300-filled{background-color:var(--c-alert-300);border-color:var(--c-alert-300);color:var(--c-neutral-700)}.tc-rev-tag--c-alert-400-filled{background-color:var(--c-alert-400);border-color:var(--c-alert-400);color:var(--c-neutral-700)}.tc-rev-tag--c-alert-500-filled{background-color:var(--c-alert-500);border-color:var(--c-alert-500);color:var(--c-neutral-700)}.tc-rev-tag--c-info-300-filled{background-color:var(--c-info-300);border-color:var(--c-info-300);color:var(--c-neutral-700)}.tc-rev-tag--c-info-400-filled{background-color:var(--c-info-400);border-color:var(--c-info-400);color:var(--c-neutral-700)}.tc-rev-tag--c-info-500-filled{background-color:var(--c-info-500);border-color:var(--c-info-500);color:var(--c-neutral-50)}.tc-rev-tag--c-success-300-filled{background-color:var(--c-success-300);border-color:var(--c-success-300);color:var(--c-neutral-700)}.tc-rev-tag--c-success-400-filled{background-color:var(--c-success-400);border-color:var(--c-success-400);color:var(--c-neutral-700)}.tc-rev-tag--c-success-500-filled{background-color:var(--c-success-500);border-color:var(--c-success-500);color:var(--c-neutral-700)}.tc-rev-tag--c-neutral-50-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-50)}.tc-rev-tag--c-neutral-100-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-100);color:var(--c-neutral-100)}.tc-rev-tag--c-neutral-200-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-200);color:var(--c-neutral-200)}.tc-rev-tag--c-neutral-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-300)}.tc-rev-tag--c-neutral-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tc-rev-tag--c-neutral-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-500);color:var(--c-neutral-500)}.tc-rev-tag--c-neutral-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-600);color:var(--c-neutral-600)}.tc-rev-tag--c-neutral-700-outline,.tc-rev-tag--c-neutral-800-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-700);color:var(--c-neutral-700)}.tc-rev-tag--c-primary-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-300);color:var(--c-primary-300)}.tc-rev-tag--c-primary-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-400);color:var(--c-primary-400)}.tc-rev-tag--c-primary-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-tag--c-primary-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-600);color:var(--c-primary-600)}.tc-rev-tag--c-primary-700-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-700);color:var(--c-primary-700)}.tc-rev-tag--c-danger-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-300);color:var(--c-danger-300)}.tc-rev-tag--c-danger-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-400);color:var(--c-danger-400)}.tc-rev-tag--c-danger-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-500);color:var(--c-danger-500)}.tc-rev-tag--c-alert-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-300);color:var(--c-alert-300)}.tc-rev-tag--c-alert-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-400);color:var(--c-alert-400)}.tc-rev-tag--c-alert-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-500);color:var(--c-alert-500)}.tc-rev-tag--c-info-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-300);color:var(--c-info-300)}.tc-rev-tag--c-info-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-400);color:var(--c-info-400)}.tc-rev-tag--c-info-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-500);color:var(--c-info-500)}.tc-rev-tag--c-success-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-300);color:var(--c-success-300)}.tc-rev-tag--c-success-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-400);color:var(--c-success-400)}.tc-rev-tag--c-success-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-500);color:var(--c-success-500)}\n"] }]
|
|
12405
|
+
}] });
|
|
12406
|
+
|
|
12407
|
+
class TcRevToastComponent {
|
|
12408
|
+
constructor() {
|
|
12409
|
+
this.type = input('info');
|
|
12410
|
+
this.fullWidth = input(false);
|
|
12411
|
+
this.size = input('md');
|
|
12412
|
+
}
|
|
12413
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: TcRevToastComponent, isStandalone: true, selector: "tc-rev-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=\"tc-rev-toast c-neutral-700\">\n <div\n class=\"tc-rev-toast__icon\"\n [ngClass]=\"[\n 'tc-rev-toast__icon--' + type(),\n 'tc-rev-toast__icon--' + size()\n ]\"\n >\n <ng-content select=\"[icon]\" />\n </div>\n\n <div\n class=\"tc-rev-toast__content\"\n [ngClass]=\"[\n 'tc-rev-toast__content--' + type(),\n 'tc-rev-toast__content--' + size()\n ]\"\n [class.full-width]=\"fullWidth()\"\n >\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block}.tc-rev-toast{display:flex}.tc-rev-toast__icon{align-items:center;border-radius:var(--bor-radius-8) 0 0 var(--bor-radius-8);display:flex;justify-content:center}.tc-rev-toast__icon--info{background-color:var(--c-primary-500)}.tc-rev-toast__icon--success{background-color:var(--c-success-500)}.tc-rev-toast__icon--alert{background-color:var(--c-alert-500)}.tc-rev-toast__icon--danger{background-color:var(--c-danger-500)}.tc-rev-toast__icon--sm{font-size:var(--f-size-20);padding:var(--size-14)}.tc-rev-toast__icon--md{font-size:var(--f-size-24);padding:var(--size-16)}.tc-rev-toast__icon--lg{font-size:var(--f-size-24);padding:var(--size-18)}.tc-rev-toast__content{align-items:center;border-radius:0 var(--bor-radius-8) var(--bor-radius-8) 0;display:flex;font-family:var(--f-family)}.tc-rev-toast__content--info{background-color:var(--c-primary-300)}.tc-rev-toast__content--success{background-color:var(--c-success-300)}.tc-rev-toast__content--alert{background-color:var(--c-alert-300)}.tc-rev-toast__content--danger{background-color:var(--c-danger-300)}.tc-rev-toast__content--sm{padding:var(--size-12);font-size:var(--f-size-12);line-height:var(--l-height-16)}.tc-rev-toast__content--md{padding:var(--size-16);font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-toast__content--lg{padding:var(--size-18);font-size:var(--f-size-16);line-height:var(--l-height-24)}.tc-rev-toast__content.full-width{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
12415
|
+
}
|
|
12416
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevToastComponent, decorators: [{
|
|
12417
|
+
type: Component,
|
|
12418
|
+
args: [{ selector: 'tc-rev-toast', imports: [CommonModule], template: "<div class=\"tc-rev-toast c-neutral-700\">\n <div\n class=\"tc-rev-toast__icon\"\n [ngClass]=\"[\n 'tc-rev-toast__icon--' + type(),\n 'tc-rev-toast__icon--' + size()\n ]\"\n >\n <ng-content select=\"[icon]\" />\n </div>\n\n <div\n class=\"tc-rev-toast__content\"\n [ngClass]=\"[\n 'tc-rev-toast__content--' + type(),\n 'tc-rev-toast__content--' + size()\n ]\"\n [class.full-width]=\"fullWidth()\"\n >\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block}.tc-rev-toast{display:flex}.tc-rev-toast__icon{align-items:center;border-radius:var(--bor-radius-8) 0 0 var(--bor-radius-8);display:flex;justify-content:center}.tc-rev-toast__icon--info{background-color:var(--c-primary-500)}.tc-rev-toast__icon--success{background-color:var(--c-success-500)}.tc-rev-toast__icon--alert{background-color:var(--c-alert-500)}.tc-rev-toast__icon--danger{background-color:var(--c-danger-500)}.tc-rev-toast__icon--sm{font-size:var(--f-size-20);padding:var(--size-14)}.tc-rev-toast__icon--md{font-size:var(--f-size-24);padding:var(--size-16)}.tc-rev-toast__icon--lg{font-size:var(--f-size-24);padding:var(--size-18)}.tc-rev-toast__content{align-items:center;border-radius:0 var(--bor-radius-8) var(--bor-radius-8) 0;display:flex;font-family:var(--f-family)}.tc-rev-toast__content--info{background-color:var(--c-primary-300)}.tc-rev-toast__content--success{background-color:var(--c-success-300)}.tc-rev-toast__content--alert{background-color:var(--c-alert-300)}.tc-rev-toast__content--danger{background-color:var(--c-danger-300)}.tc-rev-toast__content--sm{padding:var(--size-12);font-size:var(--f-size-12);line-height:var(--l-height-16)}.tc-rev-toast__content--md{padding:var(--size-16);font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-toast__content--lg{padding:var(--size-18);font-size:var(--f-size-16);line-height:var(--l-height-24)}.tc-rev-toast__content.full-width{flex-grow:1}\n"] }]
|
|
12419
|
+
}] });
|
|
12420
|
+
|
|
12421
|
+
class TcRevSubNavbarItemComponent {
|
|
12422
|
+
constructor() {
|
|
12423
|
+
this.label = input.required();
|
|
12424
|
+
this.onClick = output();
|
|
12425
|
+
this.active = input(false);
|
|
12426
|
+
this.routerLink = input(null);
|
|
12427
|
+
this.queryParams = input(null);
|
|
12428
|
+
}
|
|
12429
|
+
handleClick(_ev) {
|
|
12430
|
+
this.onClick.emit(_ev);
|
|
12431
|
+
}
|
|
12432
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSubNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12433
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TcRevSubNavbarItemComponent, isStandalone: true, selector: "tc-rev-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"] }] }); }
|
|
12434
|
+
}
|
|
12435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSubNavbarItemComponent, decorators: [{
|
|
12436
|
+
type: Component,
|
|
12437
|
+
args: [{ selector: 'tc-rev-sub-navbar-item', imports: [
|
|
12438
|
+
CommonModule,
|
|
12439
|
+
RouterModule,
|
|
12440
|
+
], 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"] }]
|
|
12441
|
+
}], propDecorators: { isMenuExpanded: [{
|
|
12442
|
+
type: Input
|
|
12443
|
+
}] } });
|
|
12444
|
+
|
|
12445
|
+
class TcRevSubNavbarComponent {
|
|
12446
|
+
constructor() {
|
|
12447
|
+
this.isMenuExpanded = signal(true);
|
|
12448
|
+
this.onSubMenuExpandChange = output();
|
|
12449
|
+
}
|
|
12450
|
+
ngAfterContentInit() {
|
|
12451
|
+
setTimeout(() => this.setExpandedMenuValueToChildrend(), 0);
|
|
12452
|
+
}
|
|
12453
|
+
handleExpandMenu() {
|
|
12454
|
+
this.isMenuExpanded.update((value) => !value);
|
|
12455
|
+
this.setExpandedMenuValueToChildrend();
|
|
12456
|
+
}
|
|
12457
|
+
setExpandedMenuValueToChildrend() {
|
|
12458
|
+
if (!this.subNavbarItems?.length)
|
|
12459
|
+
return;
|
|
12460
|
+
this.subNavbarItems.forEach((x) => {
|
|
12461
|
+
x.isMenuExpanded = this.isMenuExpanded();
|
|
12462
|
+
});
|
|
12463
|
+
this.onSubMenuExpandChange.emit(this.isMenuExpanded());
|
|
12464
|
+
}
|
|
12465
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSubNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12466
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TcRevSubNavbarComponent, isStandalone: true, selector: "tc-rev-sub-navbar", outputs: { onSubMenuExpandChange: "onSubMenuExpandChange" }, queries: [{ propertyName: "subNavbarItems", predicate: TcRevSubNavbarItemComponent }], 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 <tc-rev-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 </tc-rev-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: TcRevSubNavbarItemComponent, selector: "tc-rev-sub-navbar-item", inputs: ["isMenuExpanded", "label", "active", "routerLink", "queryParams"], outputs: ["onClick"] }] }); }
|
|
12467
|
+
}
|
|
12468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevSubNavbarComponent, decorators: [{
|
|
12469
|
+
type: Component,
|
|
12470
|
+
args: [{ selector: 'tc-rev-sub-navbar', imports: [
|
|
12471
|
+
CommonModule,
|
|
12472
|
+
TcRevSubNavbarItemComponent,
|
|
12473
|
+
], template: "<nav class=\"tc-sub-navbar\">\n <ul\n class=\"tc-sub-navbar-list\"\n [class.tc-rev-submenu-expanded]=\"isMenuExpanded()\"\n >\n <tc-rev-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 </tc-rev-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"] }]
|
|
12474
|
+
}], propDecorators: { subNavbarItems: [{
|
|
12475
|
+
type: ContentChildren,
|
|
12476
|
+
args: [TcRevSubNavbarItemComponent]
|
|
12477
|
+
}] } });
|
|
12478
|
+
|
|
12479
|
+
class TcRevWizardStepsComponent {
|
|
12480
|
+
constructor() {
|
|
12481
|
+
this.onStepClick = output();
|
|
12482
|
+
this.direction = input('horizontal');
|
|
12483
|
+
this.currentStep = input(0);
|
|
12484
|
+
this.stepClickable = input(false);
|
|
12485
|
+
this.steps = input.required();
|
|
12486
|
+
}
|
|
12487
|
+
handleStepClick(step, isNext, index) {
|
|
12488
|
+
if (this.stepClickable() && !isNext) {
|
|
12489
|
+
this.onStepClick.emit({ step, index });
|
|
12490
|
+
}
|
|
12491
|
+
}
|
|
12492
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevWizardStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12493
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TcRevWizardStepsComponent, isStandalone: true, selector: "tc-rev-wizard-steps", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, stepClickable: { classPropertyName: "stepClickable", publicName: "stepClickable", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onStepClick: "onStepClick" }, ngImport: i0, template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tc-rev-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description{color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
|
|
12494
|
+
trigger('progressBarEntering', [
|
|
12495
|
+
state('in', style({ width: '*' })),
|
|
12496
|
+
transition('void => *', [
|
|
12497
|
+
style({ width: 0 }),
|
|
12498
|
+
animate('1.5s 0s ease')
|
|
12499
|
+
])
|
|
12500
|
+
])
|
|
12501
|
+
] }); }
|
|
12502
|
+
}
|
|
12503
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevWizardStepsComponent, decorators: [{
|
|
12504
|
+
type: Component,
|
|
12505
|
+
args: [{ selector: 'tc-rev-wizard-steps', imports: [CommonModule], animations: [
|
|
12506
|
+
trigger('progressBarEntering', [
|
|
12507
|
+
state('in', style({ width: '*' })),
|
|
12508
|
+
transition('void => *', [
|
|
12509
|
+
style({ width: 0 }),
|
|
12510
|
+
animate('1.5s 0s ease')
|
|
12511
|
+
])
|
|
12512
|
+
])
|
|
12513
|
+
], template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tc-rev-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description{color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-400)}\n"] }]
|
|
12514
|
+
}] });
|
|
12515
|
+
|
|
12516
|
+
class TcRevBreadcrumbService {
|
|
12517
|
+
constructor() {
|
|
12518
|
+
this.breadcrumbsSubject = new BehaviorSubject([]);
|
|
12519
|
+
this.breadcrumbs$ = this.breadcrumbsSubject.asObservable();
|
|
12520
|
+
}
|
|
12521
|
+
setBreadcrumb(items) {
|
|
12522
|
+
this.breadcrumbsSubject.next(items);
|
|
12523
|
+
}
|
|
12524
|
+
addLevel(item) {
|
|
12525
|
+
const currentItems = this.breadcrumbsSubject.getValue();
|
|
12526
|
+
this.breadcrumbsSubject.next([...currentItems, item]);
|
|
12527
|
+
}
|
|
12528
|
+
removeLastLevel() {
|
|
12529
|
+
const currentItems = this.breadcrumbsSubject.getValue();
|
|
12530
|
+
if (currentItems.length > 0) {
|
|
12531
|
+
const newItems = [...currentItems];
|
|
12532
|
+
newItems.pop();
|
|
12533
|
+
this.breadcrumbsSubject.next(newItems);
|
|
12534
|
+
}
|
|
12535
|
+
}
|
|
12536
|
+
clear() {
|
|
12537
|
+
this.breadcrumbsSubject.next([]);
|
|
12538
|
+
}
|
|
12539
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
12540
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevBreadcrumbService, providedIn: 'root' }); }
|
|
12541
|
+
}
|
|
12542
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevBreadcrumbService, decorators: [{
|
|
12543
|
+
type: Injectable,
|
|
12544
|
+
args: [{
|
|
12545
|
+
providedIn: 'root',
|
|
12546
|
+
}]
|
|
12547
|
+
}], ctorParameters: () => [] });
|
|
12548
|
+
|
|
12549
|
+
class TcRevBreadcrumbComponent {
|
|
12550
|
+
constructor() {
|
|
12551
|
+
this.breadcrumbs = [];
|
|
12552
|
+
this.router = inject(Router);
|
|
12553
|
+
this.breadcrumbService = inject(TcRevBreadcrumbService);
|
|
12554
|
+
}
|
|
12555
|
+
ngOnInit() {
|
|
12556
|
+
this.breadcrumbService.breadcrumbs$.subscribe(items => this.breadcrumbs = items);
|
|
12557
|
+
}
|
|
12558
|
+
navigate(url, index) {
|
|
12559
|
+
if (url) {
|
|
12560
|
+
this.router.navigateByUrl(url);
|
|
12561
|
+
// Opcional: remover níveis do breadcrumb após o clicado
|
|
12562
|
+
if (index !== undefined && index < this.breadcrumbs.length - 1) {
|
|
12563
|
+
this.breadcrumbService.setBreadcrumb(this.breadcrumbs.slice(0, index + 1));
|
|
12564
|
+
}
|
|
12565
|
+
}
|
|
12566
|
+
}
|
|
12567
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TcRevBreadcrumbComponent, isStandalone: true, selector: "tc-rev-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"tc-rev-breadcrumb\">\n <ol class=\"tc-rev-breadcrumb-list\">\n <!-- Link para o Dashboard -->\n <li class=\"tc-rev-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=\"tc-rev-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>", styles: [":host{display:block}.tc-rev-breadcrumb-list{display:flex;list-style:none;padding:0;margin:0;margin-bottom:var(--size-24)}.tc-rev-breadcrumb-item{display:flex;align-items:center;color:var(--c-neutral-700);font-size:var(--f-size-14);font-family:var(--f-family)}.tc-rev-breadcrumb-item a{text-decoration:none;color:inherit;cursor:pointer}.tc-rev-breadcrumb-item a:hover{text-decoration:underline}.tc-rev-breadcrumb-item i{margin:0}.tc-rev-breadcrumb-item i.fa-chevron-right{margin:0 var(--size-12)}.tc-rev-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"] }] }); }
|
|
12569
|
+
}
|
|
12570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevBreadcrumbComponent, decorators: [{
|
|
12571
|
+
type: Component,
|
|
12572
|
+
args: [{ selector: 'tc-rev-breadcrumb', imports: [
|
|
12573
|
+
CommonModule,
|
|
12574
|
+
RouterModule
|
|
12575
|
+
], template: "<nav aria-label=\"breadcrumb\" class=\"tc-rev-breadcrumb\">\n <ol class=\"tc-rev-breadcrumb-list\">\n <!-- Link para o Dashboard -->\n <li class=\"tc-rev-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=\"tc-rev-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>", styles: [":host{display:block}.tc-rev-breadcrumb-list{display:flex;list-style:none;padding:0;margin:0;margin-bottom:var(--size-24)}.tc-rev-breadcrumb-item{display:flex;align-items:center;color:var(--c-neutral-700);font-size:var(--f-size-14);font-family:var(--f-family)}.tc-rev-breadcrumb-item a{text-decoration:none;color:inherit;cursor:pointer}.tc-rev-breadcrumb-item a:hover{text-decoration:underline}.tc-rev-breadcrumb-item i{margin:0}.tc-rev-breadcrumb-item i.fa-chevron-right{margin:0 var(--size-12)}.tc-rev-breadcrumb-item.active{pointer-events:none}\n"] }]
|
|
12576
|
+
}], ctorParameters: () => [] });
|
|
12577
|
+
|
|
12578
|
+
class TcRevComponentsLibModule {
|
|
12579
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevComponentsLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
12580
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: TcRevComponentsLibModule, imports: [TcRevBreadcrumbComponent,
|
|
12581
|
+
TcRevButtonDirective,
|
|
12582
|
+
TcRevCalendarComponent,
|
|
12583
|
+
TcRevCardComponent,
|
|
12584
|
+
TcRevCardAccordionComponent,
|
|
12585
|
+
TcRevCardTitleComponent,
|
|
12586
|
+
TcRevCheckboxDirective,
|
|
12587
|
+
TcRevDropdownComponent,
|
|
12588
|
+
TcRevDropdownGroupedComponent,
|
|
12589
|
+
TcRevDropdownMultiComponent,
|
|
12590
|
+
TcRevDropdownMultiLevelComponent,
|
|
12591
|
+
TcRevEmptyContentComponent,
|
|
12592
|
+
TcRevFaqComponent,
|
|
12593
|
+
TcRevIconButtonDirective,
|
|
12594
|
+
TcRevInputContainerComponent,
|
|
12595
|
+
TcRevInputDirective,
|
|
12596
|
+
TcRevLoadingComponent,
|
|
12597
|
+
TcRevMessageComponent,
|
|
12598
|
+
TcRevMultiInputComponent,
|
|
12599
|
+
TcRevPaginationComponent,
|
|
12600
|
+
TcRevProgressStatusBarComponent,
|
|
12601
|
+
TcRevRadioDirective,
|
|
12602
|
+
TcRevSearchInputComponent,
|
|
12603
|
+
TcRevSideDrawerComponent,
|
|
12604
|
+
TcRevSkeletonLoadingComponent,
|
|
12605
|
+
TcRevSlideToggleDirective,
|
|
12606
|
+
TcRevSmallLoadingComponent,
|
|
12607
|
+
TcRevTabGroupComponent,
|
|
12608
|
+
TcRevTabItemComponent,
|
|
12609
|
+
TcRevTagComponent,
|
|
12610
|
+
TcRevToastComponent,
|
|
12611
|
+
TcRevTooltipDirective,
|
|
12612
|
+
TcRevSubNavbarComponent,
|
|
12613
|
+
TcRevSubNavbarItemComponent,
|
|
12614
|
+
TcRevWizardStepsComponent], exports: [
|
|
12615
|
+
// TcRevBreadcrumbComponent,
|
|
12616
|
+
TcRevButtonDirective,
|
|
12617
|
+
TcRevCalendarComponent,
|
|
12618
|
+
TcRevCardComponent,
|
|
12619
|
+
TcRevCardAccordionComponent,
|
|
12620
|
+
TcRevCardTitleComponent,
|
|
12621
|
+
TcRevCheckboxDirective,
|
|
12622
|
+
TcRevDropdownComponent,
|
|
12623
|
+
TcRevDropdownGroupedComponent,
|
|
12624
|
+
TcRevDropdownMultiComponent,
|
|
12625
|
+
TcRevDropdownMultiLevelComponent,
|
|
12626
|
+
TcRevEmptyContentComponent,
|
|
12627
|
+
TcRevFaqComponent,
|
|
12628
|
+
TcRevIconButtonDirective,
|
|
12629
|
+
TcRevInputContainerComponent,
|
|
12630
|
+
TcRevInputDirective,
|
|
12631
|
+
TcRevLoadingComponent,
|
|
12632
|
+
TcRevMessageComponent,
|
|
12633
|
+
TcRevMultiInputComponent,
|
|
12634
|
+
TcRevPaginationComponent,
|
|
12635
|
+
TcRevProgressStatusBarComponent,
|
|
12636
|
+
TcRevSmallLoadingComponent,
|
|
12637
|
+
TcRevRadioDirective,
|
|
12638
|
+
TcRevSearchInputComponent,
|
|
12639
|
+
TcRevSideDrawerComponent,
|
|
12640
|
+
TcRevSkeletonLoadingComponent,
|
|
12641
|
+
TcRevSlideToggleDirective,
|
|
12642
|
+
TcRevTabGroupComponent,
|
|
12643
|
+
TcRevTabItemComponent,
|
|
12644
|
+
TcRevTagComponent,
|
|
12645
|
+
TcRevToastComponent,
|
|
12646
|
+
TcRevTooltipDirective,
|
|
12647
|
+
TcRevSubNavbarComponent,
|
|
12648
|
+
TcRevSubNavbarItemComponent,
|
|
12649
|
+
TcRevWizardStepsComponent] }); }
|
|
12650
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevComponentsLibModule, imports: [TcRevBreadcrumbComponent,
|
|
12651
|
+
TcRevCalendarComponent,
|
|
12652
|
+
TcRevCardComponent,
|
|
12653
|
+
TcRevCardAccordionComponent,
|
|
12654
|
+
TcRevDropdownComponent,
|
|
12655
|
+
TcRevDropdownGroupedComponent,
|
|
12656
|
+
TcRevDropdownMultiComponent,
|
|
12657
|
+
TcRevDropdownMultiLevelComponent,
|
|
12658
|
+
TcRevFaqComponent,
|
|
12659
|
+
TcRevInputContainerComponent,
|
|
12660
|
+
TcRevMessageComponent,
|
|
12661
|
+
TcRevMultiInputComponent,
|
|
12662
|
+
TcRevPaginationComponent,
|
|
12663
|
+
TcRevSearchInputComponent,
|
|
12664
|
+
TcRevSideDrawerComponent,
|
|
12665
|
+
TcRevSkeletonLoadingComponent,
|
|
12666
|
+
TcRevSmallLoadingComponent,
|
|
12667
|
+
TcRevTabGroupComponent,
|
|
12668
|
+
TcRevTabItemComponent,
|
|
12669
|
+
TcRevTagComponent,
|
|
12670
|
+
TcRevToastComponent,
|
|
12671
|
+
TcRevSubNavbarComponent,
|
|
12672
|
+
TcRevSubNavbarItemComponent,
|
|
12673
|
+
TcRevWizardStepsComponent] }); }
|
|
12674
|
+
}
|
|
12675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TcRevComponentsLibModule, decorators: [{
|
|
12676
|
+
type: NgModule,
|
|
12677
|
+
args: [{
|
|
12678
|
+
imports: [
|
|
12679
|
+
TcRevBreadcrumbComponent,
|
|
12680
|
+
TcRevButtonDirective,
|
|
12681
|
+
TcRevCalendarComponent,
|
|
12682
|
+
TcRevCardComponent,
|
|
12683
|
+
TcRevCardAccordionComponent,
|
|
12684
|
+
TcRevCardTitleComponent,
|
|
12685
|
+
TcRevCheckboxDirective,
|
|
12686
|
+
TcRevDropdownComponent,
|
|
12687
|
+
TcRevDropdownGroupedComponent,
|
|
12688
|
+
TcRevDropdownMultiComponent,
|
|
12689
|
+
TcRevDropdownMultiLevelComponent,
|
|
12690
|
+
TcRevEmptyContentComponent,
|
|
12691
|
+
TcRevFaqComponent,
|
|
12692
|
+
TcRevIconButtonDirective,
|
|
12693
|
+
TcRevInputContainerComponent,
|
|
12694
|
+
TcRevInputDirective,
|
|
12695
|
+
TcRevLoadingComponent,
|
|
12696
|
+
TcRevMessageComponent,
|
|
12697
|
+
TcRevMultiInputComponent,
|
|
12698
|
+
TcRevPaginationComponent,
|
|
12699
|
+
TcRevProgressStatusBarComponent,
|
|
12700
|
+
TcRevRadioDirective,
|
|
12701
|
+
TcRevSearchInputComponent,
|
|
12702
|
+
TcRevSideDrawerComponent,
|
|
12703
|
+
TcRevSkeletonLoadingComponent,
|
|
12704
|
+
TcRevSlideToggleDirective,
|
|
12705
|
+
TcRevSmallLoadingComponent,
|
|
12706
|
+
TcRevTabGroupComponent,
|
|
12707
|
+
TcRevTabItemComponent,
|
|
12708
|
+
TcRevTagComponent,
|
|
12709
|
+
TcRevToastComponent,
|
|
12710
|
+
TcRevTooltipDirective,
|
|
12711
|
+
TcRevSubNavbarComponent,
|
|
12712
|
+
TcRevSubNavbarItemComponent,
|
|
12713
|
+
TcRevWizardStepsComponent,
|
|
12714
|
+
],
|
|
12715
|
+
exports: [
|
|
12716
|
+
// TcRevBreadcrumbComponent,
|
|
12717
|
+
TcRevButtonDirective,
|
|
12718
|
+
TcRevCalendarComponent,
|
|
12719
|
+
TcRevCardComponent,
|
|
12720
|
+
TcRevCardAccordionComponent,
|
|
12721
|
+
TcRevCardTitleComponent,
|
|
12722
|
+
TcRevCheckboxDirective,
|
|
12723
|
+
TcRevDropdownComponent,
|
|
12724
|
+
TcRevDropdownGroupedComponent,
|
|
12725
|
+
TcRevDropdownMultiComponent,
|
|
12726
|
+
TcRevDropdownMultiLevelComponent,
|
|
12727
|
+
TcRevEmptyContentComponent,
|
|
12728
|
+
TcRevFaqComponent,
|
|
12729
|
+
TcRevIconButtonDirective,
|
|
12730
|
+
TcRevInputContainerComponent,
|
|
12731
|
+
TcRevInputDirective,
|
|
12732
|
+
TcRevLoadingComponent,
|
|
12733
|
+
TcRevMessageComponent,
|
|
12734
|
+
TcRevMultiInputComponent,
|
|
12735
|
+
TcRevPaginationComponent,
|
|
12736
|
+
TcRevProgressStatusBarComponent,
|
|
12737
|
+
TcRevSmallLoadingComponent,
|
|
12738
|
+
TcRevRadioDirective,
|
|
12739
|
+
TcRevSearchInputComponent,
|
|
12740
|
+
TcRevSideDrawerComponent,
|
|
12741
|
+
TcRevSkeletonLoadingComponent,
|
|
12742
|
+
TcRevSlideToggleDirective,
|
|
12743
|
+
TcRevTabGroupComponent,
|
|
12744
|
+
TcRevTabItemComponent,
|
|
12745
|
+
TcRevTagComponent,
|
|
12746
|
+
TcRevToastComponent,
|
|
12747
|
+
TcRevTooltipDirective,
|
|
12748
|
+
TcRevSubNavbarComponent,
|
|
12749
|
+
TcRevSubNavbarItemComponent,
|
|
12750
|
+
TcRevWizardStepsComponent,
|
|
12751
|
+
],
|
|
12752
|
+
declarations: [],
|
|
12753
|
+
providers: [],
|
|
12754
|
+
}]
|
|
12755
|
+
}] });
|
|
10709
12756
|
|
|
10710
12757
|
/*
|
|
10711
12758
|
* Public API Surface of tcloud-ui
|
|
@@ -10715,5 +12762,5 @@ function echartBarConfig(echarts, chartData) {
|
|
|
10715
12762
|
* Generated bundle index. Do not edit.
|
|
10716
12763
|
*/
|
|
10717
12764
|
|
|
10718
|
-
export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownMultiSize, DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCarouselComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDialogComponent, TCloudUiDialogEventsEnum, TCloudUiDialogHostComponent, TCloudUiDialogModel, TCloudUiDialogService, TCloudUiDialogStatusEnum, TCloudUiDialogTextConfirmationEnum, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiDropdownMultiLevelComponent, TCloudUiEditorComponent, TCloudUiEditorDiffComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMarkReadmeComponent, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiProgressStatusBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
|
|
12765
|
+
export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize$1 as MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus$1 as ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCarouselComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDialogComponent, TCloudUiDialogEventsEnum, TCloudUiDialogHostComponent, TCloudUiDialogModel, TCloudUiDialogService, TCloudUiDialogStatusEnum, TCloudUiDialogTextConfirmationEnum, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiDropdownMultiLevelComponent, TCloudUiEditorComponent, TCloudUiEditorDiffComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMarkReadmeComponent, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiPopoverComponent, TCloudUiProgressBarComponent, TCloudUiProgressStatusBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, 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, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
|
|
10719
12766
|
//# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map
|