@dev-tcloud/tcloud-ui 5.3.9-beta.2 → 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 +97 -27
- 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/lib/revitalizacao/components/tc-rev-toast/tc-rev-toast.component.d.ts +2 -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
|
}] } });
|
|
@@ -8504,7 +8573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
8504
8573
|
class TcRevSkeletonLoadingComponent {
|
|
8505
8574
|
constructor() {
|
|
8506
8575
|
/** Params of the loading skeleton accepts string with CSS units (px, rem, em) */
|
|
8507
|
-
this.width = input('
|
|
8576
|
+
this.width = input('10rem');
|
|
8508
8577
|
this.height = input('1.25rem');
|
|
8509
8578
|
this.borderRadius = input('0.3rem');
|
|
8510
8579
|
this.style = new TcRevSkeletonLoadingComponentStyle();
|
|
@@ -8689,13 +8758,14 @@ class TcRevToastComponent {
|
|
|
8689
8758
|
constructor() {
|
|
8690
8759
|
this.type = input('info');
|
|
8691
8760
|
this.fullWidth = input(false);
|
|
8761
|
+
this.size = input('md');
|
|
8692
8762
|
}
|
|
8693
8763
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8694
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", 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 } }, ngImport: i0, template: "<div class=\"tc-rev-toast c-neutral-700\">\n <div\n class=\"
|
|
8764
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", 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"] }] }); }
|
|
8695
8765
|
}
|
|
8696
8766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevToastComponent, decorators: [{
|
|
8697
8767
|
type: Component,
|
|
8698
|
-
args: [{ selector: 'tc-rev-toast', imports: [CommonModule], template: "<div class=\"tc-rev-toast c-neutral-700\">\n <div\n class=\"
|
|
8768
|
+
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"] }]
|
|
8699
8769
|
}] });
|
|
8700
8770
|
|
|
8701
8771
|
class TcRevSubNavbarItemComponent {
|