@dev-tcloud/tcloud-ui 5.3.4 → 5.3.5-beta.3
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 +15 -18
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_directives/tooltip/tooltip.directive.d.ts +0 -1
- package/lib/revitalizacao/components/tc-rev-tab-group/tc-rev-tab-group.component.d.ts +1 -0
- package/package.json +1 -1
- package/scss/tcloud-revitalizacao/components/_tc-rev-util.scss +5 -0
|
@@ -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');
|
|
@@ -8415,11 +8407,12 @@ class TcRevTabGroupComponent {
|
|
|
8415
8407
|
}
|
|
8416
8408
|
ngOnInit() {
|
|
8417
8409
|
this.checkCarouselOverflow();
|
|
8410
|
+
this.checkResponsiveMode();
|
|
8418
8411
|
}
|
|
8419
8412
|
checkCarouselOverflow() {
|
|
8420
8413
|
setTimeout(() => {
|
|
8421
8414
|
const el = this.tabGroupCarousel?.nativeElement;
|
|
8422
|
-
this.isCarouselOverflowed = !!el && el.scrollWidth > el.clientWidth;
|
|
8415
|
+
this.isCarouselOverflowed = !!el && el.scrollWidth > el.clientWidth && this.checkResponsiveMode(); // Verifica com checkResponsiveMode se é responsivo, caso seja, não irá mostrar as setas
|
|
8423
8416
|
});
|
|
8424
8417
|
}
|
|
8425
8418
|
scrollTabsCarousel(direction) {
|
|
@@ -8434,14 +8427,18 @@ class TcRevTabGroupComponent {
|
|
|
8434
8427
|
el.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
|
8435
8428
|
}
|
|
8436
8429
|
}
|
|
8430
|
+
checkResponsiveMode() {
|
|
8431
|
+
const bp = getComputedStyle(document.documentElement)
|
|
8432
|
+
.getPropertyValue('--breakpoint-mobile')
|
|
8433
|
+
.trim();
|
|
8434
|
+
return window.innerWidth > parseInt(bp);
|
|
8435
|
+
}
|
|
8437
8436
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8438
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TcRevTabGroupComponent, isStandalone: true, selector: "tc-rev-tab-group", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabGroupCarousel", first: true, predicate: ["tabGroupCarousel"], descendants: true }], ngImport: i0, template: "<div class=\"tc-rev-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"this.scrollTabsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n class=\"tc-rev-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"this.scrollTabsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"scrollProductsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n #productsCarousel\n class=\"products-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\">\n @for (productName of topologiesData.availableProductsNames(); track productName)\n {\n <button\n class=\"tc-rev-tab-item\"\n [class.active]=\"filter().product === productName\"\n (click)=\"handleChangeTopologiesByProduct(productName)\">\n {{ productName | topologyProduct }}\n </button>\n }\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"scrollProductsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div> -->", styles: ["
|
|
8437
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TcRevTabGroupComponent, isStandalone: true, selector: "tc-rev-tab-group", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabGroupCarousel", first: true, predicate: ["tabGroupCarousel"], descendants: true }], ngImport: i0, template: "<div class=\"tc-rev-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"this.scrollTabsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n class=\"tc-rev-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"this.scrollTabsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"scrollProductsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n #productsCarousel\n class=\"products-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\">\n @for (productName of topologiesData.availableProductsNames(); track productName)\n {\n <button\n class=\"tc-rev-tab-item\"\n [class.active]=\"filter().product === productName\"\n (click)=\"handleChangeTopologiesByProduct(productName)\">\n {{ productName | topologyProduct }}\n </button>\n }\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"scrollProductsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div> -->", styles: ["@charset \"UTF-8\";:host{display:block}.tc-rev-tab-group{position:relative;height:var(--size-40);width:100%}.tc-rev-tab-group .tc-rev-tab-group-carousel{display:flex;gap:var(--size-8);height:var(--size-40);left:0;margin:0;overflow:hidden;position:absolute;scroll-behavior:smooth;top:0;width:calc(100% - 6.25rem);z-index:1}.tc-rev-tab-group .tc-rev-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tc-rev-tab-group .tc-rev-tab-group-carousel.full-width{width:100%}.tc-rev-tab-group .carousel-arrow{background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;font-size:var(--f-size-14);font-weight:600;height:var(--size-40);line-height:var(--l-height-20);padding:0;text-wrap:nowrap;transition:all .2s ease;width:var(--size-40)}.tc-rev-tab-group .carousel-arrow:hover,.tc-rev-tab-group .carousel-arrow:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-group .carousel-arrow:active,.tc-rev-tab-group .carousel-arrow.selected,.tc-rev-tab-group .carousel-arrow.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:700}.tc-rev-tab-group .carousel-arrow:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400)}.tc-rev-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tc-rev-tab-group .carousel-arrow.right{position:absolute;right:0;z-index:1}@media(max-width:480px){:host .tc-rev-tab-group-carousel{width:100%!important;overflow-x:auto!important;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap}:host .tc-rev-tab-group-carousel::-webkit-scrollbar{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
8439
8438
|
}
|
|
8440
8439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTabGroupComponent, decorators: [{
|
|
8441
8440
|
type: Component,
|
|
8442
|
-
args: [{ selector: 'tc-rev-tab-group', imports: [
|
|
8443
|
-
CommonModule
|
|
8444
|
-
], template: "<div class=\"tc-rev-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"this.scrollTabsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n class=\"tc-rev-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"this.scrollTabsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"scrollProductsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n #productsCarousel\n class=\"products-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\">\n @for (productName of topologiesData.availableProductsNames(); track productName)\n {\n <button\n class=\"tc-rev-tab-item\"\n [class.active]=\"filter().product === productName\"\n (click)=\"handleChangeTopologiesByProduct(productName)\">\n {{ productName | topologyProduct }}\n </button>\n }\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"scrollProductsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div> -->", styles: [":host{display:block}.tc-rev-tab-group{position:relative;height:var(--size-40);width:100%}.tc-rev-tab-group .tc-rev-tab-group-carousel{display:flex;gap:var(--size-8);height:var(--size-40);left:0;margin:0;overflow:hidden;position:absolute;scroll-behavior:smooth;top:0;width:calc(100% - 6.25rem);z-index:1}.tc-rev-tab-group .tc-rev-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tc-rev-tab-group .carousel-arrow{background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;font-size:var(--f-size-14);font-weight:600;height:var(--size-40);line-height:var(--l-height-20);padding:0;text-wrap:nowrap;transition:all .2s ease;width:var(--size-40)}.tc-rev-tab-group .carousel-arrow:hover,.tc-rev-tab-group .carousel-arrow:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-group .carousel-arrow:active,.tc-rev-tab-group .carousel-arrow.selected,.tc-rev-tab-group .carousel-arrow.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:700}.tc-rev-tab-group .carousel-arrow:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400)}.tc-rev-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tc-rev-tab-group .carousel-arrow.right{position:absolute;right:0;z-index:1}\n"] }]
|
|
8441
|
+
args: [{ selector: 'tc-rev-tab-group', imports: [CommonModule], template: "<div class=\"tc-rev-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"this.scrollTabsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n class=\"tc-rev-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"this.scrollTabsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"scrollProductsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n #productsCarousel\n class=\"products-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\">\n @for (productName of topologiesData.availableProductsNames(); track productName)\n {\n <button\n class=\"tc-rev-tab-item\"\n [class.active]=\"filter().product === productName\"\n (click)=\"handleChangeTopologiesByProduct(productName)\">\n {{ productName | topologyProduct }}\n </button>\n }\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"scrollProductsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div> -->", styles: ["@charset \"UTF-8\";:host{display:block}.tc-rev-tab-group{position:relative;height:var(--size-40);width:100%}.tc-rev-tab-group .tc-rev-tab-group-carousel{display:flex;gap:var(--size-8);height:var(--size-40);left:0;margin:0;overflow:hidden;position:absolute;scroll-behavior:smooth;top:0;width:calc(100% - 6.25rem);z-index:1}.tc-rev-tab-group .tc-rev-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tc-rev-tab-group .tc-rev-tab-group-carousel.full-width{width:100%}.tc-rev-tab-group .carousel-arrow{background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;font-size:var(--f-size-14);font-weight:600;height:var(--size-40);line-height:var(--l-height-20);padding:0;text-wrap:nowrap;transition:all .2s ease;width:var(--size-40)}.tc-rev-tab-group .carousel-arrow:hover,.tc-rev-tab-group .carousel-arrow:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-group .carousel-arrow:active,.tc-rev-tab-group .carousel-arrow.selected,.tc-rev-tab-group .carousel-arrow.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:700}.tc-rev-tab-group .carousel-arrow:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400)}.tc-rev-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tc-rev-tab-group .carousel-arrow.right{position:absolute;right:0;z-index:1}@media(max-width:480px){:host .tc-rev-tab-group-carousel{width:100%!important;overflow-x:auto!important;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap}:host .tc-rev-tab-group-carousel::-webkit-scrollbar{display:none}}\n"] }]
|
|
8445
8442
|
}], propDecorators: { onResize: [{
|
|
8446
8443
|
type: HostListener,
|
|
8447
8444
|
args: ['window:resize']
|
|
@@ -8459,14 +8456,14 @@ class TcRevTabItemComponent {
|
|
|
8459
8456
|
this.fullWidth = input(false);
|
|
8460
8457
|
}
|
|
8461
8458
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevTabItemComponent, isStandalone: true, selector: "tc-rev-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<a\n *ngIf=\"this.url()\"\n class=\"tc-rev-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tc-rev-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
|
|
8459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevTabItemComponent, isStandalone: true, selector: "tc-rev-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<a\n *ngIf=\"this.url()\"\n class=\"tc-rev-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tc-rev-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}@media(max-width:480px){:host{display:contents}:host .tc-rev-tab-item{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
|
|
8463
8460
|
}
|
|
8464
8461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTabItemComponent, decorators: [{
|
|
8465
8462
|
type: Component,
|
|
8466
8463
|
args: [{ selector: 'tc-rev-tab-item', imports: [
|
|
8467
8464
|
CommonModule,
|
|
8468
8465
|
RouterModule
|
|
8469
|
-
], template: "<a\n *ngIf=\"this.url()\"\n class=\"tc-rev-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tc-rev-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}\n"] }]
|
|
8466
|
+
], template: "<a\n *ngIf=\"this.url()\"\n class=\"tc-rev-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tc-rev-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}@media(max-width:480px){:host{display:contents}:host .tc-rev-tab-item{width:100%}}\n"] }]
|
|
8470
8467
|
}] });
|
|
8471
8468
|
|
|
8472
8469
|
var TagColorsEnum;
|