@dev-tcloud/tcloud-ui 5.3.9 → 5.4.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +93 -24
- 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
|
/**
|
|
@@ -7889,6 +7941,7 @@ class TcRevDropdownComponent {
|
|
|
7889
7941
|
}
|
|
7890
7942
|
constructor(elementRef) {
|
|
7891
7943
|
this.elementRef = elementRef;
|
|
7944
|
+
this._deviceService = inject(TCloudUiDeviceService);
|
|
7892
7945
|
this.label = input(''); // Label que será exibida
|
|
7893
7946
|
this.disabled = input(false); // Desabilita o dropdown
|
|
7894
7947
|
this.options = input.required(); // Lista de opções no novo formato
|
|
@@ -7900,18 +7953,22 @@ class TcRevDropdownComponent {
|
|
|
7900
7953
|
this.selectedOption = signal(null); // Opção selecionada
|
|
7901
7954
|
this.isOpen = false; // Controla se o dropdown está aberto
|
|
7902
7955
|
this.dropdownSize = DropdownSize;
|
|
7956
|
+
this.isDesktop = this._deviceService.isDesktop;
|
|
7957
|
+
this.isMobile = this._deviceService.isMobile;
|
|
7903
7958
|
}
|
|
7904
7959
|
ngOnChanges(_simpleChanges) {
|
|
7905
7960
|
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
7906
|
-
if (_simpleChanges['initialValue'] ||
|
|
7961
|
+
if (_simpleChanges['initialValue'] ||
|
|
7962
|
+
_simpleChanges['options'] ||
|
|
7963
|
+
_simpleChanges['value']) {
|
|
7907
7964
|
const valueToUse = this.value() || this.initialValue();
|
|
7908
|
-
this.selectedOption.set(this.options().find(option => option.value === valueToUse) || null);
|
|
7965
|
+
this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
|
|
7909
7966
|
}
|
|
7910
7967
|
}
|
|
7911
7968
|
ngOnInit() {
|
|
7912
7969
|
// Prioriza o valor do model, mas mantém compatibilidade com initialValue
|
|
7913
7970
|
const valueToUse = this.value() || this.initialValue();
|
|
7914
|
-
const foundOption = this.options().find(option => option.value === valueToUse) || null;
|
|
7971
|
+
const foundOption = this.options().find((option) => option.value === valueToUse) || null;
|
|
7915
7972
|
this.selectedOption.set(foundOption);
|
|
7916
7973
|
// Se não havia valor no model mas havia initialValue, sincroniza o model
|
|
7917
7974
|
if (!this.value() && this.initialValue() && foundOption) {
|
|
@@ -7919,19 +7976,28 @@ class TcRevDropdownComponent {
|
|
|
7919
7976
|
}
|
|
7920
7977
|
// Escuta mudanças no model e atualiza a opção selecionada
|
|
7921
7978
|
this.value.subscribe((newValue) => {
|
|
7922
|
-
const option = this.options().find(opt => opt.value === newValue) || null;
|
|
7979
|
+
const option = this.options().find((opt) => opt.value === newValue) || null;
|
|
7923
7980
|
if (this.selectedOption() !== option) {
|
|
7924
7981
|
this.selectedOption.set(option);
|
|
7925
7982
|
}
|
|
7926
7983
|
});
|
|
7927
7984
|
}
|
|
7928
7985
|
toggleDropdown() {
|
|
7986
|
+
//Cria lódiga para dropdown no device
|
|
7987
|
+
if (this.isMobile()) {
|
|
7988
|
+
this._deviceService.openDropdownDevice(this.menuTemplate);
|
|
7989
|
+
return;
|
|
7990
|
+
}
|
|
7929
7991
|
this.isOpen = !this.isOpen;
|
|
7930
7992
|
}
|
|
7931
7993
|
selectOption(option) {
|
|
7932
7994
|
this.selectedOption.set(option);
|
|
7933
7995
|
this.value.set(option.value); // Atualiza o model com two-way binding
|
|
7934
7996
|
this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
|
|
7997
|
+
if (this.isMobile()) {
|
|
7998
|
+
this._deviceService.closeDropdownDevice();
|
|
7999
|
+
return;
|
|
8000
|
+
}
|
|
7935
8001
|
this.isOpen = false; // Fecha o dropdown
|
|
7936
8002
|
}
|
|
7937
8003
|
/**
|
|
@@ -7963,7 +8029,7 @@ class TcRevDropdownComponent {
|
|
|
7963
8029
|
return isTextEllipsed(text, availableWidth);
|
|
7964
8030
|
}
|
|
7965
8031
|
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
|
|
8032
|
+
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 <h2 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">{{ label() }}</h2>\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"] }] }); }
|
|
7967
8033
|
}
|
|
7968
8034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
|
|
7969
8035
|
type: Component,
|
|
@@ -7971,9 +8037,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7971
8037
|
CommonModule,
|
|
7972
8038
|
FormsModule,
|
|
7973
8039
|
ReactiveFormsModule,
|
|
7974
|
-
TcRevTooltipDirective
|
|
7975
|
-
], 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
|
|
7976
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: {
|
|
8040
|
+
TcRevTooltipDirective,
|
|
8041
|
+
], 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 <h2 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">{{ label() }}</h2>\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"] }]
|
|
8042
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
|
|
8043
|
+
type: ViewChild,
|
|
8044
|
+
args: ['menuTemplate']
|
|
8045
|
+
}], onDocumentClick: [{
|
|
7977
8046
|
type: HostListener,
|
|
7978
8047
|
args: ['document:click', ['$event']]
|
|
7979
8048
|
}] } });
|