@dev-tcloud/tcloud-ui 5.3.6 → 5.3.8-beta
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 +149 -125
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_directives/tooltip/tooltip.directive.d.ts +0 -1
- package/lib/_services/view-port.service.d.ts +11 -0
- package/lib/revitalizacao/components/tc-rev-card/tc-rev-card.component.d.ts +3 -0
- package/lib/revitalizacao/components/tc-rev-card-accordion/tc-rev-card-accordion.component.d.ts +3 -0
- package/lib/tcloud-ui.config.d.ts +1 -0
- package/package.json +1 -1
- package/scss/tcloud-revitalizacao/components/_tc-rev-util.scss +0 -5
|
@@ -1,5 +1,5 @@
|
|
|
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, input, effect,
|
|
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, inject, 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';
|
|
@@ -4656,11 +4656,6 @@ class TCloudUiTooltipDirective {
|
|
|
4656
4656
|
if (tooltip) {
|
|
4657
4657
|
this.info_text = typeof tooltip === 'object' ? '' : tooltip;
|
|
4658
4658
|
if (this.tooltipVisible && this.tooltipElement) {
|
|
4659
|
-
// Se não há texto válido, remove o tooltip
|
|
4660
|
-
if (!this.isValidTooltipText(this.info_text)) {
|
|
4661
|
-
this.removeTooltip();
|
|
4662
|
-
return;
|
|
4663
|
-
}
|
|
4664
4659
|
// Atualiza o conteúdo do tooltip diretamente
|
|
4665
4660
|
this.tooltipElement.innerHTML = this.info_text;
|
|
4666
4661
|
// Reaplica a posição calculada anteriormente para manter a centralização
|
|
@@ -4684,7 +4679,7 @@ class TCloudUiTooltipDirective {
|
|
|
4684
4679
|
this._direction = 'top';
|
|
4685
4680
|
}
|
|
4686
4681
|
onDocumentClick(event) {
|
|
4687
|
-
if (this.tooltipMode === 'click' && this.tooltipVisible && this.
|
|
4682
|
+
if (this.tooltipMode === 'click' && this.tooltipVisible && this.info_text) {
|
|
4688
4683
|
const clickedInside = this.el.nativeElement.contains(event.target) || (this.tooltipElement?.contains(event.target));
|
|
4689
4684
|
if (!clickedInside) {
|
|
4690
4685
|
this.removeTooltip();
|
|
@@ -4692,7 +4687,7 @@ class TCloudUiTooltipDirective {
|
|
|
4692
4687
|
}
|
|
4693
4688
|
}
|
|
4694
4689
|
onMouseOver(event) {
|
|
4695
|
-
if (this.tooltipMode === 'hover' && !this.tooltipVisible && this.
|
|
4690
|
+
if (this.tooltipMode === 'hover' && !this.tooltipVisible && this.info_text) {
|
|
4696
4691
|
this.createTooltip(event);
|
|
4697
4692
|
this.tooltipVisible = true;
|
|
4698
4693
|
}
|
|
@@ -4710,15 +4705,12 @@ class TCloudUiTooltipDirective {
|
|
|
4710
4705
|
if (this.tooltipVisible) {
|
|
4711
4706
|
this.removeTooltip();
|
|
4712
4707
|
}
|
|
4713
|
-
else
|
|
4708
|
+
else {
|
|
4714
4709
|
this.createTooltip(event);
|
|
4715
4710
|
}
|
|
4716
4711
|
this.tooltipVisible = !this.tooltipVisible;
|
|
4717
4712
|
}
|
|
4718
4713
|
}
|
|
4719
|
-
isValidTooltipText(text) {
|
|
4720
|
-
return !!(text && text.trim().length > 0);
|
|
4721
|
-
}
|
|
4722
4714
|
createTooltip(event) {
|
|
4723
4715
|
const scrollTop = window?.scrollY || window?.pageYOffset;
|
|
4724
4716
|
const tooltip = this.renderer.createElement('div');
|
|
@@ -6818,6 +6810,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6818
6810
|
args: ['ThemeService']
|
|
6819
6811
|
}] }] });
|
|
6820
6812
|
|
|
6813
|
+
class TCloudUiViewportService {
|
|
6814
|
+
constructor() {
|
|
6815
|
+
// Largura atual da viewport
|
|
6816
|
+
this.widthScreen = signal(window.innerWidth);
|
|
6817
|
+
// Breakpoints principais
|
|
6818
|
+
this.DESKTOP_MIN = 480;
|
|
6819
|
+
/** largura atual */
|
|
6820
|
+
this.width = computed(() => this.widthScreen());
|
|
6821
|
+
this.isDesktop = computed(() => this.width() > this.DESKTOP_MIN);
|
|
6822
|
+
window.addEventListener('resize', () => {
|
|
6823
|
+
this.widthScreen.set(window.innerWidth);
|
|
6824
|
+
});
|
|
6825
|
+
}
|
|
6826
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6827
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiViewportService, providedIn: 'root' }); }
|
|
6828
|
+
}
|
|
6829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiViewportService, decorators: [{
|
|
6830
|
+
type: Injectable,
|
|
6831
|
+
args: [{
|
|
6832
|
+
providedIn: 'root',
|
|
6833
|
+
}]
|
|
6834
|
+
}], ctorParameters: () => [] });
|
|
6835
|
+
|
|
6821
6836
|
class TCloudUiModule {
|
|
6822
6837
|
static forRoot(config) {
|
|
6823
6838
|
return {
|
|
@@ -6825,7 +6840,8 @@ class TCloudUiModule {
|
|
|
6825
6840
|
providers: [
|
|
6826
6841
|
{ provide: 'TCloudUiConfig', useValue: config.data },
|
|
6827
6842
|
{ provide: 'UserService', useExisting: config?.services?.userService },
|
|
6828
|
-
{ provide: 'ThemeService', useExisting: config?.services?.themeService }
|
|
6843
|
+
{ provide: 'ThemeService', useExisting: config?.services?.themeService },
|
|
6844
|
+
{ provide: 'Viewport', useExisting: config?.services?.viewportService }
|
|
6829
6845
|
]
|
|
6830
6846
|
};
|
|
6831
6847
|
}
|
|
@@ -6891,7 +6907,8 @@ class TCloudUiModule {
|
|
|
6891
6907
|
TCloudUiLoadingTransitionsService,
|
|
6892
6908
|
TCloudUiSearchInObjectService,
|
|
6893
6909
|
TCloudUiCheckAccessService,
|
|
6894
|
-
TCloudUiThemeService
|
|
6910
|
+
TCloudUiThemeService,
|
|
6911
|
+
TCloudUiViewportService
|
|
6895
6912
|
], imports: [TCloudUiModalModule,
|
|
6896
6913
|
TCloudUiTabMenuModule,
|
|
6897
6914
|
TCloudUiLinhaLogoModule,
|
|
@@ -7019,7 +7036,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7019
7036
|
TCloudUiLoadingTransitionsService,
|
|
7020
7037
|
TCloudUiSearchInObjectService,
|
|
7021
7038
|
TCloudUiCheckAccessService,
|
|
7022
|
-
TCloudUiThemeService
|
|
7039
|
+
TCloudUiThemeService,
|
|
7040
|
+
TCloudUiViewportService
|
|
7023
7041
|
]
|
|
7024
7042
|
}]
|
|
7025
7043
|
}] });
|
|
@@ -7190,15 +7208,16 @@ class TcRevCardTitleComponent {
|
|
|
7190
7208
|
this.title = input.required();
|
|
7191
7209
|
}
|
|
7192
7210
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevCardTitleComponent, isStandalone: true, selector: "tc-rev-card-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-card-title c-neutral-700\">\n <span class=\"tc-rev-card-title__icon
|
|
7211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevCardTitleComponent, isStandalone: true, selector: "tc-rev-card-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-card-title c-neutral-700\">\n <span class=\"tc-rev-card-title__icon f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n\n <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32)}.tc-rev-card-title__text{font-size:var(--f-h3)}}\n"] }); }
|
|
7194
7212
|
}
|
|
7195
7213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardTitleComponent, decorators: [{
|
|
7196
7214
|
type: Component,
|
|
7197
|
-
args: [{ selector: 'tc-rev-card-title', imports: [], template: "<div class=\"tc-rev-card-title c-neutral-700\">\n <span class=\"tc-rev-card-title__icon
|
|
7215
|
+
args: [{ selector: 'tc-rev-card-title', imports: [], template: "<div class=\"tc-rev-card-title c-neutral-700\">\n <span class=\"tc-rev-card-title__icon f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n\n <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32)}.tc-rev-card-title__text{font-size:var(--f-h3)}}\n"] }]
|
|
7198
7216
|
}] });
|
|
7199
7217
|
|
|
7200
7218
|
class TcRevCardAccordionComponent {
|
|
7201
7219
|
constructor() {
|
|
7220
|
+
this._viewPort = inject(TCloudUiViewportService);
|
|
7202
7221
|
this.toggle = output();
|
|
7203
7222
|
this.title = input('');
|
|
7204
7223
|
this.iconClass = input('fa-light fa-hard-drive');
|
|
@@ -7206,28 +7225,33 @@ class TcRevCardAccordionComponent {
|
|
|
7206
7225
|
this.showLessText = input('Exibir menos');
|
|
7207
7226
|
this.badge = input(null);
|
|
7208
7227
|
this.isOpen = model();
|
|
7228
|
+
this.isDesktop = this._viewPort.isDesktop;
|
|
7209
7229
|
}
|
|
7210
7230
|
toggleAccordion() {
|
|
7211
7231
|
this.isOpen.update(current => !current);
|
|
7212
7232
|
this.toggle.emit(this.isOpen());
|
|
7213
7233
|
}
|
|
7214
7234
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7215
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
7235
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevCardAccordionComponent, isStandalone: true, selector: "tc-rev-card-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, showMoreText: { classPropertyName: "showMoreText", publicName: "showMoreText", isSignal: true, isRequired: false, transformFunction: null }, showLessText: { classPropertyName: "showLessText", publicName: "showLessText", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", isOpen: "isOpenChange" }, ngImport: i0, template: "<div class=\"tc-rev-card-accordion tc-rev-card bg-c-neutral-50 pad-16 bor-xs bor-rad-16\" [class.is-open]=\"isOpen()\">\n <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n <i [class]=\"iconClass()\" icon></i>\n\n <div\n *ngIf=\"badge()\"\n class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs mar-l-8\"\n [class.mar-l-none]=\"!isDesktop()\"\n [class.mar-l-8]=\"isDesktop()\"\n [ngClass]=\"badge()?.class\">\n {{ badge()?.text }}\n </div>\n\n @if(isDesktop()){\n <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n {{ isOpen() ? showLessText() : showMoreText() }}\n <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n </button>\n }\n\n @if(!isDesktop()){\n <button tcRevButton=\"link\" color=\"dark\" size=\"sm\" (click)=\"toggleAccordion()\">\n <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n </button>\n }\n\n </tc-rev-card-title>\n <ng-content *ngIf=\"isOpen()\"></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-accordion{border-color:var(--c-neutral-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TcRevCardTitleComponent, selector: "tc-rev-card-title", inputs: ["title"] }, { kind: "directive", type: TcRevButtonDirective, selector: "button[tcRevButton]", inputs: ["color", "size", "fullWidth", "tcRevButton"] }] }); }
|
|
7216
7236
|
}
|
|
7217
7237
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardAccordionComponent, decorators: [{
|
|
7218
7238
|
type: Component,
|
|
7219
|
-
args: [{ selector: 'tc-rev-card-accordion', imports: [CommonModule, TcRevCardTitleComponent, TcRevButtonDirective], template: "<div class=\"tc-rev-card-accordion tc-rev-card bg-c-neutral-50 pad-16 bor-xs bor-rad-16\">\n <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n <i [class]=\"iconClass()\" icon></i>\n\n <div\n *ngIf=\"badge()\"\n class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs mar-l-8\"\n [ngClass]=\"badge()?.class\">\n {{ badge()?.text }}\n </div>\n\n <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n
|
|
7239
|
+
args: [{ selector: 'tc-rev-card-accordion', imports: [CommonModule, TcRevCardTitleComponent, TcRevButtonDirective], template: "<div class=\"tc-rev-card-accordion tc-rev-card bg-c-neutral-50 pad-16 bor-xs bor-rad-16\" [class.is-open]=\"isOpen()\">\n <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n <i [class]=\"iconClass()\" icon></i>\n\n <div\n *ngIf=\"badge()\"\n class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs mar-l-8\"\n [class.mar-l-none]=\"!isDesktop()\"\n [class.mar-l-8]=\"isDesktop()\"\n [ngClass]=\"badge()?.class\">\n {{ badge()?.text }}\n </div>\n\n @if(isDesktop()){\n <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n {{ isOpen() ? showLessText() : showMoreText() }}\n <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n </button>\n }\n\n @if(!isDesktop()){\n <button tcRevButton=\"link\" color=\"dark\" size=\"sm\" (click)=\"toggleAccordion()\">\n <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n </button>\n }\n\n </tc-rev-card-title>\n <ng-content *ngIf=\"isOpen()\"></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-accordion{border-color:var(--c-neutral-400)}\n"] }]
|
|
7220
7240
|
}] });
|
|
7221
7241
|
|
|
7222
7242
|
class TcRevCardComponent {
|
|
7243
|
+
constructor() {
|
|
7244
|
+
this._viewPort = inject(TCloudUiViewportService);
|
|
7245
|
+
this.isDesktop = this._viewPort.isDesktop;
|
|
7246
|
+
}
|
|
7223
7247
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TcRevCardComponent, isStandalone: true, selector: "tc-rev-card", ngImport: i0, template: "<div class=\"tc-rev-card bg-c-neutral-50 pad-16 bor-rad-16
|
|
7248
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TcRevCardComponent, isStandalone: true, selector: "tc-rev-card", ngImport: i0, template: "<div class=\"tc-rev-card bg-c-neutral-50 pad-16 bor-rad-16\"\n[class.shadow-sm]=\"!isDesktop()\"\n[class.shadow-md]=\"isDesktop()\"\n>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
7225
7249
|
}
|
|
7226
7250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardComponent, decorators: [{
|
|
7227
7251
|
type: Component,
|
|
7228
7252
|
args: [{ selector: 'tc-rev-card', imports: [
|
|
7229
7253
|
CommonModule,
|
|
7230
|
-
], template: "<div class=\"tc-rev-card bg-c-neutral-50 pad-16 bor-rad-16
|
|
7254
|
+
], template: "<div class=\"tc-rev-card bg-c-neutral-50 pad-16 bor-rad-16\"\n[class.shadow-sm]=\"!isDesktop()\"\n[class.shadow-md]=\"isDesktop()\"\n>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
|
|
7231
7255
|
}] });
|
|
7232
7256
|
|
|
7233
7257
|
class TcRevCheckboxDirective {
|
|
@@ -7734,6 +7758,104 @@ function isTextEllipsed(text, containerWidth) {
|
|
|
7734
7758
|
// }
|
|
7735
7759
|
// }
|
|
7736
7760
|
|
|
7761
|
+
class TcRevTooltipDirective {
|
|
7762
|
+
constructor(_el, _renderer, _vcr) {
|
|
7763
|
+
this._el = _el;
|
|
7764
|
+
this._renderer = _renderer;
|
|
7765
|
+
this._vcr = _vcr;
|
|
7766
|
+
this.tcRevTooltip = input('');
|
|
7767
|
+
this.position = input('top');
|
|
7768
|
+
this.tooltipElement = null;
|
|
7769
|
+
}
|
|
7770
|
+
onMouseEnter() {
|
|
7771
|
+
const tooltipText = this.tcRevTooltip();
|
|
7772
|
+
if (this.isValidTooltipText(tooltipText)) {
|
|
7773
|
+
this.showTooltip(tooltipText);
|
|
7774
|
+
}
|
|
7775
|
+
}
|
|
7776
|
+
onMouseLeave() {
|
|
7777
|
+
this.hideTooltip();
|
|
7778
|
+
}
|
|
7779
|
+
isValidTooltipText(text) {
|
|
7780
|
+
return text && text.trim().length > 0;
|
|
7781
|
+
}
|
|
7782
|
+
showTooltip(text) {
|
|
7783
|
+
if (this.tooltipElement) {
|
|
7784
|
+
this.hideTooltip();
|
|
7785
|
+
}
|
|
7786
|
+
// Create tooltip element
|
|
7787
|
+
this.tooltipElement = this._renderer.createElement('div');
|
|
7788
|
+
// Add text content
|
|
7789
|
+
const textNode = this._renderer.createText(text);
|
|
7790
|
+
this._renderer.appendChild(this.tooltipElement, textNode);
|
|
7791
|
+
// Add CSS classes
|
|
7792
|
+
this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip');
|
|
7793
|
+
this._renderer.addClass(this.tooltipElement, `tc-rev-tooltip--${this.position()}`);
|
|
7794
|
+
// Set initial styles
|
|
7795
|
+
this._renderer.setStyle(this.tooltipElement, 'position', 'absolute');
|
|
7796
|
+
this._renderer.setStyle(this.tooltipElement, 'z-index', '9999');
|
|
7797
|
+
this._renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
|
|
7798
|
+
// this._renderer.setStyle(this.tooltipElement, 'opacity', '0');
|
|
7799
|
+
// Append to body
|
|
7800
|
+
this._renderer.appendChild(document.body, this.tooltipElement);
|
|
7801
|
+
// Position tooltip
|
|
7802
|
+
this.positionTooltip();
|
|
7803
|
+
// Show tooltip with animation
|
|
7804
|
+
this._renderer.setStyle(this.tooltipElement, 'visibility', 'visible');
|
|
7805
|
+
this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip--visible');
|
|
7806
|
+
}
|
|
7807
|
+
hideTooltip() {
|
|
7808
|
+
if (this.tooltipElement) {
|
|
7809
|
+
this._renderer.removeChild(document.body, this.tooltipElement);
|
|
7810
|
+
this.tooltipElement = null;
|
|
7811
|
+
}
|
|
7812
|
+
}
|
|
7813
|
+
positionTooltip() {
|
|
7814
|
+
if (!this.tooltipElement)
|
|
7815
|
+
return;
|
|
7816
|
+
const hostRect = this._el.nativeElement.getBoundingClientRect();
|
|
7817
|
+
const tooltipRect = this.tooltipElement.getBoundingClientRect();
|
|
7818
|
+
const position = this.position();
|
|
7819
|
+
let top = 0;
|
|
7820
|
+
let left = 0;
|
|
7821
|
+
switch (position) {
|
|
7822
|
+
case 'top':
|
|
7823
|
+
top = hostRect.top + window.scrollY - tooltipRect.height - 8;
|
|
7824
|
+
left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
|
|
7825
|
+
break;
|
|
7826
|
+
case 'bottom':
|
|
7827
|
+
top = hostRect.bottom + window.scrollY + 8;
|
|
7828
|
+
left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
|
|
7829
|
+
break;
|
|
7830
|
+
case 'left':
|
|
7831
|
+
top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
|
|
7832
|
+
left = hostRect.left + window.scrollX - tooltipRect.width - 8;
|
|
7833
|
+
break;
|
|
7834
|
+
case 'right':
|
|
7835
|
+
top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
|
|
7836
|
+
left = hostRect.right + window.scrollX + 8;
|
|
7837
|
+
break;
|
|
7838
|
+
}
|
|
7839
|
+
this._renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
|
|
7840
|
+
this._renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
|
|
7841
|
+
}
|
|
7842
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7843
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TcRevTooltipDirective, isStandalone: true, selector: "[tcRevTooltip]", inputs: { tcRevTooltip: { classPropertyName: "tcRevTooltip", publicName: "tcRevTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
|
|
7844
|
+
}
|
|
7845
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTooltipDirective, decorators: [{
|
|
7846
|
+
type: Directive,
|
|
7847
|
+
args: [{
|
|
7848
|
+
selector: '[tcRevTooltip]',
|
|
7849
|
+
standalone: true
|
|
7850
|
+
}]
|
|
7851
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { onMouseEnter: [{
|
|
7852
|
+
type: HostListener,
|
|
7853
|
+
args: ['mouseenter']
|
|
7854
|
+
}], onMouseLeave: [{
|
|
7855
|
+
type: HostListener,
|
|
7856
|
+
args: ['mouseleave']
|
|
7857
|
+
}] } });
|
|
7858
|
+
|
|
7737
7859
|
var DropdownSize;
|
|
7738
7860
|
(function (DropdownSize) {
|
|
7739
7861
|
DropdownSize["sm"] = "sm";
|
|
@@ -7822,7 +7944,7 @@ class TcRevDropdownComponent {
|
|
|
7822
7944
|
return isTextEllipsed(text, availableWidth);
|
|
7823
7945
|
}
|
|
7824
7946
|
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 }); }
|
|
7825
|
-
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 *ngIf=\"isOpen\" 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 [
|
|
7947
|
+
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 *ngIf=\"isOpen\" 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</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}\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"] }] }); }
|
|
7826
7948
|
}
|
|
7827
7949
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
|
|
7828
7950
|
type: Component,
|
|
@@ -7830,8 +7952,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7830
7952
|
CommonModule,
|
|
7831
7953
|
FormsModule,
|
|
7832
7954
|
ReactiveFormsModule,
|
|
7833
|
-
|
|
7834
|
-
], 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\" 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 [
|
|
7955
|
+
TcRevTooltipDirective
|
|
7956
|
+
], 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\" 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</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}\n"] }]
|
|
7835
7957
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
7836
7958
|
type: HostListener,
|
|
7837
7959
|
args: ['document:click', ['$event']]
|
|
@@ -8140,15 +8262,15 @@ class TcRevMultiInputComponent {
|
|
|
8140
8262
|
});
|
|
8141
8263
|
}
|
|
8142
8264
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevMultiInputComponent, isStandalone: true, selector: "tc-rev-multi-input", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: false, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, initialList: { classPropertyName: "initialList", publicName: "initialList", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", onChangeList: "onChangeList" }, viewQueries: [{ propertyName: "multiInputRef", first: true, predicate: ["multiInputRef "], descendants: true }], ngImport: i0, template: "<div class=\"tc-rev-multi-input\">\n\t<div class=\"tc-rev-multi-input__input-container\">\n\t\t<form\n [formGroup]=\"multiInputForm\"\n (ngSubmit)=\"addItem()\">\n\n <input\n #multiInputRef\n type=\"text\"\n class=\"tc-rev-input-control\"\n formControlName=\"multiInput\"\n />\n\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--primary-filled add-button\"\n type=\"submit\"\n [disabled]=\"multiInputForm.invalid || disabled()\">\n\t\t\t\tAdicionar\n\t\t\t</button>\n\t\t</form>\n\t</div>\n\n\t@if (description()) {\n <span class=\"description f-sm c-neutral-700 mar-t-4 mar-b-16 d-block\">\n {{ description() }}\n </span>\n\t}\n\n @if (itemsList().length > 0) {\n <div class=\"tc-rev-multi-input__added-list\">\n @for (item of itemsList(); track item; let i = $index) {\n <div class=\"list-item h-28 pad-x-8 f-md f-weight-500 bor-rad-4 bg-c-neutral-100\">\n <span\n class=\"c-primary-500 mar-r-4 list-item__text\"\n [
|
|
8265
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevMultiInputComponent, isStandalone: true, selector: "tc-rev-multi-input", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: false, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, initialList: { classPropertyName: "initialList", publicName: "initialList", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", onChangeList: "onChangeList" }, viewQueries: [{ propertyName: "multiInputRef", first: true, predicate: ["multiInputRef "], descendants: true }], ngImport: i0, template: "<div class=\"tc-rev-multi-input\">\n\t<div class=\"tc-rev-multi-input__input-container\">\n\t\t<form\n [formGroup]=\"multiInputForm\"\n (ngSubmit)=\"addItem()\">\n\n <input\n #multiInputRef\n type=\"text\"\n class=\"tc-rev-input-control\"\n formControlName=\"multiInput\"\n />\n\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--primary-filled add-button\"\n type=\"submit\"\n [disabled]=\"multiInputForm.invalid || disabled()\">\n\t\t\t\tAdicionar\n\t\t\t</button>\n\t\t</form>\n\t</div>\n\n\t@if (description()) {\n <span class=\"description f-sm c-neutral-700 mar-t-4 mar-b-16 d-block\">\n {{ description() }}\n </span>\n\t}\n\n @if (itemsList().length > 0) {\n <div class=\"tc-rev-multi-input__added-list\">\n @for (item of itemsList(); track item; let i = $index) {\n <div class=\"list-item h-28 pad-x-8 f-md f-weight-500 bor-rad-4 bg-c-neutral-100\">\n <span\n class=\"c-primary-500 mar-r-4 list-item__text\"\n [tcRevTooltip]=\"isEllipsed(item) ? item : ''\"\n position=\"top\">{{ item }}</span>\n\n <button class=\"h-24 w-24 d-inline-block cursor-pointer bg-c-transparent c-neutral-700 bor-none\" (click)=\"removeItem(i)\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.tc-rev-multi-input__input-container{height:var(--size-40);position:relative}.tc-rev-multi-input__input-container .tc-rev-input-control{height:var(--size-40);position:absolute;top:0;left:0;width:100%;z-index:1}.tc-rev-multi-input__input-container .add-button{display:block;height:var(--size-34);min-height:var(--size-34);max-height:var(--size-34);position:absolute;right:3px;top:3px;width:6.125rem;z-index:2}.tc-rev-multi-input__added-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tc-rev-multi-input__added-list .list-item{align-content:center;max-width:12.5rem;display:flex;align-items:center}.tc-rev-multi-input__added-list .list-item__text{flex:1;max-width:calc(100% - 1.75rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }] }); }
|
|
8144
8266
|
}
|
|
8145
8267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevMultiInputComponent, decorators: [{
|
|
8146
8268
|
type: Component,
|
|
8147
8269
|
args: [{ selector: 'tc-rev-multi-input', imports: [
|
|
8148
8270
|
CommonModule,
|
|
8149
8271
|
ReactiveFormsModule,
|
|
8150
|
-
|
|
8151
|
-
], template: "<div class=\"tc-rev-multi-input\">\n\t<div class=\"tc-rev-multi-input__input-container\">\n\t\t<form\n [formGroup]=\"multiInputForm\"\n (ngSubmit)=\"addItem()\">\n\n <input\n #multiInputRef\n type=\"text\"\n class=\"tc-rev-input-control\"\n formControlName=\"multiInput\"\n />\n\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--primary-filled add-button\"\n type=\"submit\"\n [disabled]=\"multiInputForm.invalid || disabled()\">\n\t\t\t\tAdicionar\n\t\t\t</button>\n\t\t</form>\n\t</div>\n\n\t@if (description()) {\n <span class=\"description f-sm c-neutral-700 mar-t-4 mar-b-16 d-block\">\n {{ description() }}\n </span>\n\t}\n\n @if (itemsList().length > 0) {\n <div class=\"tc-rev-multi-input__added-list\">\n @for (item of itemsList(); track item; let i = $index) {\n <div class=\"list-item h-28 pad-x-8 f-md f-weight-500 bor-rad-4 bg-c-neutral-100\">\n <span\n class=\"c-primary-500 mar-r-4 list-item__text\"\n [
|
|
8272
|
+
TcRevTooltipDirective
|
|
8273
|
+
], template: "<div class=\"tc-rev-multi-input\">\n\t<div class=\"tc-rev-multi-input__input-container\">\n\t\t<form\n [formGroup]=\"multiInputForm\"\n (ngSubmit)=\"addItem()\">\n\n <input\n #multiInputRef\n type=\"text\"\n class=\"tc-rev-input-control\"\n formControlName=\"multiInput\"\n />\n\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--primary-filled add-button\"\n type=\"submit\"\n [disabled]=\"multiInputForm.invalid || disabled()\">\n\t\t\t\tAdicionar\n\t\t\t</button>\n\t\t</form>\n\t</div>\n\n\t@if (description()) {\n <span class=\"description f-sm c-neutral-700 mar-t-4 mar-b-16 d-block\">\n {{ description() }}\n </span>\n\t}\n\n @if (itemsList().length > 0) {\n <div class=\"tc-rev-multi-input__added-list\">\n @for (item of itemsList(); track item; let i = $index) {\n <div class=\"list-item h-28 pad-x-8 f-md f-weight-500 bor-rad-4 bg-c-neutral-100\">\n <span\n class=\"c-primary-500 mar-r-4 list-item__text\"\n [tcRevTooltip]=\"isEllipsed(item) ? item : ''\"\n position=\"top\">{{ item }}</span>\n\n <button class=\"h-24 w-24 d-inline-block cursor-pointer bg-c-transparent c-neutral-700 bor-none\" (click)=\"removeItem(i)\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.tc-rev-multi-input__input-container{height:var(--size-40);position:relative}.tc-rev-multi-input__input-container .tc-rev-input-control{height:var(--size-40);position:absolute;top:0;left:0;width:100%;z-index:1}.tc-rev-multi-input__input-container .add-button{display:block;height:var(--size-34);min-height:var(--size-34);max-height:var(--size-34);position:absolute;right:3px;top:3px;width:6.125rem;z-index:2}.tc-rev-multi-input__added-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tc-rev-multi-input__added-list .list-item{align-content:center;max-width:12.5rem;display:flex;align-items:center}.tc-rev-multi-input__added-list .list-item__text{flex:1;max-width:calc(100% - 1.75rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
8152
8274
|
}], ctorParameters: () => [], propDecorators: { autoFocus: [{
|
|
8153
8275
|
type: Input
|
|
8154
8276
|
}], multiInputRef: [{
|
|
@@ -8534,104 +8656,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
8534
8656
|
args: [{ selector: 'tc-rev-toast', imports: [CommonModule], template: "<div class=\"tc-rev-toast c-neutral-700\">\n <div\n class=\"{{'tc-rev-toast__icon--' + this.type() + ' tc-rev-toast__icon f-size-24'}}\">\n <ng-content select=\"[icon]\"/>\n </div>\n\n <div class=\"{{'tc-rev-toast__content--' + this.type() + ' tc-rev-toast__content f-md'}}\" [class.full-width]=\"fullWidth()\">\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;padding:var(--size-16)}.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__content{align-items:center;border-radius:0 var(--bor-radius-8) var(--bor-radius-8) 0;display:flex;font-family:var(--f-family);padding:var(--size-16)}.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.full-width{flex-grow:1}\n"] }]
|
|
8535
8657
|
}] });
|
|
8536
8658
|
|
|
8537
|
-
class TcRevTooltipDirective {
|
|
8538
|
-
constructor(_el, _renderer, _vcr) {
|
|
8539
|
-
this._el = _el;
|
|
8540
|
-
this._renderer = _renderer;
|
|
8541
|
-
this._vcr = _vcr;
|
|
8542
|
-
this.tcRevTooltip = input('');
|
|
8543
|
-
this.position = input('top');
|
|
8544
|
-
this.tooltipElement = null;
|
|
8545
|
-
}
|
|
8546
|
-
onMouseEnter() {
|
|
8547
|
-
const tooltipText = this.tcRevTooltip();
|
|
8548
|
-
if (this.isValidTooltipText(tooltipText)) {
|
|
8549
|
-
this.showTooltip(tooltipText);
|
|
8550
|
-
}
|
|
8551
|
-
}
|
|
8552
|
-
onMouseLeave() {
|
|
8553
|
-
this.hideTooltip();
|
|
8554
|
-
}
|
|
8555
|
-
isValidTooltipText(text) {
|
|
8556
|
-
return text && text.trim().length > 0;
|
|
8557
|
-
}
|
|
8558
|
-
showTooltip(text) {
|
|
8559
|
-
if (this.tooltipElement) {
|
|
8560
|
-
this.hideTooltip();
|
|
8561
|
-
}
|
|
8562
|
-
// Create tooltip element
|
|
8563
|
-
this.tooltipElement = this._renderer.createElement('div');
|
|
8564
|
-
// Add text content
|
|
8565
|
-
const textNode = this._renderer.createText(text);
|
|
8566
|
-
this._renderer.appendChild(this.tooltipElement, textNode);
|
|
8567
|
-
// Add CSS classes
|
|
8568
|
-
this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip');
|
|
8569
|
-
this._renderer.addClass(this.tooltipElement, `tc-rev-tooltip--${this.position()}`);
|
|
8570
|
-
// Set initial styles
|
|
8571
|
-
this._renderer.setStyle(this.tooltipElement, 'position', 'absolute');
|
|
8572
|
-
this._renderer.setStyle(this.tooltipElement, 'z-index', '9999');
|
|
8573
|
-
this._renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
|
|
8574
|
-
// this._renderer.setStyle(this.tooltipElement, 'opacity', '0');
|
|
8575
|
-
// Append to body
|
|
8576
|
-
this._renderer.appendChild(document.body, this.tooltipElement);
|
|
8577
|
-
// Position tooltip
|
|
8578
|
-
this.positionTooltip();
|
|
8579
|
-
// Show tooltip with animation
|
|
8580
|
-
this._renderer.setStyle(this.tooltipElement, 'visibility', 'visible');
|
|
8581
|
-
this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip--visible');
|
|
8582
|
-
}
|
|
8583
|
-
hideTooltip() {
|
|
8584
|
-
if (this.tooltipElement) {
|
|
8585
|
-
this._renderer.removeChild(document.body, this.tooltipElement);
|
|
8586
|
-
this.tooltipElement = null;
|
|
8587
|
-
}
|
|
8588
|
-
}
|
|
8589
|
-
positionTooltip() {
|
|
8590
|
-
if (!this.tooltipElement)
|
|
8591
|
-
return;
|
|
8592
|
-
const hostRect = this._el.nativeElement.getBoundingClientRect();
|
|
8593
|
-
const tooltipRect = this.tooltipElement.getBoundingClientRect();
|
|
8594
|
-
const position = this.position();
|
|
8595
|
-
let top = 0;
|
|
8596
|
-
let left = 0;
|
|
8597
|
-
switch (position) {
|
|
8598
|
-
case 'top':
|
|
8599
|
-
top = hostRect.top + window.scrollY - tooltipRect.height - 8;
|
|
8600
|
-
left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
|
|
8601
|
-
break;
|
|
8602
|
-
case 'bottom':
|
|
8603
|
-
top = hostRect.bottom + window.scrollY + 8;
|
|
8604
|
-
left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
|
|
8605
|
-
break;
|
|
8606
|
-
case 'left':
|
|
8607
|
-
top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
|
|
8608
|
-
left = hostRect.left + window.scrollX - tooltipRect.width - 8;
|
|
8609
|
-
break;
|
|
8610
|
-
case 'right':
|
|
8611
|
-
top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
|
|
8612
|
-
left = hostRect.right + window.scrollX + 8;
|
|
8613
|
-
break;
|
|
8614
|
-
}
|
|
8615
|
-
this._renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
|
|
8616
|
-
this._renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
|
|
8617
|
-
}
|
|
8618
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8619
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TcRevTooltipDirective, isStandalone: true, selector: "[tcRevTooltip]", inputs: { tcRevTooltip: { classPropertyName: "tcRevTooltip", publicName: "tcRevTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
|
|
8620
|
-
}
|
|
8621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTooltipDirective, decorators: [{
|
|
8622
|
-
type: Directive,
|
|
8623
|
-
args: [{
|
|
8624
|
-
selector: '[tcRevTooltip]',
|
|
8625
|
-
standalone: true
|
|
8626
|
-
}]
|
|
8627
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { onMouseEnter: [{
|
|
8628
|
-
type: HostListener,
|
|
8629
|
-
args: ['mouseenter']
|
|
8630
|
-
}], onMouseLeave: [{
|
|
8631
|
-
type: HostListener,
|
|
8632
|
-
args: ['mouseleave']
|
|
8633
|
-
}] } });
|
|
8634
|
-
|
|
8635
8659
|
class TcRevSubNavbarItemComponent {
|
|
8636
8660
|
constructor() {
|
|
8637
8661
|
this.label = input.required();
|