@dev-tcloud/tcloud-ui 7.7.0 → 7.7.2
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/docs/tcloud-ui-tab-menu.md +33 -21
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +86 -19
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/js/tcloud-ui-app.js +71 -71
- package/package.json +1 -1
- package/scss/tcloud-revitalizacao/components/_tc-rev-input-control.scss +15 -0
- package/types/dev-tcloud-tcloud-ui.d.ts +30 -5
|
@@ -44,16 +44,16 @@ export class ExampleComponent {}
|
|
|
44
44
|
| registerInUrl | boolean | Atualiza query param `tab` com a aba ativa. | false |
|
|
45
45
|
| loading | boolean | Propaga estado de carregamento para abas. | false |
|
|
46
46
|
| active | string | Id da aba ativa inicial (aceita atualização). | '' |
|
|
47
|
-
| full | boolean |
|
|
47
|
+
| full | boolean | Distribui os itens do head para preencher a largura disponível. | false |
|
|
48
48
|
|
|
49
49
|
### `tcloud-ui-tab-head`
|
|
50
50
|
|
|
51
51
|
| Nome | Tipo | Descrição | Valor Default |
|
|
52
52
|
| --------------- | -------------------------------------------- | ---------------------------------------- | ------------------------------------------ |
|
|
53
53
|
| scroll | boolean | Controla scroll horizontal do cabeçalho. | true |
|
|
54
|
-
| appearance | 'default'\|'
|
|
55
|
-
|
|
|
56
|
-
|
|
|
54
|
+
| appearance | 'default'\|'segmented' | Define a aparência do cabeçalho. `default` é o layout preenchido padrão e `segmented` cria o trilho arredondado. | 'default' |
|
|
55
|
+
| density | 'default'\|'compact' | Define a densidade visual. Use `compact` para reduzir fonte, padding e altura do head. | 'default' |
|
|
56
|
+
| wrapLabel | boolean | Permite quebra de linha nos labels, removendo ellipsis e mantendo alinhamento central. | false |
|
|
57
57
|
| bottom_line | boolean | Exibe linha inferior. | false |
|
|
58
58
|
| tabOptionTextTone | 'default'\|'inverse' | Tom semântico do texto dos itens visuais do head (`default` escuro, `inverse` claro). | 'default' |
|
|
59
59
|
| tabOptionActiveTextTone | 'default'\|'inverse' | Tom semântico do texto ativo dos itens visuais do head (`default` claro, `inverse` escuro). | 'default' |
|
|
@@ -93,9 +93,11 @@ export class ExampleComponent {}
|
|
|
93
93
|
|
|
94
94
|
### Uso Básico
|
|
95
95
|
|
|
96
|
+
O layout padrão de `tcloud-ui-tab-title` é `default`; não é necessário informar `appearance` para usar o menu preenchido.
|
|
97
|
+
|
|
96
98
|
```html
|
|
97
99
|
<tcloud-ui-tab-menu [active]="'tab-1'" (onChange)="onTab($event)">
|
|
98
|
-
<tcloud-ui-tab-head [bottom_line]="
|
|
100
|
+
<tcloud-ui-tab-head [bottom_line]="false" [background]="true">
|
|
99
101
|
<tcloud-ui-tab-title tab="tab-1">Tab 1</tcloud-ui-tab-title>
|
|
100
102
|
<tcloud-ui-tab-title tab="tab-2">Tab 2</tcloud-ui-tab-title>
|
|
101
103
|
</tcloud-ui-tab-head>
|
|
@@ -105,31 +107,42 @@ export class ExampleComponent {}
|
|
|
105
107
|
</tcloud-ui-tab-menu>
|
|
106
108
|
```
|
|
107
109
|
|
|
108
|
-
###
|
|
110
|
+
### Menu horizontal preenchido
|
|
109
111
|
|
|
110
112
|
```html
|
|
111
|
-
<tcloud-ui-tab-menu [active]="'
|
|
112
|
-
<tcloud-ui-tab-head
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
113
|
+
<tcloud-ui-tab-menu [active]="'environment-details'" [full]="true">
|
|
114
|
+
<tcloud-ui-tab-head
|
|
115
|
+
[bottom_line]="false"
|
|
116
|
+
[background]="true"
|
|
117
|
+
tabOptionActiveTextTone="inverse">
|
|
118
|
+
<tcloud-ui-tab-title tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-title>
|
|
119
|
+
<tcloud-ui-tab-title tab="monitoring">Monitoramento</tcloud-ui-tab-title>
|
|
120
|
+
<tcloud-ui-tab-title tab="log">Log</tcloud-ui-tab-title>
|
|
121
|
+
<tcloud-ui-tab-title tab="database">Banco de dados</tcloud-ui-tab-title>
|
|
122
|
+
<tcloud-ui-tab-title tab="executed-actions">Ações executadas</tcloud-ui-tab-title>
|
|
123
|
+
<tcloud-ui-tab-title tab="backup">Backup</tcloud-ui-tab-title>
|
|
124
|
+
<tcloud-ui-tab-title tab="infrastructure">Infraestrutura</tcloud-ui-tab-title>
|
|
125
|
+
<tcloud-ui-tab-title tab="security">Segurança</tcloud-ui-tab-title>
|
|
126
|
+
<tcloud-ui-tab-title tab="manage">Gerenciar</tcloud-ui-tab-title>
|
|
116
127
|
</tcloud-ui-tab-head>
|
|
117
128
|
|
|
118
|
-
<tcloud-ui-tab-content tab="
|
|
119
|
-
<tcloud-ui-tab-content tab="a2">Content A2</tcloud-ui-tab-content>
|
|
120
|
-
<tcloud-ui-tab-content tab="a3">Content A3</tcloud-ui-tab-content>
|
|
129
|
+
<tcloud-ui-tab-content tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-content>
|
|
121
130
|
</tcloud-ui-tab-menu>
|
|
122
131
|
```
|
|
123
132
|
|
|
124
|
-
### Menu
|
|
133
|
+
### Menu com muitos itens
|
|
134
|
+
|
|
135
|
+
Use `[full]="true"` para dividir a largura disponível entre os itens, `density="compact"` para reduzir a altura e `[wrapLabel]="true"` para permitir labels com quebra de linha sem truncamento.
|
|
125
136
|
|
|
126
137
|
```html
|
|
127
|
-
<tcloud-ui-tab-menu [active]="'
|
|
138
|
+
<tcloud-ui-tab-menu [active]="'security'" [full]="true">
|
|
128
139
|
<tcloud-ui-tab-head
|
|
129
|
-
|
|
140
|
+
density="compact"
|
|
141
|
+
[wrapLabel]="true"
|
|
130
142
|
[bottom_line]="false"
|
|
131
143
|
[background]="true"
|
|
132
|
-
|
|
144
|
+
[scroll]="true"
|
|
145
|
+
tabOptionActiveTextTone="default">
|
|
133
146
|
<tcloud-ui-tab-title tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-title>
|
|
134
147
|
<tcloud-ui-tab-title tab="monitoring">Monitoramento</tcloud-ui-tab-title>
|
|
135
148
|
<tcloud-ui-tab-title tab="log">Log</tcloud-ui-tab-title>
|
|
@@ -140,8 +153,6 @@ export class ExampleComponent {}
|
|
|
140
153
|
<tcloud-ui-tab-title tab="security">Segurança</tcloud-ui-tab-title>
|
|
141
154
|
<tcloud-ui-tab-title tab="manage">Gerenciar</tcloud-ui-tab-title>
|
|
142
155
|
</tcloud-ui-tab-head>
|
|
143
|
-
|
|
144
|
-
<tcloud-ui-tab-content tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-content>
|
|
145
156
|
</tcloud-ui-tab-menu>
|
|
146
157
|
```
|
|
147
158
|
|
|
@@ -182,5 +193,6 @@ export interface ITab {
|
|
|
182
193
|
}
|
|
183
194
|
|
|
184
195
|
export type TabOptionTextTone = 'default' | 'inverse';
|
|
185
|
-
export type TabHeadAppearance = 'default' | '
|
|
196
|
+
export type TabHeadAppearance = 'default' | 'segmented';
|
|
197
|
+
export type TabHeadDensity = 'default' | 'compact';
|
|
186
198
|
```
|
|
@@ -4488,6 +4488,12 @@ class TabMenuService {
|
|
|
4488
4488
|
this._tabHeadAppearance = 'default';
|
|
4489
4489
|
this.tabHeadAppearanceSubject = new Subject();
|
|
4490
4490
|
this.tabHeadAppearanceState$ = this.tabHeadAppearanceSubject.asObservable();
|
|
4491
|
+
this._tabHeadDensity = 'default';
|
|
4492
|
+
this.tabHeadDensitySubject = new Subject();
|
|
4493
|
+
this.tabHeadDensityState$ = this.tabHeadDensitySubject.asObservable();
|
|
4494
|
+
this._tabHeadWrapLabel = false;
|
|
4495
|
+
this.tabHeadWrapLabelSubject = new Subject();
|
|
4496
|
+
this.tabHeadWrapLabelState$ = this.tabHeadWrapLabelSubject.asObservable();
|
|
4491
4497
|
}
|
|
4492
4498
|
setTabScroll(scroll) {
|
|
4493
4499
|
this._scroll = scroll;
|
|
@@ -4532,12 +4538,28 @@ class TabMenuService {
|
|
|
4532
4538
|
return this._tabOptionActiveTextTone;
|
|
4533
4539
|
}
|
|
4534
4540
|
setTabHeadAppearance(appearance) {
|
|
4535
|
-
|
|
4536
|
-
this.
|
|
4541
|
+
const normalizedAppearance = appearance === 'segmented' ? 'segmented' : 'default';
|
|
4542
|
+
this._tabHeadAppearance = normalizedAppearance;
|
|
4543
|
+
this.tabHeadAppearanceSubject.next(normalizedAppearance);
|
|
4537
4544
|
}
|
|
4538
4545
|
getTabHeadAppearance() {
|
|
4539
4546
|
return this._tabHeadAppearance;
|
|
4540
4547
|
}
|
|
4548
|
+
setTabHeadDensity(density) {
|
|
4549
|
+
const normalizedDensity = density === 'compact' ? 'compact' : 'default';
|
|
4550
|
+
this._tabHeadDensity = normalizedDensity;
|
|
4551
|
+
this.tabHeadDensitySubject.next(normalizedDensity);
|
|
4552
|
+
}
|
|
4553
|
+
getTabHeadDensity() {
|
|
4554
|
+
return this._tabHeadDensity;
|
|
4555
|
+
}
|
|
4556
|
+
setTabHeadWrapLabel(wrapLabel) {
|
|
4557
|
+
this._tabHeadWrapLabel = wrapLabel;
|
|
4558
|
+
this.tabHeadWrapLabelSubject.next(wrapLabel);
|
|
4559
|
+
}
|
|
4560
|
+
getTabHeadWrapLabel() {
|
|
4561
|
+
return this._tabHeadWrapLabel;
|
|
4562
|
+
}
|
|
4541
4563
|
setTabState(tab, registerInUrl) {
|
|
4542
4564
|
this._tab = tab;
|
|
4543
4565
|
if (registerInUrl) {
|
|
@@ -4662,6 +4684,20 @@ class TCloudUiTabHeadComponent {
|
|
|
4662
4684
|
}
|
|
4663
4685
|
}
|
|
4664
4686
|
get scroll() { return this._scroll; }
|
|
4687
|
+
set appearance(appearance) {
|
|
4688
|
+
this._appearance = appearance === 'segmented' ? 'segmented' : 'default';
|
|
4689
|
+
}
|
|
4690
|
+
get appearance() { return this._appearance; }
|
|
4691
|
+
set density(density) {
|
|
4692
|
+
this._density = density === 'compact' ? 'compact' : 'default';
|
|
4693
|
+
}
|
|
4694
|
+
get density() { return this._density; }
|
|
4695
|
+
set wrapLabel(wrapLabel) {
|
|
4696
|
+
if (typeof wrapLabel === 'boolean') {
|
|
4697
|
+
this._wrapLabel = wrapLabel;
|
|
4698
|
+
}
|
|
4699
|
+
}
|
|
4700
|
+
get wrapLabel() { return this._wrapLabel; }
|
|
4665
4701
|
set tabOptionTextTone(tabOptionTextTone) {
|
|
4666
4702
|
this._tabOptionTextTone = tabOptionTextTone;
|
|
4667
4703
|
this.tabMenuService.setTabOptionTextTone(tabOptionTextTone);
|
|
@@ -4684,7 +4720,9 @@ class TCloudUiTabHeadComponent {
|
|
|
4684
4720
|
this._scroll = true;
|
|
4685
4721
|
this.ID = '';
|
|
4686
4722
|
this.background = true;
|
|
4687
|
-
this.
|
|
4723
|
+
this._appearance = 'default';
|
|
4724
|
+
this._density = 'default';
|
|
4725
|
+
this._wrapLabel = false;
|
|
4688
4726
|
// Aceita 'white' | 'transparent' (ou um CSS color); resolvido para token dark-aware no ngOnInit
|
|
4689
4727
|
this.backgroundColor = 'transparent';
|
|
4690
4728
|
this._tabOptionTextTone = 'default';
|
|
@@ -4695,17 +4733,9 @@ class TCloudUiTabHeadComponent {
|
|
|
4695
4733
|
this.tabMenuService.setTabOptionTextTone(this.tabOptionTextTone);
|
|
4696
4734
|
this.tabMenuService.setTabOptionActiveTextTone(this.tabOptionActiveTextTone);
|
|
4697
4735
|
this.tabMenuService.setTabHeadAppearance(this.appearance);
|
|
4698
|
-
|
|
4699
|
-
|
|
4700
|
-
|
|
4701
|
-
else if (this.background) {
|
|
4702
|
-
if (this.backgroundColor === 'white') {
|
|
4703
|
-
this.backgroundColor = 'var(--c-neutral-50)';
|
|
4704
|
-
}
|
|
4705
|
-
else {
|
|
4706
|
-
this.backgroundColor = 'var(--c-neutral-100)';
|
|
4707
|
-
}
|
|
4708
|
-
}
|
|
4736
|
+
this.tabMenuService.setTabHeadDensity(this.density);
|
|
4737
|
+
this.tabMenuService.setTabHeadWrapLabel(this.wrapLabel);
|
|
4738
|
+
this.backgroundColor = 'var(--c-neutral-100)';
|
|
4709
4739
|
this.ID = this.generateID();
|
|
4710
4740
|
}
|
|
4711
4741
|
generateID() {
|
|
@@ -4740,17 +4770,21 @@ class TCloudUiTabHeadComponent {
|
|
|
4740
4770
|
this.scrollSuave(ccs_s, action == 'next' ? wid + ccs_s : ccs_s - wid, 0, ccs);
|
|
4741
4771
|
}
|
|
4742
4772
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 === '
|
|
4773
|
+
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", density: "density", wrapLabel: "wrapLabel", 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 === 'default'\"\n [class.tab-head-segmented]=\"appearance === 'segmented'\"\n [class.tab-head-density-compact]=\"density === 'compact'\"\n [class.tab-head-wrap-label]=\"wrapLabel\"\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-x:auto;overflow-y:hidden;margin-bottom:5px;scrollbar-width:none;z-index:1;position:relative}.tc-menu::-webkit-scrollbar{display:none}.tab-head-filled{border-radius:0;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)}.tab-head-density-compact.tab-head-filled,.tab-head-density-compact.tab-head-segmented{min-height:var(--size-60)}.tab-head-density-compact.tab-head-segmented{padding:var(--size-4)}.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"] }); }
|
|
4744
4774
|
}
|
|
4745
4775
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
|
|
4746
4776
|
type: Component,
|
|
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 === '
|
|
4777
|
+
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 === 'default'\"\n [class.tab-head-segmented]=\"appearance === 'segmented'\"\n [class.tab-head-density-compact]=\"density === 'compact'\"\n [class.tab-head-wrap-label]=\"wrapLabel\"\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-x:auto;overflow-y:hidden;margin-bottom:5px;scrollbar-width:none;z-index:1;position:relative}.tc-menu::-webkit-scrollbar{display:none}.tab-head-filled{border-radius:0;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)}.tab-head-density-compact.tab-head-filled,.tab-head-density-compact.tab-head-segmented{min-height:var(--size-60)}.tab-head-density-compact.tab-head-segmented{padding:var(--size-4)}.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"] }]
|
|
4748
4778
|
}], ctorParameters: () => [{ type: TabMenuService }], propDecorators: { scroll: [{
|
|
4749
4779
|
type: Input
|
|
4750
4780
|
}], background: [{
|
|
4751
4781
|
type: Input
|
|
4752
4782
|
}], appearance: [{
|
|
4753
4783
|
type: Input
|
|
4784
|
+
}], density: [{
|
|
4785
|
+
type: Input
|
|
4786
|
+
}], wrapLabel: [{
|
|
4787
|
+
type: Input
|
|
4754
4788
|
}], backgroundColor: [{
|
|
4755
4789
|
type: Input
|
|
4756
4790
|
}], tabOptionTextTone: [{
|
|
@@ -4795,11 +4829,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4795
4829
|
|
|
4796
4830
|
class TCloudUiTabTitleComponent {
|
|
4797
4831
|
get filledHost() {
|
|
4798
|
-
return this.inheritedAppearance === '
|
|
4832
|
+
return this.inheritedAppearance === 'default';
|
|
4799
4833
|
}
|
|
4800
4834
|
get segmentedHost() {
|
|
4801
4835
|
return this.inheritedAppearance === 'segmented';
|
|
4802
4836
|
}
|
|
4837
|
+
get fullHost() {
|
|
4838
|
+
return this.inheritedFull && (this.inheritedAppearance === 'default' || this.inheritedAppearance === 'segmented');
|
|
4839
|
+
}
|
|
4840
|
+
get compactHost() {
|
|
4841
|
+
return this.inheritedDensity === 'compact';
|
|
4842
|
+
}
|
|
4843
|
+
get wrapLabelHost() {
|
|
4844
|
+
return this.inheritedWrapLabel;
|
|
4845
|
+
}
|
|
4803
4846
|
set disabled(disabled) {
|
|
4804
4847
|
this._disabled = disabled;
|
|
4805
4848
|
this.tabMenuService.setTabDisabled(this.tab, this._disabled);
|
|
@@ -4811,7 +4854,10 @@ class TCloudUiTabTitleComponent {
|
|
|
4811
4854
|
this.active = false;
|
|
4812
4855
|
this.loading = false;
|
|
4813
4856
|
this.bottom_line = false;
|
|
4857
|
+
this.inheritedFull = false;
|
|
4814
4858
|
this.inheritedAppearance = 'default';
|
|
4859
|
+
this.inheritedDensity = 'default';
|
|
4860
|
+
this.inheritedWrapLabel = false;
|
|
4815
4861
|
this.inheritedTextTone = 'default';
|
|
4816
4862
|
this.inheritedActiveTextTone = 'default';
|
|
4817
4863
|
this._disabled = false;
|
|
@@ -4840,7 +4886,10 @@ class TCloudUiTabTitleComponent {
|
|
|
4840
4886
|
}
|
|
4841
4887
|
}));
|
|
4842
4888
|
this.loading = this.tabMenuService.getTabLoading();
|
|
4889
|
+
this.inheritedFull = this.tabMenuService.getTabFull() ?? false;
|
|
4843
4890
|
this.inheritedAppearance = this.tabMenuService.getTabHeadAppearance();
|
|
4891
|
+
this.inheritedDensity = this.tabMenuService.getTabHeadDensity();
|
|
4892
|
+
this.inheritedWrapLabel = this.tabMenuService.getTabHeadWrapLabel();
|
|
4844
4893
|
this.inheritedTextTone = this.tabMenuService.getTabOptionTextTone();
|
|
4845
4894
|
this.inheritedActiveTextTone = this.tabMenuService.getTabOptionActiveTextTone();
|
|
4846
4895
|
this.subscription?.add(this.tabMenuService.loadingState$.subscribe((loading) => {
|
|
@@ -4849,9 +4898,18 @@ class TCloudUiTabTitleComponent {
|
|
|
4849
4898
|
this.subscription?.add(this.tabMenuService.bottom_lineState$.subscribe((bottom_line) => {
|
|
4850
4899
|
this.bottom_line = bottom_line;
|
|
4851
4900
|
}));
|
|
4901
|
+
this.subscription?.add(this.tabMenuService.fullState$.subscribe((full) => {
|
|
4902
|
+
this.inheritedFull = full;
|
|
4903
|
+
}));
|
|
4852
4904
|
this.subscription?.add(this.tabMenuService.tabHeadAppearanceState$.subscribe((appearance) => {
|
|
4853
4905
|
this.inheritedAppearance = appearance;
|
|
4854
4906
|
}));
|
|
4907
|
+
this.subscription?.add(this.tabMenuService.tabHeadDensityState$.subscribe((density) => {
|
|
4908
|
+
this.inheritedDensity = density;
|
|
4909
|
+
}));
|
|
4910
|
+
this.subscription?.add(this.tabMenuService.tabHeadWrapLabelState$.subscribe((wrapLabel) => {
|
|
4911
|
+
this.inheritedWrapLabel = wrapLabel;
|
|
4912
|
+
}));
|
|
4855
4913
|
this.subscription?.add(this.tabMenuService.tabOptionTextToneState$.subscribe((textTone) => {
|
|
4856
4914
|
this.inheritedTextTone = textTone;
|
|
4857
4915
|
}));
|
|
@@ -4884,11 +4942,11 @@ class TCloudUiTabTitleComponent {
|
|
|
4884
4942
|
return 'var(--c-neutral-50)';
|
|
4885
4943
|
}
|
|
4886
4944
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiTabTitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 === '
|
|
4945
|
+
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", "class.tab-title-host-full": "this.fullHost", "class.tab-title-host-density-compact": "this.compactHost", "class.tab-title-host-wrap-label": "this.wrapLabelHost" } }, 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 === 'default'\"\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:0 0 auto;min-width:160px}:host(.tab-title-host-full){flex:1 1 0;min-width:0}.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%}:host(.tab-title-host-density-compact) .tab-title{transition:none}.tab-title.tab-title-filled{border-radius:0!important;min-height:70px}.tab-title.tab-title-segmented{border-radius:var(--bor-radius-8)!important;min-height:52px}:host(.tab-title-host-density-compact) .tab-title.tab-title-filled,:host(.tab-title-host-density-compact) .tab-title.tab-title-segmented{font-size:var(--f-size-12);line-height:var(--l-height-16);min-height:var(--size-60);padding:0 var(--size-12)}:host(.tab-title-host-wrap-label) .tab-title.tab-title-filled,:host(.tab-title-host-wrap-label) .tab-title.tab-title-segmented{overflow:visible;overflow-wrap:break-word;text-overflow:clip;white-space:normal}.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"] }); }
|
|
4888
4946
|
}
|
|
4889
4947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiTabTitleComponent, decorators: [{
|
|
4890
4948
|
type: Component,
|
|
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 === '
|
|
4949
|
+
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 === 'default'\"\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:0 0 auto;min-width:160px}:host(.tab-title-host-full){flex:1 1 0;min-width:0}.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%}:host(.tab-title-host-density-compact) .tab-title{transition:none}.tab-title.tab-title-filled{border-radius:0!important;min-height:70px}.tab-title.tab-title-segmented{border-radius:var(--bor-radius-8)!important;min-height:52px}:host(.tab-title-host-density-compact) .tab-title.tab-title-filled,:host(.tab-title-host-density-compact) .tab-title.tab-title-segmented{font-size:var(--f-size-12);line-height:var(--l-height-16);min-height:var(--size-60);padding:0 var(--size-12)}:host(.tab-title-host-wrap-label) .tab-title.tab-title-filled,:host(.tab-title-host-wrap-label) .tab-title.tab-title-segmented{overflow:visible;overflow-wrap:break-word;text-overflow:clip;white-space:normal}.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"] }]
|
|
4892
4950
|
}], ctorParameters: () => [{ type: TabMenuService }], propDecorators: { tab: [{
|
|
4893
4951
|
type: Input
|
|
4894
4952
|
}], title: [{
|
|
@@ -4901,6 +4959,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4901
4959
|
}], segmentedHost: [{
|
|
4902
4960
|
type: HostBinding,
|
|
4903
4961
|
args: ['class.tab-title-host-segmented']
|
|
4962
|
+
}], fullHost: [{
|
|
4963
|
+
type: HostBinding,
|
|
4964
|
+
args: ['class.tab-title-host-full']
|
|
4965
|
+
}], compactHost: [{
|
|
4966
|
+
type: HostBinding,
|
|
4967
|
+
args: ['class.tab-title-host-density-compact']
|
|
4968
|
+
}], wrapLabelHost: [{
|
|
4969
|
+
type: HostBinding,
|
|
4970
|
+
args: ['class.tab-title-host-wrap-label']
|
|
4904
4971
|
}], disabled: [{
|
|
4905
4972
|
type: Input
|
|
4906
4973
|
}] } });
|