@dev-tcloud/tcloud-ui 7.1.0 → 7.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,226 @@
1
+ # Navbar
2
+
3
+ ## Caracteristicas
4
+
5
+ O `TCloudUiNavbarComponent` e o menu vertical principal do tcloud. E um componente
6
+ **data-driven**: recebe um array de itens (`TCloudUiNavbarItem[]`) e renderiza a
7
+ navegacao, incluindo submenus **recursivos** de qualquer profundidade.
8
+
9
+ Funcionalidades principais:
10
+ - Menu vertical alimentado por `[menuItems]` ou por `[groups]` (secoes separadas por divisor).
11
+ - Submenus recursivos (N niveis), expansiveis/colapsaveis pelo proprio item.
12
+ - Modo expandido (labels + icones) e minimizado (somente icones) via `isMenuExpanded`.
13
+ - Botao interno de minimizar/expandir (controlavel por `showToggle`).
14
+ - Navegacao interna por `routerLink` (`link`) e externa em nova aba (`href`).
15
+ - Selo curto por item via `badge` (ex.: `'Novo'`).
16
+ - Itens desabilitados (`enable: false`) sao ocultados.
17
+ - Logo no header via `[logoSrc]` (com variante `[logoSrcDark]` para `body.tc-dark`);
18
+ no modo minimizado o logo e recortado, sobrando so o simbolo.
19
+ - Rodape de perfil pronto com o componente `tcloud-ui-navbar-footer` (avatar, nome,
20
+ papel e botao de sair), ou conteudo livre via slots `[navbar-header]`/`[navbar-footer]`.
21
+ - Emite `onItemClick` ao clicar num item folha e `onExpandChange` ao alternar o menu.
22
+
23
+ ## Instalacao
24
+
25
+ Importe o componente (e o item, para a recursao; o footer, se for usar o rodape de
26
+ perfil) no consumidor standalone:
27
+
28
+ ```typescript
29
+ import {
30
+ TCloudUiNavbarComponent,
31
+ TCloudUiNavbarItemComponent,
32
+ TCloudUiNavbarFooterComponent
33
+ } from 'tcloud-ui';
34
+
35
+ @Component({
36
+ selector: 'app-exemplo',
37
+ standalone: true,
38
+ imports: [TCloudUiNavbarComponent, TCloudUiNavbarItemComponent, TCloudUiNavbarFooterComponent],
39
+ templateUrl: './app-exemplo.component.html'
40
+ })
41
+ export class ExemploComponent {}
42
+ ```
43
+
44
+ Em aplicacoes NgModule, o `TCloudUiModule` ja exporta esses componentes.
45
+
46
+ ## Propriedades (API)
47
+
48
+ ### Inputs
49
+
50
+ | Nome | Tipo | Descricao | Valor Default |
51
+ |------|------|-----------|---------------|
52
+ | menuItems | `TCloudUiNavbarItem[]` | Itens do menu (grupo unico). Submenus sao renderizados recursivamente. | `[]` |
53
+ | groups | `TCloudUiNavbarGroup[]` | Grupos de itens separados por divisor. Tem precedencia sobre `menuItems`. | `[]` |
54
+ | isMenuExpanded | `boolean` | Menu expandido (labels visiveis) ou minimizado (so icones). | `true` |
55
+ | showToggle | `boolean` | Exibe o botao interno de minimizar/expandir. | `true` |
56
+ | logoSrc | `string?` | Caminho da imagem do logo exibido no header (tema claro). | logo TOTVS preto |
57
+ | logoSrcDark | `string?` | Caminho do logo para o tema escuro (`body.tc-dark`). Quando informado, o header alterna automaticamente. | logo TOTVS branco |
58
+ | logoAlt | `string` | Texto alternativo do logo. | `'Logo'` |
59
+
60
+ > **Logo no modo minimizado:** o header usa `overflow: hidden` com o logo em largura
61
+ > fixa — ao minimizar, o wordmark e **recortado** (nao reduzido), sobrando so o
62
+ > simbolo. Prefira um logo **horizontal com o simbolo a esquerda**.
63
+
64
+ ### Slots de conteudo (content projection)
65
+
66
+ | Seletor | Descricao |
67
+ |---------|-----------|
68
+ | `[navbar-header]` | Conteudo customizado do topo (alternativa ao `logoSrc`). |
69
+ | `[navbar-footer]` | Conteudo do rodape fixo — tipicamente o `tcloud-ui-navbar-footer`. |
70
+
71
+ ### Componente `tcloud-ui-navbar-footer`
72
+
73
+ Rodape de perfil (avatar, nome, papel e botao de sair) para projetar no slot
74
+ `[navbar-footer]`. Respeita o modo minimizado (mostra so o avatar).
75
+
76
+ Inputs:
77
+
78
+ | Nome | Tipo | Descricao | Valor Default |
79
+ |------|------|-----------|---------------|
80
+ | avatarSrc | `string?` | Caminho da imagem do avatar. | `undefined` |
81
+ | avatarAlt | `string` | Texto alternativo do avatar. | `''` |
82
+ | name | `string` | Nome do usuario. | `''` |
83
+ | role | `string` | Papel/subtitulo do usuario. | `''` |
84
+ | isMenuExpanded | `boolean` | Mostra nome/papel e o botao de sair. | `true` |
85
+ | showLogout | `boolean` | Exibe o botao de sair. | `true` |
86
+ | logoutTitle | `string` | Titulo/tooltip do botao de sair. | `'Sair'` |
87
+
88
+ Outputs:
89
+
90
+ | Nome | Tipo | Descricao |
91
+ |------|------|-----------|
92
+ | onLogout | `void` | Emitido ao clicar no botao de sair. |
93
+
94
+ ### Outputs
95
+
96
+ | Nome | Tipo | Descricao |
97
+ |------|------|-----------|
98
+ | onItemClick | `TCloudUiNavbarItem` | Emitido ao clicar num item folha (sem submenu). |
99
+ | onExpandChange | `boolean` | Emitido ao alternar entre expandido/minimizado. |
100
+
101
+ ### Modelo `TCloudUiNavbarItem`
102
+
103
+ | Campo | Tipo | Descricao |
104
+ |-------|------|-----------|
105
+ | label | `string` | Texto exibido (ja traduzido pelo consumidor). |
106
+ | icon | `string?` | Classe(s) do icone, ex.: `'fas fa-laptop'`. |
107
+ | link | `string?` | Rota interna (usada como `routerLink`). |
108
+ | queryParams | `Params \| null` | Query params aplicados junto do `routerLink`. |
109
+ | href | `string?` | URL externa — abre em nova aba. |
110
+ | submenu | `TCloudUiNavbarItem[]?` | Sub-itens (recursivos). |
111
+ | active | `boolean?` | Forca o realce full-width. O ativo tambem e detectado pela rota atual via `routerLinkActive` — nao fixe este campo so para reproduzir um mockup. |
112
+ | open | `boolean?` | Estado inicial do submenu (aberto/fechado). |
113
+ | enable | `boolean?` | Quando `false`, o item e ocultado. Default `true`. |
114
+ | badge | `string?` | Selo curto exibido ao lado do label, ex.: `'Novo'`. |
115
+
116
+ ### Modelo `TCloudUiNavbarGroup`
117
+
118
+ | Campo | Tipo | Descricao |
119
+ |-------|------|-----------|
120
+ | label | `string?` | Rotulo opcional exibido como cabecalho da secao (so no modo expandido). |
121
+ | items | `TCloudUiNavbarItem[]` | Itens do grupo. |
122
+
123
+ ## Exemplos de Uso
124
+
125
+ ### Uso Basico
126
+
127
+ ```html
128
+ <tcloud-ui-navbar [menuItems]="menuItems" (onItemClick)="go($event)"></tcloud-ui-navbar>
129
+ ```
130
+
131
+ ```typescript
132
+ import { Component } from '@angular/core';
133
+ import { TCloudUiNavbarComponent, TCloudUiNavbarItemComponent, TCloudUiNavbarItem } from 'tcloud-ui';
134
+
135
+ @Component({
136
+ selector: 'app-exemplo',
137
+ standalone: true,
138
+ imports: [TCloudUiNavbarComponent, TCloudUiNavbarItemComponent],
139
+ templateUrl: './app-exemplo.component.html'
140
+ })
141
+ export class AppExemploComponent {
142
+ menuItems: TCloudUiNavbarItem[] = [
143
+ { label: 'Home', icon: 'fas fa-laptop', link: '/dashboard' },
144
+ { label: 'Documentacao', icon: 'fas fa-book', href: 'https://exemplo.com' }
145
+ ];
146
+
147
+ go(item: TCloudUiNavbarItem) {
148
+ console.log('clicou', item);
149
+ }
150
+ }
151
+ ```
152
+
153
+ ### Uso Avancado (submenu recursivo)
154
+
155
+ ```typescript
156
+ menuItems: TCloudUiNavbarItem[] = [
157
+ { label: 'Home', icon: 'fas fa-laptop', link: '/dashboard', active: true },
158
+ {
159
+ label: 'IaaS',
160
+ icon: 'fas fa-cloud',
161
+ open: true,
162
+ submenu: [
163
+ { label: 'Boas vindas', link: '/iaas/welcome' },
164
+ { label: 'Meus ambientes', link: '/iaas/virtual-machines' }
165
+ ]
166
+ },
167
+ {
168
+ label: 'Administracao',
169
+ icon: 'fas fa-cogs',
170
+ submenu: [
171
+ {
172
+ label: 'IAM',
173
+ submenu: [
174
+ { label: 'Papeis de usuario', link: '/admin/iam/roles' }
175
+ ]
176
+ },
177
+ { label: 'Item oculto', link: '/admin/hidden', enable: false }
178
+ ]
179
+ }
180
+ ];
181
+ ```
182
+
183
+ O menu monta os niveis recursivamente; itens com `submenu` alternam a exibicao dos
184
+ filhos ao serem clicados, e itens com `enable: false` nao aparecem.
185
+
186
+ ### Grupos, badge e slots (logo + perfil)
187
+
188
+ Use `[groups]` para separar secoes por divisor, `badge` para selos e os slots
189
+ `[navbar-header]` / `[navbar-footer]` para projetar logo e perfil do usuario:
190
+
191
+ ```html
192
+ <tcloud-ui-navbar [groups]="groups" [logoSrc]="'logo.svg'" logoAlt="Logo" (onItemClick)="go($event)">
193
+ <tcloud-ui-navbar-footer
194
+ navbar-footer
195
+ avatarSrc="avatar.png"
196
+ name="Simone Garcia"
197
+ role="Operadora"
198
+ (onLogout)="logout()">
199
+ </tcloud-ui-navbar-footer>
200
+ </tcloud-ui-navbar>
201
+ ```
202
+
203
+ ```typescript
204
+ import { TCloudUiNavbarGroup } from 'tcloud-ui';
205
+
206
+ groups: TCloudUiNavbarGroup[] = [
207
+ {
208
+ items: [
209
+ { label: 'Pagina inicial', icon: 'fas fa-house', link: '/dashboard', active: true },
210
+ { label: 'Marketplace', icon: 'fas fa-cart-shopping', badge: 'Novo', submenu: [
211
+ { label: 'Agentes de IA', link: '/marketplace/ai-agents' }
212
+ ] }
213
+ ]
214
+ },
215
+ {
216
+ items: [
217
+ { label: 'Configuracoes', icon: 'fas fa-gear', link: '/settings' },
218
+ { label: 'Minha conta', icon: 'fas fa-user', link: '/account' }
219
+ ]
220
+ }
221
+ ];
222
+ ```
223
+
224
+ Quando `[groups]` nao e informado, `[menuItems]` continua funcionando como um
225
+ grupo unico (backward-compat). Os slots `[navbar-header]`/`[navbar-footer]` sao
226
+ opcionais: ficam ocultos quando nada e projetado.
@@ -9781,6 +9781,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
9781
9781
  type: Input
