@dev-tcloud/tcloud-ui 5.3.9 → 5.4.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +128 -58
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_services/tcloud-ui-device.service.d.ts +22 -0
- package/lib/revitalizacao/components/tc-rev-card/tc-rev-card.component.d.ts +2 -2
- package/lib/revitalizacao/components/tc-rev-card-accordion/tc-rev-card-accordion.component.d.ts +2 -2
- package/lib/revitalizacao/components/tc-rev-dropdown/tc-rev-dropdown.component.d.ts +6 -1
- package/package.json +1 -1
- package/lib/_services/view-port.service.d.ts +0 -12
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter, Input, Output, Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, forwardRef, ViewChild, Pipe, ViewEncapsulation, Directive, HostListener, Optional, Inject, signal, computed, input, effect, output,
|
|
2
|
+
import { Injectable, EventEmitter, Input, Output, Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, forwardRef, ViewChild, Pipe, ViewEncapsulation, Directive, HostListener, Optional, Inject, signal, computed, inject, ApplicationRef, input, effect, output, model, ChangeDetectionStrategy, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
|
|
5
5
|
import { Subject, Subscription, debounceTime, distinctUntilChanged, map, BehaviorSubject } from 'rxjs';
|
|
6
|
-
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
6
|
+
import { trigger, state, transition, style, animate, AnimationBuilder } from '@angular/animations';
|
|
7
7
|
import * as i2 from '@angular/forms';
|
|
8
8
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, NG_VALIDATORS, FormGroup, Validators } from '@angular/forms';
|
|
9
9
|
import * as i1$1 from '@angular/router';
|
|
@@ -6810,29 +6810,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6810
6810
|
args: ['ThemeService']
|
|
6811
6811
|
}] }] });
|
|
6812
6812
|
|
|
6813
|
-
class
|
|
6814
|
-
constructor() {
|
|
6815
|
-
|
|
6816
|
-
this.widthScreen = signal(window.innerWidth);
|
|
6817
|
-
// Breakpoints principais
|
|
6813
|
+
class TCloudUiDeviceService {
|
|
6814
|
+
constructor(rendererFactory) {
|
|
6815
|
+
/*** Viewport mobile ***/
|
|
6818
6816
|
this.DESKTOP_MIN = 480;
|
|
6819
|
-
|
|
6817
|
+
this.widthScreen = signal(window.innerWidth);
|
|
6818
|
+
// largura atual da viewport
|
|
6820
6819
|
this.width = computed(() => this.widthScreen());
|
|
6821
6820
|
this.isDesktop = computed(() => this.width() > this.DESKTOP_MIN);
|
|
6822
6821
|
this.isMobile = computed(() => this.width() <= this.DESKTOP_MIN);
|
|
6822
|
+
this.menuHost = null;
|
|
6823
|
+
this.embeddedView = null;
|
|
6824
|
+
this.appRef = inject(ApplicationRef);
|
|
6825
|
+
this.animationBuilder = inject(AnimationBuilder);
|
|
6826
|
+
this.player = null;
|
|
6827
|
+
this.renderer = rendererFactory.createRenderer(null, null);
|
|
6823
6828
|
window.addEventListener('resize', () => {
|
|
6824
6829
|
this.widthScreen.set(window.innerWidth);
|
|
6825
6830
|
});
|
|
6826
6831
|
}
|
|
6827
|
-
|
|
6828
|
-
|
|
6832
|
+
openDropdownDevice(menuTemplate) {
|
|
6833
|
+
this.menuHost = this.renderer.createElement('div');
|
|
6834
|
+
this.renderer.setStyle(this.menuHost, 'position', 'fixed');
|
|
6835
|
+
this.renderer.setStyle(this.menuHost, 'top', '0');
|
|
6836
|
+
this.renderer.setStyle(this.menuHost, 'left', '0');
|
|
6837
|
+
this.renderer.setStyle(this.menuHost, 'width', '100vw');
|
|
6838
|
+
this.renderer.setStyle(this.menuHost, 'height', '100vh');
|
|
6839
|
+
this.renderer.setStyle(this.menuHost, 'z-index', '9999');
|
|
6840
|
+
this.renderer.setStyle(this.menuHost, 'opacity', '0');
|
|
6841
|
+
this.renderer.appendChild(document.body, this.menuHost);
|
|
6842
|
+
// Impede scroll da página enquanto o dropdown está aberto
|
|
6843
|
+
this.renderer.setStyle(document.body, 'overflow', 'hidden');
|
|
6844
|
+
this.renderer.setStyle(document.body, 'touch-action', 'none');
|
|
6845
|
+
this.embeddedView = menuTemplate.createEmbeddedView({});
|
|
6846
|
+
this.appRef.attachView(this.embeddedView);
|
|
6847
|
+
this.embeddedView.rootNodes.forEach((node) => {
|
|
6848
|
+
this.renderer.appendChild(this.menuHost, node);
|
|
6849
|
+
});
|
|
6850
|
+
const fadeIn = this.animationBuilder.build([
|
|
6851
|
+
style({ opacity: 0 }),
|
|
6852
|
+
animate('200ms ease', style({ opacity: 1 })),
|
|
6853
|
+
]);
|
|
6854
|
+
this.player = fadeIn.create(this.menuHost);
|
|
6855
|
+
this.player.play();
|
|
6856
|
+
}
|
|
6857
|
+
closeDropdownDevice() {
|
|
6858
|
+
if (!this.menuHost)
|
|
6859
|
+
return;
|
|
6860
|
+
const fadeOut = this.animationBuilder.build([
|
|
6861
|
+
style({ opacity: 1 }),
|
|
6862
|
+
animate('200ms ease', style({ opacity: 0 })),
|
|
6863
|
+
]);
|
|
6864
|
+
this.player = fadeOut.create(this.menuHost);
|
|
6865
|
+
this.player.play();
|
|
6866
|
+
this.player.onDone(() => {
|
|
6867
|
+
this.renderer.removeStyle(document.body, 'overflow');
|
|
6868
|
+
this.renderer.removeStyle(document.body, 'touch-action');
|
|
6869
|
+
if (this.embeddedView) {
|
|
6870
|
+
this.appRef.detachView(this.embeddedView);
|
|
6871
|
+
this.embeddedView.destroy();
|
|
6872
|
+
this.embeddedView = null;
|
|
6873
|
+
}
|
|
6874
|
+
this.renderer.removeChild(document.body, this.menuHost);
|
|
6875
|
+
this.menuHost = null;
|
|
6876
|
+
this.player = null;
|
|
6877
|
+
});
|
|
6878
|
+
}
|
|
6879
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiDeviceService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6880
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiDeviceService, providedIn: 'root' }); }
|
|
6829
6881
|
}
|
|
6830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type:
|
|
6882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiDeviceService, decorators: [{
|
|
6831
6883
|
type: Injectable,
|
|
6832
6884
|
args: [{
|
|
6833
6885
|
providedIn: 'root',
|
|
6834
6886
|
}]
|
|
6835
|
-
}], ctorParameters: () => [] });
|
|
6887
|
+
}], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
|
|
6836
6888
|
|
|
6837
6889
|
class TCloudUiModule {
|
|
6838
6890
|
static forRoot(config) {
|
|
@@ -6909,7 +6961,7 @@ class TCloudUiModule {
|
|
|
6909
6961
|
TCloudUiSearchInObjectService,
|
|
6910
6962
|
TCloudUiCheckAccessService,
|
|
6911
6963
|
TCloudUiThemeService,
|
|
6912
|
-
|
|
6964
|
+
TCloudUiDeviceService
|
|
6913
6965
|
], imports: [TCloudUiModalModule,
|
|
6914
6966
|
TCloudUiTabMenuModule,
|
|
6915
6967
|
TCloudUiLinhaLogoModule,
|
|
@@ -7038,7 +7090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7038
7090
|
TCloudUiSearchInObjectService,
|
|
7039
7091
|
TCloudUiCheckAccessService,
|
|
7040
7092
|
TCloudUiThemeService,
|
|
7041
|
-
|
|
7093
|
+
TCloudUiDeviceService
|
|
7042
7094
|
]
|
|
7043
7095
|
}]
|
|
7044
7096
|
}] });
|
|
@@ -7218,7 +7270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7218
7270
|
|
|
7219
7271
|
class TcRevCardAccordionComponent {
|
|
7220
7272
|
constructor() {
|
|
7221
|
-
this._viewPort = inject(
|
|
7273
|
+
this._viewPort = inject(TCloudUiDeviceService);
|
|
7222
7274
|
this.toggle = output();
|
|
7223
7275
|
this.title = input('');
|
|
7224
7276
|
this.iconClass = input('fa-light fa-hard-drive');
|
|
@@ -7252,7 +7304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7252
7304
|
|
|
7253
7305
|
class TcRevCardComponent {
|
|
7254
7306
|
constructor() {
|
|
7255
|
-
this._viewPort = inject(
|
|
7307
|
+
this._viewPort = inject(TCloudUiDeviceService);
|
|
7256
7308
|
this.isDesktop = this._viewPort.isDesktop;
|
|
7257
7309
|
}
|
|
7258
7310
|
/**
|
|
@@ -7875,6 +7927,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7875
7927
|
args: ['mouseleave']
|
|
7876
7928
|
}] } });
|
|
7877
7929
|
|
|
7930
|
+
class TcRevIconButtonDirective {
|
|
7931
|
+
constructor(_el) {
|
|
7932
|
+
this._el = _el;
|
|
7933
|
+
this.color = input('primary');
|
|
7934
|
+
this.size = input('sm');
|
|
7935
|
+
this.tcRevIconButton = input('filled');
|
|
7936
|
+
effect(() => {
|
|
7937
|
+
this.setClasses();
|
|
7938
|
+
});
|
|
7939
|
+
}
|
|
7940
|
+
setClasses() {
|
|
7941
|
+
const tokenList = this._el.nativeElement.classList;
|
|
7942
|
+
tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
|
|
7943
|
+
let tcRevIconButton = this.tcRevIconButton();
|
|
7944
|
+
if (!tcRevIconButton) {
|
|
7945
|
+
tcRevIconButton = 'filled';
|
|
7946
|
+
}
|
|
7947
|
+
this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
|
|
7948
|
+
this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}-icon`);
|
|
7949
|
+
this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevIconButton}`);
|
|
7950
|
+
}
|
|
7951
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevIconButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7952
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", 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 }); }
|
|
7953
|
+
}
|
|
7954
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevIconButtonDirective, decorators: [{
|
|
7955
|
+
type: Directive,
|
|
7956
|
+
args: [{
|
|
7957
|
+
selector: 'button[tcRevIconButton]',
|
|
7958
|
+
host: {
|
|
7959
|
+
class: 'tc-rev-btn tc-rev-btn-icon'
|
|
7960
|
+
}
|
|
7961
|
+
}]
|
|
7962
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
7963
|
+
|
|
7878
7964
|
var DropdownSize;
|
|
7879
7965
|
(function (DropdownSize) {
|
|
7880
7966
|
DropdownSize["sm"] = "sm";
|
|
@@ -7889,6 +7975,7 @@ class TcRevDropdownComponent {
|
|
|
7889
7975
|
}
|
|
7890
7976
|
constructor(elementRef) {
|
|
7891
7977
|
this.elementRef = elementRef;
|
|
7978
|
+
this._deviceService = inject(TCloudUiDeviceService);
|
|
7892
7979
|
this.label = input(''); // Label que será exibida
|
|
7893
7980
|
this.disabled = input(false); // Desabilita o dropdown
|
|
7894
7981
|
this.options = input.required(); // Lista de opções no novo formato
|
|
@@ -7900,18 +7987,22 @@ class TcRevDropdownComponent {
|
|
|
7900
7987
|
this.selectedOption = signal(null); // Opção selecionada
|
|
7901
7988
|
this.isOpen = false; // Controla se o dropdown está aberto
|
|
7902
7989
|
this.dropdownSize = DropdownSize;
|
|
7990
|
+
this.isDesktop = this._deviceService.isDesktop;
|
|
7991
|
+
this.isMobile = this._deviceService.isMobile;
|
|
7903
7992
|
}
|
|
7904
7993
|
ngOnChanges(_simpleChanges) {
|
|
7905
7994
|
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
7906
|
-
if (_simpleChanges['initialValue'] ||
|
|
7995
|
+
if (_simpleChanges['initialValue'] ||
|
|
7996
|
+
_simpleChanges['options'] ||
|
|
7997
|
+
_simpleChanges['value']) {
|
|
7907
7998
|
const valueToUse = this.value() || this.initialValue();
|
|
7908
|
-
this.selectedOption.set(this.options().find(option => option.value === valueToUse) || null);
|
|
7999
|
+
this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
|
|
7909
8000
|
}
|
|
7910
8001
|
}
|
|
7911
8002
|
ngOnInit() {
|
|
7912
8003
|
// Prioriza o valor do model, mas mantém compatibilidade com initialValue
|
|
7913
8004
|
const valueToUse = this.value() || this.initialValue();
|
|
7914
|
-
const foundOption = this.options().find(option => option.value === valueToUse) || null;
|
|
8005
|
+
const foundOption = this.options().find((option) => option.value === valueToUse) || null;
|
|
7915
8006
|
this.selectedOption.set(foundOption);
|
|
7916
8007
|
// Se não havia valor no model mas havia initialValue, sincroniza o model
|
|
7917
8008
|
if (!this.value() && this.initialValue() && foundOption) {
|
|
@@ -7919,19 +8010,28 @@ class TcRevDropdownComponent {
|
|
|
7919
8010
|
}
|
|
7920
8011
|
// Escuta mudanças no model e atualiza a opção selecionada
|
|
7921
8012
|
this.value.subscribe((newValue) => {
|
|
7922
|
-
const option = this.options().find(opt => opt.value === newValue) || null;
|
|
8013
|
+
const option = this.options().find((opt) => opt.value === newValue) || null;
|
|
7923
8014
|
if (this.selectedOption() !== option) {
|
|
7924
8015
|
this.selectedOption.set(option);
|
|
7925
8016
|
}
|
|
7926
8017
|
});
|
|
7927
8018
|
}
|
|
7928
8019
|
toggleDropdown() {
|
|
8020
|
+
//Cria lódiga para dropdown no device
|
|
8021
|
+
if (this.isMobile()) {
|
|
8022
|
+
this._deviceService.openDropdownDevice(this.menuTemplate);
|
|
8023
|
+
return;
|
|
8024
|
+
}
|
|
7929
8025
|
this.isOpen = !this.isOpen;
|
|
7930
8026
|
}
|
|
7931
8027
|
selectOption(option) {
|
|
7932
8028
|
this.selectedOption.set(option);
|
|
7933
8029
|
this.value.set(option.value); // Atualiza o model com two-way binding
|
|
7934
8030
|
this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
|
|
8031
|
+
if (this.isMobile()) {
|
|
8032
|
+
this._deviceService.closeDropdownDevice();
|
|
8033
|
+
return;
|
|
8034
|
+
}
|
|
7935
8035
|
this.isOpen = false; // Fecha o dropdown
|
|
7936
8036
|
}
|
|
7937
8037
|
/**
|
|
@@ -7963,7 +8063,7 @@ class TcRevDropdownComponent {
|
|
|
7963
8063
|
return isTextEllipsed(text, availableWidth);
|
|
7964
8064
|
}
|
|
7965
8065
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7966
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\">\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 @if (label())\n {\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\n
|
|
8066
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 <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 @if (label())\n {\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\n *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n @for (option of options(); track option?.value)\n {\n <li\n class=\"tc-rev-dropdown-menu-item\"\n (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 <span\n class=\"tc-rev-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"isOptionEllipsed(option.displayValue) ? option.displayValue : ''\"\n position=\"top\">\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n\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\">{{ label() }}</h3>\n <button tcRevIconButton=\"outline\" color=\"dark\" size=\"sm\" (click)=\"_deviceService.closeDropdownDevice()\">\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\n\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:transparent;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"] }] }); }
|
|
7967
8067
|
}
|
|
7968
8068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
|
|
7969
8069
|
type: Component,
|
|
@@ -7971,9 +8071,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7971
8071
|
CommonModule,
|
|
7972
8072
|
FormsModule,
|
|
7973
8073
|
ReactiveFormsModule,
|
|
7974
|
-
TcRevTooltipDirective
|
|
7975
|
-
|
|
7976
|
-
|
|
8074
|
+
TcRevTooltipDirective,
|
|
8075
|
+
TcRevIconButtonDirective
|
|
8076
|
+
], template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\">\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 @if (label())\n {\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\n *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n @for (option of options(); track option?.value)\n {\n <li\n class=\"tc-rev-dropdown-menu-item\"\n (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 <span\n class=\"tc-rev-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"isOptionEllipsed(option.displayValue) ? option.displayValue : ''\"\n position=\"top\">\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n\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\">{{ label() }}</h3>\n <button tcRevIconButton=\"outline\" color=\"dark\" size=\"sm\" (click)=\"_deviceService.closeDropdownDevice()\">\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\n\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:transparent;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"] }]
|
|
8077
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
|
|
8078
|
+
type: ViewChild,
|
|
8079
|
+
args: ['menuTemplate']
|
|
8080
|
+
}], onDocumentClick: [{
|
|
7977
8081
|
type: HostListener,
|
|
7978
8082
|
args: ['document:click', ['$event']]
|
|
7979
8083
|
}] } });
|
|
@@ -8101,40 +8205,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
8101
8205
|
type: Input
|
|
8102
8206
|
}] } });
|
|
8103
8207
|
|
|
8104
|
-
class TcRevIconButtonDirective {
|
|
8105
|
-
constructor(_el) {
|
|
8106
|
-
this._el = _el;
|
|
8107
|
-
this.color = input('primary');
|
|
8108
|
-
this.size = input('sm');
|
|
8109
|
-
this.tcRevIconButton = input('filled');
|
|
8110
|
-
effect(() => {
|
|
8111
|
-
this.setClasses();
|
|
8112
|
-
});
|
|
8113
|
-
}
|
|
8114
|
-
setClasses() {
|
|
8115
|
-
const tokenList = this._el.nativeElement.classList;
|
|
8116
|
-
tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
|
|
8117
|
-
let tcRevIconButton = this.tcRevIconButton();
|
|
8118
|
-
if (!tcRevIconButton) {
|
|
8119
|
-
tcRevIconButton = 'filled';
|
|
8120
|
-
}
|
|
8121
|
-
this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
|
|
8122
|
-
this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}-icon`);
|
|
8123
|
-
this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevIconButton}`);
|
|
8124
|
-
}
|
|
8125
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevIconButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8126
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", 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 }); }
|
|
8127
|
-
}
|
|
8128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevIconButtonDirective, decorators: [{
|
|
8129
|
-
type: Directive,
|
|
8130
|
-
args: [{
|
|
8131
|
-
selector: 'button[tcRevIconButton]',
|
|
8132
|
-
host: {
|
|
8133
|
-
class: 'tc-rev-btn tc-rev-btn-icon'
|
|
8134
|
-
}
|
|
8135
|
-
}]
|
|
8136
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
8137
|
-
|
|
8138
8208
|
class TcRevInputContainerComponent {
|
|
8139
8209
|
constructor() {
|
|
8140
8210
|
this.fullWidth = input(false);
|