@dev-tcloud/tcloud-ui 7.6.0 → 7.7.0
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.
|
@@ -51,11 +51,12 @@ export class ExampleComponent {}
|
|
|
51
51
|
| Nome | Tipo | Descrição | Valor Default |
|
|
52
52
|
| --------------- | -------------------------------------------- | ---------------------------------------- | ------------------------------------------ |
|
|
53
53
|
| scroll | boolean | Controla scroll horizontal do cabeçalho. | true |
|
|
54
|
+
| appearance | 'default'\|'filled'\|'segmented' | Define a aparência do cabeçalho. Use `filled` para barra preenchida e `segmented` para trilho arredondado. | 'default' |
|
|
54
55
|
| background | boolean | Aplica fundo padrão. | true |
|
|
55
56
|
| backgroundColor | '#FFFFFF'\|'#F1F1F1'\|'white'\|'transparent' | Cor de fundo quando `background=true`. | 'transparent' (ajustado para branco/cinza) |
|
|
56
57
|
| bottom_line | boolean | Exibe linha inferior. | false |
|
|
57
|
-
| tabOptionTextTone | 'default'\|'inverse' | Tom semântico do texto dos
|
|
58
|
-
| tabOptionActiveTextTone | 'default'\|'inverse' | Tom semântico do texto ativo dos
|
|
58
|
+
| tabOptionTextTone | 'default'\|'inverse' | Tom semântico do texto dos itens visuais do head (`default` escuro, `inverse` claro). | 'default' |
|
|
59
|
+
| tabOptionActiveTextTone | 'default'\|'inverse' | Tom semântico do texto ativo dos itens visuais do head (`default` claro, `inverse` escuro). | 'default' |
|
|
59
60
|
|
|
60
61
|
### `tcloud-ui-tab-title` / `tcloud-ui-tab-subtitle`
|
|
61
62
|
|
|
@@ -125,24 +126,47 @@ export class ExampleComponent {}
|
|
|
125
126
|
```html
|
|
126
127
|
<tcloud-ui-tab-menu [active]="'environment-details'" [full]="true">
|
|
127
128
|
<tcloud-ui-tab-head
|
|
129
|
+
appearance="filled"
|
|
128
130
|
[bottom_line]="false"
|
|
129
131
|
[background]="true"
|
|
130
132
|
tabOptionActiveTextTone="inverse">
|
|
131
|
-
<tcloud-ui-tab-
|
|
132
|
-
<tcloud-ui-tab-
|
|
133
|
-
<tcloud-ui-tab-
|
|
134
|
-
<tcloud-ui-tab-
|
|
135
|
-
<tcloud-ui-tab-
|
|
136
|
-
<tcloud-ui-tab-
|
|
137
|
-
<tcloud-ui-tab-
|
|
138
|
-
<tcloud-ui-tab-
|
|
139
|
-
<tcloud-ui-tab-
|
|
133
|
+
<tcloud-ui-tab-title tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-title>
|
|
134
|
+
<tcloud-ui-tab-title tab="monitoring">Monitoramento</tcloud-ui-tab-title>
|
|
135
|
+
<tcloud-ui-tab-title tab="log">Log</tcloud-ui-tab-title>
|
|
136
|
+
<tcloud-ui-tab-title tab="database">Banco de dados</tcloud-ui-tab-title>
|
|
137
|
+
<tcloud-ui-tab-title tab="executed-actions">Ações executadas</tcloud-ui-tab-title>
|
|
138
|
+
<tcloud-ui-tab-title tab="backup">Backup</tcloud-ui-tab-title>
|
|
139
|
+
<tcloud-ui-tab-title tab="infrastructure">Infraestrutura</tcloud-ui-tab-title>
|
|
140
|
+
<tcloud-ui-tab-title tab="security">Segurança</tcloud-ui-tab-title>
|
|
141
|
+
<tcloud-ui-tab-title tab="manage">Gerenciar</tcloud-ui-tab-title>
|
|
140
142
|
</tcloud-ui-tab-head>
|
|
141
143
|
|
|
142
144
|
<tcloud-ui-tab-content tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-content>
|
|
143
145
|
</tcloud-ui-tab-menu>
|
|
144
146
|
```
|
|
145
147
|
|
|
148
|
+
### Menu segmentado
|
|
149
|
+
|
|
150
|
+
Use `appearance="segmented"` para criar o modelo em trilho arredondado, com os itens distribuídos em largura igual e o item ativo destacado.
|
|
151
|
+
|
|
152
|
+
```html
|
|
153
|
+
<tcloud-ui-tab-menu [active]="'application'" [full]="true">
|
|
154
|
+
<tcloud-ui-tab-head
|
|
155
|
+
appearance="segmented"
|
|
156
|
+
[bottom_line]="false"
|
|
157
|
+
[background]="true"
|
|
158
|
+
tabOptionActiveTextTone="inverse">
|
|
159
|
+
<tcloud-ui-tab-title tab="application">Aplicação</tcloud-ui-tab-title>
|
|
160
|
+
<tcloud-ui-tab-title tab="vpns">VPNs</tcloud-ui-tab-title>
|
|
161
|
+
<tcloud-ui-tab-title tab="routes">Rotas</tcloud-ui-tab-title>
|
|
162
|
+
<tcloud-ui-tab-title tab="threat-locker">Threat Locker</tcloud-ui-tab-title>
|
|
163
|
+
<tcloud-ui-tab-title tab="database-access">Acessos de banco de dados</tcloud-ui-tab-title>
|
|
164
|
+
</tcloud-ui-tab-head>
|
|
165
|
+
|
|
166
|
+
<tcloud-ui-tab-content tab="application">Aplicação</tcloud-ui-tab-content>
|
|
167
|
+
</tcloud-ui-tab-menu>
|
|
168
|
+
```
|
|
169
|
+
|
|
146
170
|
### Com registro na URL
|
|
147
171
|
|
|
148
172
|
```html
|
|
@@ -156,4 +180,7 @@ export interface ITab {
|
|
|
156
180
|
id: string;
|
|
157
181
|
disabled: boolean;
|
|
158
182
|
}
|
|
183
|
+
|
|
184
|
+
export type TabOptionTextTone = 'default' | 'inverse';
|
|
185
|
+
export type TabHeadAppearance = 'default' | 'filled' | 'segmented';
|
|
159
186
|
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, EventEmitter, Input, Output, InjectionToken, Optional, Inject, inject, signal, Pipe, forwardRef, ViewChild, input, effect, Directive, ViewEncapsulation, HostListener, SkipSelf, ChangeDetectionStrategy, ChangeDetectorRef, computed, ApplicationRef, output, model, numberAttribute, booleanAttribute,
|
|
2
|
+
import { Injectable, Component, EventEmitter, Input, Output, InjectionToken, Optional, Inject, inject, signal, Pipe, forwardRef, ViewChild, input, effect, Directive, ViewEncapsulation, HostListener, HostBinding, SkipSelf, ChangeDetectionStrategy, ChangeDetectorRef, computed, ApplicationRef, output, model, numberAttribute, booleanAttribute, ContentChildren, viewChild, EnvironmentInjector, createComponent, ViewContainerRef, NgModule, makeEnvironmentProviders, DOCUMENT } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { DatePipe, CommonModule } from '@angular/common';
|
|
5
5
|
import { Subject, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, map } from 'rxjs';
|
|
@@ -4485,6 +4485,9 @@ class TabMenuService {
|
|
|
4485
4485
|
this._tabOptionActiveTextTone = 'default';
|
|
4486
4486
|
this.tabOptionActiveTextToneSubject = new Subject();
|
|
4487
4487
|
this.tabOptionActiveTextToneState$ = this.tabOptionActiveTextToneSubject.asObservable();
|
|
4488
|
+
this._tabHeadAppearance = 'default';
|
|
4489
|
+
this.tabHeadAppearanceSubject = new Subject();
|
|
4490
|
+
this.tabHeadAppearanceState$ = this.tabHeadAppearanceSubject.asObservable();
|
|
4488
4491
|
}
|
|
4489
4492
|
setTabScroll(scroll) {
|
|
4490
4493
|
this._scroll = scroll;
|
|
@@ -4528,6 +4531,13 @@ class TabMenuService {
|
|
|
4528
4531
|
getTabOptionActiveTextTone() {
|
|
4529
4532
|
return this._tabOptionActiveTextTone;
|
|
4530
4533
|
}
|
|
4534
|
+
setTabHeadAppearance(appearance) {
|
|
4535
|
+
this._tabHeadAppearance = appearance;
|
|
4536
|
+
this.tabHeadAppearanceSubject.next(appearance);
|
|
4537
|
+
}
|
|
4538
|
+
getTabHeadAppearance() {
|
|
4539
|
+
return this._tabHeadAppearance;
|
|
4540
|
+
}
|
|
4531
4541
|
setTabState(tab, registerInUrl) {
|
|
4532
4542
|
this._tab = tab;
|
|
4533
4543
|
if (registerInUrl) {
|
|
@@ -4674,6 +4684,7 @@ class TCloudUiTabHeadComponent {
|
|
|
4674
4684
|
this._scroll = true;
|
|
4675
4685
|
this.ID = '';
|
|
4676
4686
|
this.background = true;
|
|
4687
|
+
this.appearance = 'default';
|
|
4677
4688
|
// Aceita 'white' | 'transparent' (ou um CSS color); resolvido para token dark-aware no ngOnInit
|
|
4678
4689
|
this.backgroundColor = 'transparent';
|
|
4679
4690
|
this._tabOptionTextTone = 'default';
|
|
@@ -4683,7 +4694,11 @@ class TCloudUiTabHeadComponent {
|
|
|
4683
4694
|
ngOnInit() {
|
|
4684
4695
|
this.tabMenuService.setTabOptionTextTone(this.tabOptionTextTone);
|
|
4685
4696
|
this.tabMenuService.setTabOptionActiveTextTone(this.tabOptionActiveTextTone);
|
|
4686
|
-
|
|
4697
|
+
this.tabMenuService.setTabHeadAppearance(this.appearance);
|
|
4698
|
+
if (this.appearance === 'filled' || this.appearance === 'segmented') {
|
|
4699
|
+
this.backgroundColor = 'var(--c-neutral-100)';
|
|
4700
|
+
}
|
|
4701
|
+
else if (this.background) {
|
|
4687
4702
|
if (this.backgroundColor === 'white') {
|
|
4688
4703
|
this.backgroundColor = 'var(--c-neutral-50)';
|
|
4689
4704
|
}
|
|
@@ -4725,15 +4740,17 @@ class TCloudUiTabHeadComponent {
|
|
|
4725
4740
|
this.scrollSuave(ccs_s, action == 'next' ? wid + ccs_s : ccs_s - wid, 0, ccs);
|
|
4726
4741
|
}
|
|
4727
4742
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4728
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiTabHeadComponent, isStandalone: true, selector: "tcloud-ui-tab-head", inputs: { scroll: "scroll", background: "background", backgroundColor: "backgroundColor", tabOptionTextTone: "tabOptionTextTone", tabOptionActiveTextTone: "tabOptionActiveTextTone", bottom_line: "bottom_line" }, ngImport: i0, template: "\n\n<table class=\"tcloud-ui-tab-head area-navigation\">\n <tr>\n @if (scroll) {\n <td>\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\n </td>\n }\n\n <td>\n\n </td>\n\n @if (scroll) {\n <td>\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\n </td>\n }\n </tr>\n</table>\n\n<div
|
|
4743
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiTabHeadComponent, isStandalone: true, selector: "tcloud-ui-tab-head", inputs: { scroll: "scroll", background: "background", appearance: "appearance", backgroundColor: "backgroundColor", tabOptionTextTone: "tabOptionTextTone", tabOptionActiveTextTone: "tabOptionActiveTextTone", bottom_line: "bottom_line" }, ngImport: i0, template: "\n\n<table class=\"tcloud-ui-tab-head area-navigation\">\n <tr>\n @if (scroll) {\n <td>\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\n </td>\n }\n\n <td>\n\n </td>\n\n @if (scroll) {\n <td>\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\n </td>\n }\n </tr>\n</table>\n\n<div\n class=\"tc-menu {{ ID }}\"\n [attr.style]=\"'background: ' + backgroundColor + ';'\"\n [class.tab-full]=\"!scroll\"\n [class.tab-head-filled]=\"appearance === 'filled'\"\n [class.tab-head-segmented]=\"appearance === 'segmented'\"\n [class.tab-subtitle-line-bottom]=\"bottom_line\">\n <ng-content></ng-content>\n</div>\n\n@if (bottom_line) {\n <div class=\"hr-border-bottom\"></div>\n}\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--c-primary-500);cursor:pointer;position:relative;top:20px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--c-primary-500);cursor:pointer;position:relative;top:20px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}.tab-head-filled{min-height:70px}.tab-head-segmented{border:var(--bor-size-1) solid var(--c-neutral-300);border-radius:var(--bor-radius-16);gap:var(--size-4);min-height:var(--size-64);padding:var(--size-6)}.hr-border-bottom{border-bottom:none;border-left:none;border-right:none;margin-top:0!important;border-top:1px solid var(--c-neutral-300);margin-bottom:0}@media(max-width:1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}.tab-head-segmented{min-height:var(--size-60)}}.tab-full{margin-left:0!important;margin-right:0!important}\n"] }); }
|
|
4729
4744
|
}
|
|
4730
4745
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
|
|
4731
4746
|
type: Component,
|
|
4732
|
-
args: [{ selector: 'tcloud-ui-tab-head', standalone: true, imports: [], template: "\n\n<table class=\"tcloud-ui-tab-head area-navigation\">\n <tr>\n @if (scroll) {\n <td>\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\n </td>\n }\n\n <td>\n\n </td>\n\n @if (scroll) {\n <td>\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\n </td>\n }\n </tr>\n</table>\n\n<div
|
|
4747
|
+
args: [{ selector: 'tcloud-ui-tab-head', standalone: true, imports: [], template: "\n\n<table class=\"tcloud-ui-tab-head area-navigation\">\n <tr>\n @if (scroll) {\n <td>\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\n </td>\n }\n\n <td>\n\n </td>\n\n @if (scroll) {\n <td>\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\n </td>\n }\n </tr>\n</table>\n\n<div\n class=\"tc-menu {{ ID }}\"\n [attr.style]=\"'background: ' + backgroundColor + ';'\"\n [class.tab-full]=\"!scroll\"\n [class.tab-head-filled]=\"appearance === 'filled'\"\n [class.tab-head-segmented]=\"appearance === 'segmented'\"\n [class.tab-subtitle-line-bottom]=\"bottom_line\">\n <ng-content></ng-content>\n</div>\n\n@if (bottom_line) {\n <div class=\"hr-border-bottom\"></div>\n}\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--c-primary-500);cursor:pointer;position:relative;top:20px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--c-primary-500);cursor:pointer;position:relative;top:20px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}.tab-head-filled{min-height:70px}.tab-head-segmented{border:var(--bor-size-1) solid var(--c-neutral-300);border-radius:var(--bor-radius-16);gap:var(--size-4);min-height:var(--size-64);padding:var(--size-6)}.hr-border-bottom{border-bottom:none;border-left:none;border-right:none;margin-top:0!important;border-top:1px solid var(--c-neutral-300);margin-bottom:0}@media(max-width:1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}.tab-head-segmented{min-height:var(--size-60)}}.tab-full{margin-left:0!important;margin-right:0!important}\n"] }]
|
|
4733
4748
|
}], ctorParameters: () => [{ type: TabMenuService }], propDecorators: { scroll: [{
|
|
4734
4749
|
type: Input
|
|
4735
4750
|
}], background: [{
|
|
4736
4751
|
type: Input
|
|
4752
|
+
}], appearance: [{
|
|
4753
|
+
type: Input
|
|
4737
4754
|
}], backgroundColor: [{
|
|
4738
4755
|
type: Input
|
|
4739
4756
|
}], tabOptionTextTone: [{
|
|
@@ -4777,6 +4794,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4777
4794
|
}] } });
|
|
4778
4795
|
|
|
4779
4796
|
class TCloudUiTabTitleComponent {
|
|
4797
|
+
get filledHost() {
|
|
4798
|
+
return this.inheritedAppearance === 'filled';
|
|
4799
|
+
}
|
|
4800
|
+
get segmentedHost() {
|
|
4801
|
+
return this.inheritedAppearance === 'segmented';
|
|
4802
|
+
}
|
|
4780
4803
|
set disabled(disabled) {
|
|
4781
4804
|
this._disabled = disabled;
|
|
4782
4805
|
this.tabMenuService.setTabDisabled(this.tab, this._disabled);
|
|
@@ -4788,9 +4811,18 @@ class TCloudUiTabTitleComponent {
|
|
|
4788
4811
|
this.active = false;
|
|
4789
4812
|
this.loading = false;
|
|
4790
4813
|
this.bottom_line = false;
|
|
4814
|
+
this.inheritedAppearance = 'default';
|
|
4815
|
+
this.inheritedTextTone = 'default';
|
|
4816
|
+
this.inheritedActiveTextTone = 'default';
|
|
4791
4817
|
this._disabled = false;
|
|
4792
4818
|
this.subscription = new Subscription();
|
|
4793
4819
|
}
|
|
4820
|
+
get resolvedTextColor() {
|
|
4821
|
+
return this.resolveTextTone(this.inheritedTextTone);
|
|
4822
|
+
}
|
|
4823
|
+
get resolvedActiveTextColor() {
|
|
4824
|
+
return this.resolveActiveTextTone(this.inheritedActiveTextTone);
|
|
4825
|
+
}
|
|
4794
4826
|
ngOnInit() {
|
|
4795
4827
|
if (!this.disabled) {
|
|
4796
4828
|
const tab = this.tabMenuService.getTabState();
|
|
@@ -4808,12 +4840,24 @@ class TCloudUiTabTitleComponent {
|
|
|
4808
4840
|
}
|
|
4809
4841
|
}));
|
|
4810
4842
|
this.loading = this.tabMenuService.getTabLoading();
|
|
4843
|
+
this.inheritedAppearance = this.tabMenuService.getTabHeadAppearance();
|
|
4844
|
+
this.inheritedTextTone = this.tabMenuService.getTabOptionTextTone();
|
|
4845
|
+
this.inheritedActiveTextTone = this.tabMenuService.getTabOptionActiveTextTone();
|
|
4811
4846
|
this.subscription?.add(this.tabMenuService.loadingState$.subscribe((loading) => {
|
|
4812
4847
|
this.loading = loading;
|
|
4813
4848
|
}));
|
|
4814
4849
|
this.subscription?.add(this.tabMenuService.bottom_lineState$.subscribe((bottom_line) => {
|
|
4815
4850
|
this.bottom_line = bottom_line;
|
|
4816
4851
|
}));
|
|
4852
|
+
this.subscription?.add(this.tabMenuService.tabHeadAppearanceState$.subscribe((appearance) => {
|
|
4853
|
+
this.inheritedAppearance = appearance;
|
|
4854
|
+
}));
|
|
4855
|
+
this.subscription?.add(this.tabMenuService.tabOptionTextToneState$.subscribe((textTone) => {
|
|
4856
|
+
this.inheritedTextTone = textTone;
|
|
4857
|
+
}));
|
|
4858
|
+
this.subscription?.add(this.tabMenuService.tabOptionActiveTextToneState$.subscribe((activeTextTone) => {
|
|
4859
|
+
this.inheritedActiveTextTone = activeTextTone;
|
|
4860
|
+
}));
|
|
4817
4861
|
}
|
|
4818
4862
|
toTab() {
|
|
4819
4863
|
if (!this.disabled) {
|
|
@@ -4827,18 +4871,36 @@ class TCloudUiTabTitleComponent {
|
|
|
4827
4871
|
this.subscription.unsubscribe();
|
|
4828
4872
|
}
|
|
4829
4873
|
}
|
|
4874
|
+
resolveTextTone(tone) {
|
|
4875
|
+
if (tone === 'inverse') {
|
|
4876
|
+
return 'var(--c-neutral-50)';
|
|
4877
|
+
}
|
|
4878
|
+
return 'var(--c-neutral-900)';
|
|
4879
|
+
}
|
|
4880
|
+
resolveActiveTextTone(tone) {
|
|
4881
|
+
if (tone === 'inverse') {
|
|
4882
|
+
return 'var(--c-neutral-900)';
|
|
4883
|
+
}
|
|
4884
|
+
return 'var(--c-neutral-50)';
|
|
4885
|
+
}
|
|
4830
4886
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiTabTitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4831
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TCloudUiTabTitleComponent, isStandalone: true, selector: "tcloud-ui-tab-title", inputs: { tab: "tab", title: "title", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button
|
|
4887
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TCloudUiTabTitleComponent, isStandalone: true, selector: "tcloud-ui-tab-title", inputs: { tab: "tab", title: "title", active: "active", disabled: "disabled" }, host: { properties: { "class.tab-title-host-filled": "this.filledHost", "class.tab-title-host-segmented": "this.segmentedHost" } }, ngImport: i0, template: "<button\n [class.loading]=\"loading\"\n [attr.data-id]=\"tab\"\n [class.tab-title-active]=\"active\"\n [class.tab-title-filled]=\"inheritedAppearance === 'filled'\"\n [class.tab-title-segmented]=\"inheritedAppearance === 'segmented'\"\n [style.--tc-tab-title-text-color]=\"resolvedTextColor\"\n [style.--tc-tab-title-active-text-color]=\"resolvedActiveTextColor\"\n [disabled]=\"disabled || loading\"\n type=\"button\"\n (click)=\"toTab()\"\n class=\"tcloud-ui-tab-title tab-title\">\n <ng-content></ng-content>\n</button>\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\" ></div>\n", styles: [":host(.tab-title-host-filled),:host(.tab-title-host-segmented){display:inline-flex;flex:1 1 0;min-width:160px}.tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--c-neutral-500);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title-active{background:var(--c-primary-500);color:var(--c-neutral-50)}.tab-title.tab-title-filled,.tab-title.tab-title-segmented{align-items:center;color:var(--tc-tab-title-text-color, var(--c-neutral-900));display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-400);justify-content:center;line-height:1.2;max-width:none;min-width:0;padding:0 var(--size-24);text-align:center;text-transform:none;white-space:nowrap;width:100%}.tab-title.tab-title-filled{min-height:70px}.tab-title.tab-title-segmented{border-radius:var(--bor-radius-8)!important;min-height:52px}.tab-title.tab-title-filled:hover,.tab-title.tab-title-filled:focus,.tab-title.tab-title-segmented:hover,.tab-title.tab-title-segmented:focus{background:var(--c-neutral-200);color:var(--tc-tab-title-text-color, var(--c-neutral-900));outline:none}.tab-title.tab-title-filled.tab-title-active,.tab-title.tab-title-filled.tab-title-active:hover,.tab-title.tab-title-filled.tab-title-active:focus,.tab-title.tab-title-segmented.tab-title-active,.tab-title.tab-title-segmented.tab-title-active:hover,.tab-title.tab-title-segmented.tab-title-active:focus{background:var(--c-primary-500);color:var(--tc-tab-title-active-text-color, var(--c-neutral-50));font-weight:var(--f-weight-700)}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}@media(max-width:1580px){.tab-title{font-size:11px;padding:20px 14px}}@media(max-width:1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }); }
|
|
4832
4888
|
}
|
|
4833
4889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiTabTitleComponent, decorators: [{
|
|
4834
4890
|
type: Component,
|
|
4835
|
-
args: [{ selector: 'tcloud-ui-tab-title', standalone: true, imports: [], template: "<button
|
|
4891
|
+
args: [{ selector: 'tcloud-ui-tab-title', standalone: true, imports: [], template: "<button\n [class.loading]=\"loading\"\n [attr.data-id]=\"tab\"\n [class.tab-title-active]=\"active\"\n [class.tab-title-filled]=\"inheritedAppearance === 'filled'\"\n [class.tab-title-segmented]=\"inheritedAppearance === 'segmented'\"\n [style.--tc-tab-title-text-color]=\"resolvedTextColor\"\n [style.--tc-tab-title-active-text-color]=\"resolvedActiveTextColor\"\n [disabled]=\"disabled || loading\"\n type=\"button\"\n (click)=\"toTab()\"\n class=\"tcloud-ui-tab-title tab-title\">\n <ng-content></ng-content>\n</button>\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\" ></div>\n", styles: [":host(.tab-title-host-filled),:host(.tab-title-host-segmented){display:inline-flex;flex:1 1 0;min-width:160px}.tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--c-neutral-500);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title-active{background:var(--c-primary-500);color:var(--c-neutral-50)}.tab-title.tab-title-filled,.tab-title.tab-title-segmented{align-items:center;color:var(--tc-tab-title-text-color, var(--c-neutral-900));display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-400);justify-content:center;line-height:1.2;max-width:none;min-width:0;padding:0 var(--size-24);text-align:center;text-transform:none;white-space:nowrap;width:100%}.tab-title.tab-title-filled{min-height:70px}.tab-title.tab-title-segmented{border-radius:var(--bor-radius-8)!important;min-height:52px}.tab-title.tab-title-filled:hover,.tab-title.tab-title-filled:focus,.tab-title.tab-title-segmented:hover,.tab-title.tab-title-segmented:focus{background:var(--c-neutral-200);color:var(--tc-tab-title-text-color, var(--c-neutral-900));outline:none}.tab-title.tab-title-filled.tab-title-active,.tab-title.tab-title-filled.tab-title-active:hover,.tab-title.tab-title-filled.tab-title-active:focus,.tab-title.tab-title-segmented.tab-title-active,.tab-title.tab-title-segmented.tab-title-active:hover,.tab-title.tab-title-segmented.tab-title-active:focus{background:var(--c-primary-500);color:var(--tc-tab-title-active-text-color, var(--c-neutral-50));font-weight:var(--f-weight-700)}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}@media(max-width:1580px){.tab-title{font-size:11px;padding:20px 14px}}@media(max-width:1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }]
|
|
4836
4892
|
}], ctorParameters: () => [{ type: TabMenuService }], propDecorators: { tab: [{
|
|
4837
4893
|
type: Input
|
|
4838
4894
|
}], title: [{
|
|
4839
4895
|
type: Input
|
|
4840
4896
|
}], active: [{
|
|
4841
4897
|
type: Input
|
|
4898
|
+
}], filledHost: [{
|
|
4899
|
+
type: HostBinding,
|
|
4900
|
+
args: ['class.tab-title-host-filled']
|
|
4901
|
+
}], segmentedHost: [{
|
|
4902
|
+
type: HostBinding,
|
|
4903
|
+
args: ['class.tab-title-host-segmented']
|
|
4842
4904
|
}], disabled: [{
|
|
4843
4905
|
type: Input
|
|
4844
4906
|
}] } });
|