9782
9782
  }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }] } });
9783
9783
 
9784
+ class TCloudUiNavbarItemComponent {
9785
+ constructor() {
9786
+ /** Menu expandido (labels visíveis) x minimizado (só ícones). */
9787
+ this.isMenuExpanded = true;
9788
+ /** Nível de aninhamento — usado para indentação dos submenus. */
9789
+ this.level = 0;
9790
+ /** Emitido ao clicar num item folha (sem submenu). */
9791
+ this.onItemClick = output();
9792
+ }
9793
+ get hasSubmenu() {
9794
+ return !!this.item?.submenu && this.item.submenu.length > 0;
9795
+ }
9796
+ handleClick(ev) {
9797
+ if (this.item.href) {
9798
+ ev.preventDefault();
9799
+ window.open(this.item.href, '_blank');
9800
+ return;
9801
+ }
9802
+ if (this.hasSubmenu) {
9803
+ ev.preventDefault();
9804
+ this.item.open = !this.item.open;
9805
+ return;
9806
+ }
9807
+ this.onItemClick.emit(this.item);
9808
+ }
9809
+ /** Propaga o clique de um item filho para cima na recursão. */
9810
+ bubbleClick(item) {
9811
+ this.onItemClick.emit(item);
9812
+ }
9813
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9814
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiNavbarItemComponent, isStandalone: true, selector: "tcloud-ui-navbar-item", inputs: { item: "item", isMenuExpanded: "isMenuExpanded", level: "level" }, outputs: { onItemClick: "onItemClick" }, ngImport: i0, template: "<li\n class=\"tcloud-ui-navbar-item\"\n [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\"\n [class.tcloud-ui-navbar-subitem]=\"level > 0\"\n [class.has-submenu]=\"hasSubmenu\"\n [class.open]=\"item.open\">\n\n <a\n class=\"tcloud-ui-navbar-item-link\"\n [class.selected]=\"item.active\"\n [routerLink]=\"hasSubmenu ? null : (item.link ?? null)\"\n routerLinkActive=\"active\"\n [queryParams]=\"item.queryParams ?? null\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [title]=\"item.label\"\n (click)=\"handleClick($event)\">\n\n <div class=\"navbar-item-icon-container\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n </div>\n\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">\n <span class=\"navbar-item-text\">{{ item.label }}</span>\n @if (item.badge) {\n <span class=\"navbar-item-badge\">{{ item.badge }}</span>\n }\n @if (hasSubmenu) {\n <i class=\"navbar-item-chevron fas\"\n [class.fa-chevron-down]=\"item.open\"\n [class.fa-chevron-right]=\"!item.open\"></i>\n }\n </div>\n }\n </a>\n\n @if (hasSubmenu && isMenuExpanded) {\n <ul class=\"tcloud-ui-navbar-submenu\" [class.open]=\"item.open\">\n @for (child of item.submenu; track $index) {\n @if (child.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"child\"\n [isMenuExpanded]=\"isMenuExpanded\"\n [level]=\"level + 1\"\n (onItemClick)=\"bubbleClick($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n }\n</li>\n", styles: [":host{display:block}.tcloud-ui-navbar-item{list-style:none;margin:0;padding:0}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label{align-items:center;display:flex;gap:var(--size-4);justify-content:space-between;width:100%;min-width:0;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);transition:all .2s ease;min-height:var(--size-36);max-height:var(--size-36)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-badge{flex:0 0 auto;background-color:var(--c-primary-500);border-radius:var(--bor-radius-4);color:var(--c-neutral-50);font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:1;padding:var(--size-4) var(--size-8)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-chevron{flex:0 0 auto;font-size:var(--f-size-12);padding-right:var(--size-8);transition:transform .2s ease}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:hover,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:focus{color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:hover .navbar-item-icon-container,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:focus .navbar-item-icon-container{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected{background-color:var(--c-primary-300)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active .navbar-item-icon-container,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected .navbar-item-icon-container{background-color:transparent;color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active .navbar-item-label,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected .navbar-item-label{color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-navbar-item .tcloud-ui-navbar-submenu{display:none;flex-direction:column;gap:var(--size-4);list-style:none;margin:var(--size-4) 0 0 0;padding:0 0 0 var(--size-8)}.tcloud-ui-navbar-item .tcloud-ui-navbar-submenu.open{display:flex}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link{border-left:2px solid var(--c-neutral-200);border-radius:0 var(--bor-radius-4) var(--bor-radius-4) 0}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link .navbar-item-icon-container{display:none}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link .navbar-item-label{padding-left:var(--size-12)}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link.active,.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link.selected{border-left-color:var(--c-primary-500)}\n"], dependencies: [{ kind: "component", type: TCloudUiNavbarItemComponent, selector: "tcloud-ui-navbar-item", inputs: ["item", "isMenuExpanded", "level"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
9815
+ }
9816
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarItemComponent, decorators: [{
9817
+ type: Component,
9818
+ args: [{ selector: 'tcloud-ui-navbar-item', standalone: true, imports: [CommonModule, RouterModule], template: "<li\n class=\"tcloud-ui-navbar-item\"\n [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\"\n [class.tcloud-ui-navbar-subitem]=\"level > 0\"\n [class.has-submenu]=\"hasSubmenu\"\n [class.open]=\"item.open\">\n\n <a\n class=\"tcloud-ui-navbar-item-link\"\n [class.selected]=\"item.active\"\n [routerLink]=\"hasSubmenu ? null : (item.link ?? null)\"\n routerLinkActive=\"active\"\n [queryParams]=\"item.queryParams ?? null\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [title]=\"item.label\"\n (click)=\"handleClick($event)\">\n\n <div class=\"navbar-item-icon-container\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n </div>\n\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">\n <span class=\"navbar-item-text\">{{ item.label }}</span>\n @if (item.badge) {\n <span class=\"navbar-item-badge\">{{ item.badge }}</span>\n }\n @if (hasSubmenu) {\n <i class=\"navbar-item-chevron fas\"\n [class.fa-chevron-down]=\"item.open\"\n [class.fa-chevron-right]=\"!item.open\"></i>\n }\n </div>\n }\n </a>\n\n @if (hasSubmenu && isMenuExpanded) {\n <ul class=\"tcloud-ui-navbar-submenu\" [class.open]=\"item.open\">\n @for (child of item.submenu; track $index) {\n @if (child.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"child\"\n [isMenuExpanded]=\"isMenuExpanded\"\n [level]=\"level + 1\"\n (onItemClick)=\"bubbleClick($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n }\n</li>\n", styles: [":host{display:block}.tcloud-ui-navbar-item{list-style:none;margin:0;padding:0}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label{align-items:center;display:flex;gap:var(--size-4);justify-content:space-between;width:100%;min-width:0;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);transition:all .2s ease;min-height:var(--size-36);max-height:var(--size-36)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-badge{flex:0 0 auto;background-color:var(--c-primary-500);border-radius:var(--bor-radius-4);color:var(--c-neutral-50);font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:1;padding:var(--size-4) var(--size-8)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link .navbar-item-label .navbar-item-chevron{flex:0 0 auto;font-size:var(--f-size-12);padding-right:var(--size-8);transition:transform .2s ease}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:hover,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:focus{color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:hover .navbar-item-icon-container,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link:focus .navbar-item-icon-container{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected{background-color:var(--c-primary-300)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active .navbar-item-icon-container,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected .navbar-item-icon-container{background-color:transparent;color:var(--c-primary-500)}.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.active .navbar-item-label,.tcloud-ui-navbar-item .tcloud-ui-navbar-item-link.selected .navbar-item-label{color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-navbar-item .tcloud-ui-navbar-submenu{display:none;flex-direction:column;gap:var(--size-4);list-style:none;margin:var(--size-4) 0 0 0;padding:0 0 0 var(--size-8)}.tcloud-ui-navbar-item .tcloud-ui-navbar-submenu.open{display:flex}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link{border-left:2px solid var(--c-neutral-200);border-radius:0 var(--bor-radius-4) var(--bor-radius-4) 0}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link .navbar-item-icon-container{display:none}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link .navbar-item-label{padding-left:var(--size-12)}.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link.active,.tcloud-ui-navbar-item.tcloud-ui-navbar-subitem .tcloud-ui-navbar-item-link.selected{border-left-color:var(--c-primary-500)}\n"] }]
9819
+ }], propDecorators: { item: [{
9820
+ type: Input
9821
+ }], isMenuExpanded: [{
9822
+ type: Input
9823
+ }], level: [{
9824
+ type: Input
9825
+ }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }] } });
9826
+
9827
+ class TCloudUiNavbarComponent {
9828
+ constructor() {
9829
+ /** Itens do menu (data-driven). Submenu é renderizado recursivamente. */
9830
+ this.menuItems = [];
9831
+ /**
9832
+ * Grupos de itens separados por divisor. Quando informado, tem precedência
9833
+ * sobre `menuItems`. Use para reproduzir as seções do layout (primária,
9834
+ * secundária, etc.).
9835
+ */
9836
+ this.groups = [];
9837
+ /** Menu expandido (labels visíveis) x minimizado (só ícones). */
9838
+ this.isMenuExpanded = true;
9839
+ /** Exibe o botão interno de minimizar/expandir. */
9840
+ this.showToggle = true;
9841
+ /** Caminho da imagem do logo exibido no header (tema claro). */
9842
+ this.logoSrc = 'https://tcloud.totvs.com.br/plataforma/assets/img/totvs-logo-black.svg';
9843
+ /**
9844
+ * Caminho da imagem do logo para o tema escuro (`body.tc-dark`). Quando
9845
+ * informado, o header alterna automaticamente entre `logoSrc` (claro) e
9846
+ * `logoSrcDark` (escuro).
9847
+ */
9848
+ this.logoSrcDark = 'https://tcloud.totvs.com.br/plataforma/assets/img/totvs-logo-white.svg';
9849
+ /** Texto alternativo do logo. */
9850
+ this.logoAlt = 'Logo';
9851
+ /** Emitido quando o menu é expandido/minimizado. */
9852
+ this.onExpandChange = output();
9853
+ /** Emitido ao clicar num item folha (sem submenu). */
9854
+ this.onItemClick = output();
9855
+ }
9856
+ /**
9857
+ * Grupos efetivamente renderizados: usa `groups` quando informado; caso
9858
+ * contrário embrulha `menuItems` num único grupo (backward-compat).
9859
+ */
9860
+ get resolvedGroups() {
9861
+ if (this.groups.length > 0) {
9862
+ return this.groups;
9863
+ }
9864
+ return this.menuItems.length > 0 ? [{ items: this.menuItems }] : [];
9865
+ }
9866
+ handleExpand() {
9867
+ this.isMenuExpanded = !this.isMenuExpanded;
9868
+ this.onExpandChange.emit(this.isMenuExpanded);
9869
+ }
9870
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9871
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiNavbarComponent, isStandalone: true, selector: "tcloud-ui-navbar", inputs: { menuItems: "menuItems", groups: "groups", isMenuExpanded: "isMenuExpanded", showToggle: "showToggle", logoSrc: "logoSrc", logoSrcDark: "logoSrcDark", logoAlt: "logoAlt" }, outputs: { onExpandChange: "onExpandChange", onItemClick: "onItemClick" }, ngImport: i0, template: "<nav class=\"tcloud-ui-navbar\" [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\">\n\n <!-- Header (logo): via [logoSrc]/[logoSrcDark] ou conte\u00FAdo em [navbar-header]. -->\n <div class=\"tcloud-ui-navbar-header\">\n @if (logoSrc) {\n <img class=\"tcloud-ui-navbar-logo\"\n [class.tcloud-ui-navbar-logo--light]=\"!!logoSrcDark\"\n [src]=\"logoSrc\" [alt]=\"logoAlt\" />\n }\n @if (logoSrcDark) {\n <img class=\"tcloud-ui-navbar-logo tcloud-ui-navbar-logo--dark\"\n [src]=\"logoSrcDark\" [alt]=\"logoAlt\" />\n }\n <ng-content select=\"[navbar-header]\"></ng-content>\n </div>\n\n <!-- Conte\u00FAdo rol\u00E1vel: grupos separados por divisor + toggle de minimizar. -->\n <div class=\"tcloud-ui-navbar-content\">\n\n\n @if (showToggle) {\n <ul class=\"tcloud-ui-navbar-list tcloud-ui-navbar-toggle-list\">\n <li class=\"tcloud-ui-navbar-item tcloud-ui-navbar-toggle\">\n <a class=\"tcloud-ui-navbar-item-link\"\n (click)=\"handleExpand()\"\n [title]=\"isMenuExpanded ? 'Minimizar' : 'Expandir'\">\n <div class=\"navbar-item-icon-container\">\n <i class=\"fa-light\"\n [class.fa-arrow-left-to-line]=\"isMenuExpanded\"\n [class.fa-arrow-right-to-line]=\"!isMenuExpanded\"></i>\n </div>\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">Minimizar</div>\n }\n </a>\n </li>\n </ul>\n }\n\n\n @for (group of resolvedGroups; track $index; let last = $last) {\n <ul class=\"tcloud-ui-navbar-list\">\n @if (group.label && isMenuExpanded) {\n <li class=\"tcloud-ui-navbar-group-label\">{{ group.label }}</li>\n }\n @for (item of group.items; track $index) {\n @if (item.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"item\"\n [isMenuExpanded]=\"isMenuExpanded\"\n (onItemClick)=\"onItemClick.emit($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n\n @if (!last || showToggle) {\n <hr class=\"tcloud-ui-navbar-divider\" />\n }\n }\n\n \n </div>\n\n <!-- Footer (perfil/logout) \u2014 projetado pelo consumidor via [navbar-footer]. -->\n <div class=\"tcloud-ui-navbar-footer\">\n <ng-content select=\"[navbar-footer]\"></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%}.tcloud-ui-navbar{box-sizing:border-box;color:var(--c-neutral-700);display:flex;flex-direction:column;height:100%;margin:var(--size-0);padding:var(--size-0);transition:width .2s ease;width:var(--size-48)}.tcloud-ui-navbar.tcloud-ui-navbar-expanded{width:15.625rem}.tcloud-ui-navbar .tcloud-ui-navbar-header{flex:0 0 auto;align-items:center;display:flex;min-height:var(--size-56, 56px);overflow:hidden;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-header:empty{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo{display:block;flex:0 0 auto;width:8.5rem;height:auto;transition:width .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo--dark{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--light{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--dark{display:block}.tcloud-ui-navbar .tcloud-ui-navbar-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--size-8);overflow:hidden auto;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-content::-webkit-scrollbar{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-list{display:flex;flex-direction:column;gap:var(--size-8);list-style:none;margin:var(--size-0);padding:var(--size-0)}.tcloud-ui-navbar .tcloud-ui-navbar-group-label{color:var(--c-neutral-500);font-family:var(--f-family);font-size:var(--f-size-12);font-weight:var(--f-weight-700);padding:0 var(--size-8);text-transform:uppercase}.tcloud-ui-navbar .tcloud-ui-navbar-divider{border:0;border-top:1px solid var(--c-neutral-200);margin:var(--size-0);width:100%}.tcloud-ui-navbar .tcloud-ui-navbar-toggle{list-style:none;margin:0;padding:0}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;font-family:var(--f-family);text-decoration:none;transition:all .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link .navbar-item-icon-container{align-content:center;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);text-align:center;transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link .navbar-item-label{align-items:center;display:flex;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);min-height:var(--size-36);max-height:var(--size-36)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:hover,.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:focus{color:var(--c-primary-500)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:hover .navbar-item-icon-container,.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:focus .navbar-item-icon-container{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tcloud-ui-navbar .tcloud-ui-navbar-footer{flex:0 0 auto;border-top:1px solid var(--c-neutral-200);padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TCloudUiNavbarItemComponent, selector: "tcloud-ui-navbar-item", inputs: ["item", "isMenuExpanded", "level"], outputs: ["onItemClick"] }] }); }
9872
+ }
9873
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarComponent, decorators: [{
9874
+ type: Component,
9875
+ args: [{ selector: 'tcloud-ui-navbar', standalone: true, imports: [CommonModule, TCloudUiNavbarItemComponent], template: "<nav class=\"tcloud-ui-navbar\" [class.tcloud-ui-navbar-expanded]=\"isMenuExpanded\">\n\n <!-- Header (logo): via [logoSrc]/[logoSrcDark] ou conte\u00FAdo em [navbar-header]. -->\n <div class=\"tcloud-ui-navbar-header\">\n @if (logoSrc) {\n <img class=\"tcloud-ui-navbar-logo\"\n [class.tcloud-ui-navbar-logo--light]=\"!!logoSrcDark\"\n [src]=\"logoSrc\" [alt]=\"logoAlt\" />\n }\n @if (logoSrcDark) {\n <img class=\"tcloud-ui-navbar-logo tcloud-ui-navbar-logo--dark\"\n [src]=\"logoSrcDark\" [alt]=\"logoAlt\" />\n }\n <ng-content select=\"[navbar-header]\"></ng-content>\n </div>\n\n <!-- Conte\u00FAdo rol\u00E1vel: grupos separados por divisor + toggle de minimizar. -->\n <div class=\"tcloud-ui-navbar-content\">\n\n\n @if (showToggle) {\n <ul class=\"tcloud-ui-navbar-list tcloud-ui-navbar-toggle-list\">\n <li class=\"tcloud-ui-navbar-item tcloud-ui-navbar-toggle\">\n <a class=\"tcloud-ui-navbar-item-link\"\n (click)=\"handleExpand()\"\n [title]=\"isMenuExpanded ? 'Minimizar' : 'Expandir'\">\n <div class=\"navbar-item-icon-container\">\n <i class=\"fa-light\"\n [class.fa-arrow-left-to-line]=\"isMenuExpanded\"\n [class.fa-arrow-right-to-line]=\"!isMenuExpanded\"></i>\n </div>\n @if (isMenuExpanded) {\n <div class=\"navbar-item-label\">Minimizar</div>\n }\n </a>\n </li>\n </ul>\n }\n\n\n @for (group of resolvedGroups; track $index; let last = $last) {\n <ul class=\"tcloud-ui-navbar-list\">\n @if (group.label && isMenuExpanded) {\n <li class=\"tcloud-ui-navbar-group-label\">{{ group.label }}</li>\n }\n @for (item of group.items; track $index) {\n @if (item.enable !== false) {\n <tcloud-ui-navbar-item\n [item]=\"item\"\n [isMenuExpanded]=\"isMenuExpanded\"\n (onItemClick)=\"onItemClick.emit($event)\">\n </tcloud-ui-navbar-item>\n }\n }\n </ul>\n\n @if (!last || showToggle) {\n <hr class=\"tcloud-ui-navbar-divider\" />\n }\n }\n\n \n </div>\n\n <!-- Footer (perfil/logout) \u2014 projetado pelo consumidor via [navbar-footer]. -->\n <div class=\"tcloud-ui-navbar-footer\">\n <ng-content select=\"[navbar-footer]\"></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%}.tcloud-ui-navbar{box-sizing:border-box;color:var(--c-neutral-700);display:flex;flex-direction:column;height:100%;margin:var(--size-0);padding:var(--size-0);transition:width .2s ease;width:var(--size-48)}.tcloud-ui-navbar.tcloud-ui-navbar-expanded{width:15.625rem}.tcloud-ui-navbar .tcloud-ui-navbar-header{flex:0 0 auto;align-items:center;display:flex;min-height:var(--size-56, 56px);overflow:hidden;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-header:empty{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo{display:block;flex:0 0 auto;width:8.5rem;height:auto;transition:width .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-header .tcloud-ui-navbar-logo--dark{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--light{display:none}:host-context(.tc-dark) .tcloud-ui-navbar .tcloud-ui-navbar-logo--dark{display:block}.tcloud-ui-navbar .tcloud-ui-navbar-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--size-8);overflow:hidden auto;padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-content::-webkit-scrollbar{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-list{display:flex;flex-direction:column;gap:var(--size-8);list-style:none;margin:var(--size-0);padding:var(--size-0)}.tcloud-ui-navbar .tcloud-ui-navbar-group-label{color:var(--c-neutral-500);font-family:var(--f-family);font-size:var(--f-size-12);font-weight:var(--f-weight-700);padding:0 var(--size-8);text-transform:uppercase}.tcloud-ui-navbar .tcloud-ui-navbar-divider{border:0;border-top:1px solid var(--c-neutral-200);margin:var(--size-0);width:100%}.tcloud-ui-navbar .tcloud-ui-navbar-toggle{list-style:none;margin:0;padding:0}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;font-family:var(--f-family);text-decoration:none;transition:all .2s ease}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link .navbar-item-icon-container{align-content:center;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);text-align:center;transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link .navbar-item-label{align-items:center;display:flex;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);min-height:var(--size-36);max-height:var(--size-36)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:hover,.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:focus{color:var(--c-primary-500)}.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:hover .navbar-item-icon-container,.tcloud-ui-navbar .tcloud-ui-navbar-toggle .tcloud-ui-navbar-item-link:focus .navbar-item-icon-container{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tcloud-ui-navbar .tcloud-ui-navbar-footer{flex:0 0 auto;border-top:1px solid var(--c-neutral-200);padding:var(--size-8)}.tcloud-ui-navbar .tcloud-ui-navbar-footer:empty{display:none}\n"] }]
9876
+ }], propDecorators: { menuItems: [{
9877
+ type: Input
9878
+ }], groups: [{
9879
+ type: Input
9880
+ }], isMenuExpanded: [{
9881
+ type: Input
9882
+ }], showToggle: [{
9883
+ type: Input
9884
+ }], logoSrc: [{
9885
+ type: Input
9886
+ }], logoSrcDark: [{
9887
+ type: Input
9888
+ }], logoAlt: [{
9889
+ type: Input
9890
+ }], onExpandChange: [{ type: i0.Output, args: ["onExpandChange"] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }] } });
9891
+
9892
+ /**
9893
+ * Rodapé de perfil do `tcloud-ui-navbar`: avatar, nome, papel e botão de sair.
9894
+ *
9895
+ * Projetado no slot `[navbar-footer]` do navbar. Respeita o modo minimizado
9896
+ * (`isMenuExpanded = false`), quando só o avatar é exibido.
9897
+ */
9898
+ class TCloudUiNavbarFooterComponent {
9899
+ constructor() {
9900
+ /** Texto alternativo do avatar. */
9901
+ this.avatarAlt = '';
9902
+ /** Nome do usuário. */
9903
+ this.name = '';
9904
+ /** Papel/subtítulo do usuário (ex.: 'Operadora'). */
9905
+ this.role = '';
9906
+ /** Menu expandido: mostra nome/papel e o botão de sair. */
9907
+ this.isMenuExpanded = true;
9908
+ /** Exibe o botão de sair. */
9909
+ this.showLogout = true;
9910
+ /** Título/tooltip do botão de sair. */
9911
+ this.logoutTitle = 'Sair';
9912
+ /** Emitido ao clicar no botão de sair. */
9913
+ this.onLogout = output();
9914
+ }
9915
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9916
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiNavbarFooterComponent, isStandalone: true, selector: "tcloud-ui-navbar-footer", inputs: { avatarSrc: "avatarSrc", avatarAlt: "avatarAlt", name: "name", role: "role", isMenuExpanded: "isMenuExpanded", showLogout: "showLogout", logoutTitle: "logoutTitle" }, outputs: { onLogout: "onLogout" }, ngImport: i0, template: "@if (avatarSrc) {\n <img class=\"tcloud-ui-navbar-footer-avatar\" [src]=\"avatarSrc\" [alt]=\"avatarAlt\" />\n}\n\n@if (isMenuExpanded) {\n <div class=\"tcloud-ui-navbar-footer-info\">\n <strong>{{ name }}</strong>\n <span>{{ role }}</span>\n </div>\n\n @if (showLogout) {\n <button type=\"button\"\n class=\"tcloud-ui-navbar-footer-logout\"\n [title]=\"logoutTitle\"\n (click)=\"onLogout.emit()\">\n <i class=\"fas fa-arrow-right-from-bracket\"></i>\n </button>\n }\n}\n", styles: [":host{align-items:center;display:flex;font-family:var(--f-family);gap:var(--size-8);width:100%}.tcloud-ui-navbar-footer-avatar{border-radius:50%;flex:0 0 auto;height:var(--size-36);width:var(--size-36);object-fit:cover}.tcloud-ui-navbar-footer-info{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tcloud-ui-navbar-footer-info strong{color:var(--c-neutral-700);font-size:var(--f-size-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-footer-info span{color:var(--c-neutral-500);font-size:var(--f-size-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-footer-logout{background:transparent;border:0;color:var(--c-danger-500);cursor:pointer;flex:0 0 auto;font-size:var(--f-size-20);padding:var(--size-4);transition:color .2s ease}.tcloud-ui-navbar-footer-logout:hover,.tcloud-ui-navbar-footer-logout:focus{color:var(--c-danger-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
9917
+ }
9918
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarFooterComponent, decorators: [{
9919
+ type: Component,
9920
+ args: [{ selector: 'tcloud-ui-navbar-footer', standalone: true, imports: [CommonModule], template: "@if (avatarSrc) {\n <img class=\"tcloud-ui-navbar-footer-avatar\" [src]=\"avatarSrc\" [alt]=\"avatarAlt\" />\n}\n\n@if (isMenuExpanded) {\n <div class=\"tcloud-ui-navbar-footer-info\">\n <strong>{{ name }}</strong>\n <span>{{ role }}</span>\n </div>\n\n @if (showLogout) {\n <button type=\"button\"\n class=\"tcloud-ui-navbar-footer-logout\"\n [title]=\"logoutTitle\"\n (click)=\"onLogout.emit()\">\n <i class=\"fas fa-arrow-right-from-bracket\"></i>\n </button>\n }\n}\n", styles: [":host{align-items:center;display:flex;font-family:var(--f-family);gap:var(--size-8);width:100%}.tcloud-ui-navbar-footer-avatar{border-radius:50%;flex:0 0 auto;height:var(--size-36);width:var(--size-36);object-fit:cover}.tcloud-ui-navbar-footer-info{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tcloud-ui-navbar-footer-info strong{color:var(--c-neutral-700);font-size:var(--f-size-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-footer-info span{color:var(--c-neutral-500);font-size:var(--f-size-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-navbar-footer-logout{background:transparent;border:0;color:var(--c-danger-500);cursor:pointer;flex:0 0 auto;font-size:var(--f-size-20);padding:var(--size-4);transition:color .2s ease}.tcloud-ui-navbar-footer-logout:hover,.tcloud-ui-navbar-footer-logout:focus{color:var(--c-danger-400)}\n"] }]
9921
+ }], propDecorators: { avatarSrc: [{
9922
+ type: Input
9923
+ }], avatarAlt: [{
9924
+ type: Input
9925
+ }], name: [{
9926
+ type: Input
9927
+ }], role: [{
9928
+ type: Input
9929
+ }], isMenuExpanded: [{
9930
+ type: Input
9931
+ }], showLogout: [{
9932
+ type: Input
9933
+ }], logoutTitle: [{
9934
+ type: Input
9935
+ }], onLogout: [{ type: i0.Output, args: ["onLogout"] }] } });
9936
+
9784
9937
  class TCloudUiTabGroupComponent {
9785
9938
  constructor() {
9786
9939
  this.isCarouselOverflowed = false;
@@ -10416,6 +10569,9 @@ const COMPONENTS = [
10416
10569
  TCloudUiSubNavbarComponent,
10417
10570
  TCloudUiSubNavbarGroupComponent,
10418
10571
  TCloudUiSubNavbarItemComponent,
10572
+ TCloudUiNavbarComponent,
10573
+ TCloudUiNavbarItemComponent,
10574
+ TCloudUiNavbarFooterComponent,
10419
10575
  TCloudUiTabGroupComponent,
10420
10576
  TCloudUiTabItemComponent,
10421
10577
  TCloudUiWizardStepsComponent,
@@ -10553,6 +10709,9 @@ class TCloudUiModule {
10553
10709
  TCloudUiSubNavbarComponent,
10554
10710
  TCloudUiSubNavbarGroupComponent,
10555
10711
  TCloudUiSubNavbarItemComponent,
10712
+ TCloudUiNavbarComponent,
10713
+ TCloudUiNavbarItemComponent,
10714
+ TCloudUiNavbarFooterComponent,
10556
10715
  TCloudUiTabGroupComponent,
10557
10716
  TCloudUiTabItemComponent,
10558
10717
  TCloudUiWizardStepsComponent,
@@ -10652,6 +10811,9 @@ class TCloudUiModule {
10652
10811
  TCloudUiSubNavbarComponent,
10653
10812
  TCloudUiSubNavbarGroupComponent,
10654
10813
  TCloudUiSubNavbarItemComponent,
10814
+ TCloudUiNavbarComponent,
10815
+ TCloudUiNavbarItemComponent,
10816
+ TCloudUiNavbarFooterComponent,
10655
10817
  TCloudUiTabGroupComponent,
10656
10818
  TCloudUiTabItemComponent,
10657
10819
  TCloudUiWizardStepsComponent,
@@ -10725,6 +10887,9 @@ class TCloudUiModule {
10725
10887
  TCloudUiSubNavbarComponent,
10726
10888
  TCloudUiSubNavbarGroupComponent,
10727
10889
  TCloudUiSubNavbarItemComponent,
10890
+ TCloudUiNavbarComponent,
10891
+ TCloudUiNavbarItemComponent,
10892
+ TCloudUiNavbarFooterComponent,
10728
10893
  TCloudUiTabItemComponent,
10729
10894
  TCloudUiBreadcrumbComponent,
10730
10895
  TCloudUiSearchInputComponent,
@@ -12740,5 +12905,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
12740
12905
  * Generated bundle index. Do not edit.
12741
12906
  */
12742
12907
 
12743
- export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize$1 as MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus$1 as ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCarouselComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDialogComponent, TCloudUiDialogEventsEnum, TCloudUiDialogHostComponent, TCloudUiDialogModel, TCloudUiDialogService, TCloudUiDialogStatusEnum, TCloudUiDialogTextConfirmationEnum, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiDropdownMultiLevelComponent, TCloudUiEditorComponent, TCloudUiEditorDiffComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMarkReadmeComponent, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiPopoverComponent, TCloudUiProgressBarComponent, TCloudUiProgressStatusBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
12908
+ export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize$1 as MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus$1 as ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCarouselComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDialogComponent, TCloudUiDialogEventsEnum, TCloudUiDialogHostComponent, TCloudUiDialogModel, TCloudUiDialogService, TCloudUiDialogStatusEnum, TCloudUiDialogTextConfirmationEnum, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiDropdownMultiLevelComponent, TCloudUiEditorComponent, TCloudUiEditorDiffComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMarkReadmeComponent, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNavbarComponent, TCloudUiNavbarFooterComponent, TCloudUiNavbarItemComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiPopoverComponent, TCloudUiProgressBarComponent, TCloudUiProgressStatusBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
12744
12909
  //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map