@dev-tcloud/tcloud-ui 7.3.2 → 7.3.4
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,70 @@
|
|
|
1
|
+
# Footer
|
|
2
|
+
|
|
3
|
+
## Características
|
|
4
|
+
|
|
5
|
+
O `TCloudUiFooterComponent` é um componente Angular standalone que exibe o rodapé padrão dos produtos TOTVS Cloud, com a linha de copyright e o ano corrente calculado automaticamente.
|
|
6
|
+
|
|
7
|
+
Características principais:
|
|
8
|
+
|
|
9
|
+
- Ano corrente calculado automaticamente via `new Date().getFullYear()`.
|
|
10
|
+
- Nome da empresa configurável pelo input `companyName`.
|
|
11
|
+
- Posicionamento fixo no fim da viewport por padrão (`fixed`), com opção de desligar para uso inline.
|
|
12
|
+
- Cores e tipografia baseadas em tokens `--c-*` / `--font-family`, com suporte a dark mode.
|
|
13
|
+
|
|
14
|
+
## Instalação
|
|
15
|
+
|
|
16
|
+
Importe o `TCloudUiFooterComponent` no componente standalone:
|
|
17
|
+
|
|
18
|
+
```typescript
|
|
19
|
+
import { TCloudUiFooterComponent } from 'tcloud-ui';
|
|
20
|
+
|
|
21
|
+
@Component({
|
|
22
|
+
selector: 'app-exemplo',
|
|
23
|
+
standalone: true,
|
|
24
|
+
imports: [TCloudUiFooterComponent],
|
|
25
|
+
template: '...'
|
|
26
|
+
})
|
|
27
|
+
export class ExemploComponent {}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Consumidores baseados em `NgModule` recebem o componente automaticamente ao importar o `TCloudUiModule`.
|
|
31
|
+
|
|
32
|
+
## Propriedades (API)
|
|
33
|
+
|
|
34
|
+
### Inputs
|
|
35
|
+
|
|
36
|
+
| Nome | Tipo | Descrição | Valor Default |
|
|
37
|
+
|------|------|-----------|---------------|
|
|
38
|
+
| companyName | `string` | Nome exibido em destaque na linha de copyright. | `'TOTVS Cloud'` |
|
|
39
|
+
| fixed | `boolean` | Fixa o rodapé no fim da viewport (comportamento do `<tc-footer>` legado). Quando `false`, o rodapé é renderizado no fluxo normal. | `true` |
|
|
40
|
+
|
|
41
|
+
### Outputs
|
|
42
|
+
|
|
43
|
+
Este componente não expõe outputs.
|
|
44
|
+
|
|
45
|
+
## Exemplos de Uso
|
|
46
|
+
|
|
47
|
+
### Uso Básico
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<tcloud-ui-footer></tcloud-ui-footer>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Nome customizado e rodapé não fixo
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<tcloud-ui-footer
|
|
57
|
+
[companyName]="'Minha Empresa'"
|
|
58
|
+
[fixed]="false">
|
|
59
|
+
</tcloud-ui-footer>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Substituindo o `<tc-footer>` legado
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<!-- Antes -->
|
|
66
|
+
<tc-footer></tc-footer>
|
|
67
|
+
|
|
68
|
+
<!-- Depois -->
|
|
69
|
+
<tcloud-ui-footer></tcloud-ui-footer>
|
|
70
|
+
```
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# Top Navigation
|
|
2
|
+
|
|
3
|
+
## Características
|
|
4
|
+
|
|
5
|
+
O `TCloudUiTopNavigationComponent` é um componente Angular standalone que fornece a **casca** da barra de navegação superior dos produtos TOTVS Cloud. Ele substitui o antigo `<tc-top-navigation>`.
|
|
6
|
+
|
|
7
|
+
Diferente do componente legado (que embutia conta, dropdowns e botões fixos), esta versão é intencionalmente **vazia**: a barra apenas define o contêiner visual (fundo, borda inferior, altura e posicionamento fixo) e projeta o conteúdo do consumidor via `<ng-content>`. Todos os botões, ações, dropdowns e demais elementos ficam a cargo de quem consome o componente.
|
|
8
|
+
|
|
9
|
+
Características principais:
|
|
10
|
+
|
|
11
|
+
- Casca sem itens internos — o conteúdo é totalmente projetado pelo consumidor.
|
|
12
|
+
- Layout flex com dois grupos de alinhamento: por padrão o conteúdo é alinhado à **direita**; itens marcados com o atributo `start` são alinhados à **esquerda**.
|
|
13
|
+
- Posicionamento fixo no topo da viewport por padrão (`fixed`), com opção de desligar.
|
|
14
|
+
- Cores e bordas baseadas em tokens `--c-*`, com suporte a dark mode.
|
|
15
|
+
|
|
16
|
+
## Instalação
|
|
17
|
+
|
|
18
|
+
Importe o `TCloudUiTopNavigationComponent` no componente standalone:
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import { TCloudUiTopNavigationComponent } from 'tcloud-ui';
|
|
22
|
+
|
|
23
|
+
@Component({
|
|
24
|
+
selector: 'app-exemplo',
|
|
25
|
+
standalone: true,
|
|
26
|
+
imports: [TCloudUiTopNavigationComponent],
|
|
27
|
+
template: '...'
|
|
28
|
+
})
|
|
29
|
+
export class ExemploComponent {}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Consumidores baseados em `NgModule` recebem o componente automaticamente ao importar o `TCloudUiModule`.
|
|
33
|
+
|
|
34
|
+
## Propriedades (API)
|
|
35
|
+
|
|
36
|
+
### Inputs
|
|
37
|
+
|
|
38
|
+
| Nome | Tipo | Descrição | Valor Default |
|
|
39
|
+
|------|------|-----------|---------------|
|
|
40
|
+
| fixed | `boolean` | Fixa a barra no topo da viewport (comportamento do `<tc-top-navigation>` legado). Quando `false`, a barra é renderizada no fluxo normal. | `true` |
|
|
41
|
+
|
|
42
|
+
### Content projection
|
|
43
|
+
|
|
44
|
+
| Slot | Seletor | Descrição |
|
|
45
|
+
|------|---------|-----------|
|
|
46
|
+
| Esquerda | `[start]` | Elementos com o atributo `start` são alinhados à esquerda da barra. |
|
|
47
|
+
| Direita (default) | (padrão) | Demais elementos projetados são alinhados à direita da barra. |
|
|
48
|
+
|
|
49
|
+
### Outputs
|
|
50
|
+
|
|
51
|
+
Este componente não expõe outputs.
|
|
52
|
+
|
|
53
|
+
## Exemplos de Uso
|
|
54
|
+
|
|
55
|
+
### Uso Básico (tudo à direita)
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<tcloud-ui-top-navigation>
|
|
59
|
+
<button type="button" class="tc-btn tc-btn-square">Notas</button>
|
|
60
|
+
<button type="button" class="tc-btn tc-btn-square">Ações</button>
|
|
61
|
+
</tcloud-ui-top-navigation>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Item à esquerda e itens à direita
|
|
65
|
+
|
|
66
|
+
Use o atributo `start` para alinhar um elemento à esquerda; os demais permanecem à direita.
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<tcloud-ui-top-navigation>
|
|
70
|
+
<button start type="button" class="tc-btn tc-btn-square">Voltar</button>
|
|
71
|
+
<button type="button" class="tc-btn tc-btn-square">Notas</button>
|
|
72
|
+
<button type="button" class="tc-btn tc-btn-square">Ações</button>
|
|
73
|
+
</tcloud-ui-top-navigation>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Substituindo o `<tc-top-navigation>` legado
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<!-- Antes -->
|
|
80
|
+
<tc-top-navigation></tc-top-navigation>
|
|
81
|
+
|
|
82
|
+
<!-- Depois: a barra vira a casca e o conteúdo é projetado -->
|
|
83
|
+
<tcloud-ui-top-navigation>
|
|
84
|
+
<!-- botões e ações do consumidor -->
|
|
85
|
+
</tcloud-ui-top-navigation>
|
|
86
|
+
```
|
|
@@ -6051,22 +6051,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6051
6051
|
class TCloudUiContainerContentComponent {
|
|
6052
6052
|
constructor(parentService) {
|
|
6053
6053
|
this.expanded = true;
|
|
6054
|
+
/** Padding-left quando o menu está expandido. Número é tratado como px. Default: 232px. */
|
|
6055
|
+
this.expandedPadding = '232px';
|
|
6056
|
+
/** Padding-left quando o menu está minimizado. Número é tratado como px. Default: 52px. */
|
|
6057
|
+
this.collapsedPadding = '52px';
|
|
6054
6058
|
this._containerService = parentService || inject(ContainerService);
|
|
6055
6059
|
effect(() => {
|
|
6056
6060
|
this.expanded = this._containerService.expanded_signal();
|
|
6057
6061
|
});
|
|
6058
6062
|
}
|
|
6063
|
+
/** Valor CSS do padding expandido (acrescenta `px` quando number). */
|
|
6064
|
+
get expandedPaddingCss() {
|
|
6065
|
+
return this.toCssLength(this.expandedPadding);
|
|
6066
|
+
}
|
|
6067
|
+
/** Valor CSS do padding minimizado (acrescenta `px` quando number). */
|
|
6068
|
+
get collapsedPaddingCss() {
|
|
6069
|
+
return this.toCssLength(this.collapsedPadding);
|
|
6070
|
+
}
|
|
6071
|
+
toCssLength(value) {
|
|
6072
|
+
return typeof value === 'number' ? `${value}px` : value;
|
|
6073
|
+
}
|
|
6059
6074
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiContainerContentComponent, deps: [{ token: ContainerService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6060
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TCloudUiContainerContentComponent, isStandalone: true, selector: "tcloud-ui-container-content", providers: [ContainerService], ngImport: i0, template: "\n<div class=\"tcloud-ui-container-content\"
|
|
6075
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TCloudUiContainerContentComponent, isStandalone: true, selector: "tcloud-ui-container-content", inputs: { expandedPadding: "expandedPadding", collapsedPadding: "collapsedPadding" }, providers: [ContainerService], ngImport: i0, template: "\n<div class=\"tcloud-ui-container-content\"\n [class.content-expanded]=\"expanded\"\n [class.content-not-expanded]=\"!expanded\"\n [style.--tc-content-padding-expanded]=\"expandedPaddingCss\"\n [style.--tc-content-padding-collapsed]=\"collapsedPaddingCss\">\n <ng-content></ng-content>\n</div>", styles: [":host{display:block;width:100%;max-width:100%;overflow-x:hidden}.tcloud-ui-container-content{flex:1;padding-left:var(--tc-content-padding-collapsed, 52px)}.content-expanded{padding-left:var(--tc-content-padding-expanded, 232px)}.content-not-expanded{padding-left:var(--tc-content-padding-collapsed, 52px)}\n", ":host{display:block}.tcloud-ui-container{display:flex;gap:24px}\n"] }); }
|
|
6061
6076
|
}
|
|
6062
6077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiContainerContentComponent, decorators: [{
|
|
6063
6078
|
type: Component,
|
|
6064
|
-
args: [{ selector: 'tcloud-ui-container-content', imports: [], providers: [ContainerService], template: "\n<div class=\"tcloud-ui-container-content\"
|
|
6079
|
+
args: [{ selector: 'tcloud-ui-container-content', imports: [], providers: [ContainerService], template: "\n<div class=\"tcloud-ui-container-content\"\n [class.content-expanded]=\"expanded\"\n [class.content-not-expanded]=\"!expanded\"\n [style.--tc-content-padding-expanded]=\"expandedPaddingCss\"\n [style.--tc-content-padding-collapsed]=\"collapsedPaddingCss\">\n <ng-content></ng-content>\n</div>", styles: [":host{display:block;width:100%;max-width:100%;overflow-x:hidden}.tcloud-ui-container-content{flex:1;padding-left:var(--tc-content-padding-collapsed, 52px)}.content-expanded{padding-left:var(--tc-content-padding-expanded, 232px)}.content-not-expanded{padding-left:var(--tc-content-padding-collapsed, 52px)}\n", ":host{display:block}.tcloud-ui-container{display:flex;gap:24px}\n"] }]
|
|
6065
6080
|
}], ctorParameters: () => [{ type: ContainerService, decorators: [{
|
|
6066
6081
|
type: Optional
|
|
6067
6082
|
}, {
|
|
6068
6083
|
type: SkipSelf
|
|
6069
|
-
}] }]
|
|
6084
|
+
}] }], propDecorators: { expandedPadding: [{
|
|
6085
|
+
type: Input
|
|
6086
|
+
}], collapsedPadding: [{
|
|
6087
|
+
type: Input
|
|
6088
|
+
}] } });
|
|
6070
6089
|
|
|
6071
6090
|
class TCloudUiBreadcrumbService {
|
|
6072
6091
|
constructor() {
|
|
@@ -9868,11 +9887,11 @@ class TCloudUiNavbarComponent {
|
|
|
9868
9887
|
this.onExpandChange.emit(this.isMenuExpanded);
|
|
9869
9888
|
}
|
|
9870
9889
|
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) {\n <hr class=\"tcloud-ui-navbar-divider\" />\n }\n }\n\n <!-- Footer (perfil/logout) projetado via [navbar-footer]: \u00FAltimo item da\n lista, faz parte do scroll do conte\u00FAdo (n\u00E3o fica fixo no rodap\u00E9). -->\n <hr class=\"tcloud-ui-navbar-divider tcloud-ui-navbar-footer-divider\" />\n <ul class=\"tcloud-ui-navbar-list tcloud-ui-navbar-footer-list\">\n <li class=\"tcloud-ui-navbar-footer-item\">\n <ng-content select=\"[navbar-footer]\"></ng-content>\n </li>\n </ul>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%}.tcloud-ui-navbar{box-sizing:border-box;border-right:1px solid var(--c-neutral-300);color:var(--c-neutral-700);display:flex;flex-direction:column;height:
|
|
9890
|
+
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) {\n <hr class=\"tcloud-ui-navbar-divider\" />\n }\n }\n\n <!-- Footer (perfil/logout) projetado via [navbar-footer]: \u00FAltimo item da\n lista, faz parte do scroll do conte\u00FAdo (n\u00E3o fica fixo no rodap\u00E9). -->\n <hr class=\"tcloud-ui-navbar-divider tcloud-ui-navbar-footer-divider\" />\n <ul class=\"tcloud-ui-navbar-list tcloud-ui-navbar-footer-list\">\n <li class=\"tcloud-ui-navbar-footer-item\">\n <ng-content select=\"[navbar-footer]\"></ng-content>\n </li>\n </ul>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%}.tcloud-ui-navbar{box-sizing:border-box;border-right:1px solid var(--c-neutral-300);color:var(--c-neutral-700);display:flex;flex-direction:column;height:calc(100vh - 35px);margin:var(--size-0);padding:var(--size-0);transition:width .2s ease;width:var(--size-52)}.tcloud-ui-navbar.tcloud-ui-navbar-expanded{width:256px}.tcloud-ui-navbar.tcloud-ui-navbar-expanded .tcloud-ui-navbar-header{overflow:visible}.tcloud-ui-navbar.tcloud-ui-navbar-expanded .tcloud-ui-navbar-header .tcloud-ui-navbar-logo{width:6.75rem}.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.9rem;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-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-100);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-item{display:flex;list-style:none;margin:var(--size-0);padding:var(--size-0)}.tcloud-ui-navbar .tcloud-ui-navbar-footer-item:empty{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-content:not(:has(.tcloud-ui-navbar-footer-item>*)) .tcloud-ui-navbar-footer-divider,.tcloud-ui-navbar .tcloud-ui-navbar-content:not(:has(.tcloud-ui-navbar-footer-item>*)) .tcloud-ui-navbar-footer-list{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TCloudUiNavbarItemComponent, selector: "tcloud-ui-navbar-item", inputs: ["item", "isMenuExpanded", "level"], outputs: ["onItemClick"] }] }); }
|
|
9872
9891
|
}
|
|
9873
9892
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiNavbarComponent, decorators: [{
|
|
9874
9893
|
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) {\n <hr class=\"tcloud-ui-navbar-divider\" />\n }\n }\n\n <!-- Footer (perfil/logout) projetado via [navbar-footer]: \u00FAltimo item da\n lista, faz parte do scroll do conte\u00FAdo (n\u00E3o fica fixo no rodap\u00E9). -->\n <hr class=\"tcloud-ui-navbar-divider tcloud-ui-navbar-footer-divider\" />\n <ul class=\"tcloud-ui-navbar-list tcloud-ui-navbar-footer-list\">\n <li class=\"tcloud-ui-navbar-footer-item\">\n <ng-content select=\"[navbar-footer]\"></ng-content>\n </li>\n </ul>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%}.tcloud-ui-navbar{box-sizing:border-box;border-right:1px solid var(--c-neutral-300);color:var(--c-neutral-700);display:flex;flex-direction:column;height:
|
|
9894
|
+
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) {\n <hr class=\"tcloud-ui-navbar-divider\" />\n }\n }\n\n <!-- Footer (perfil/logout) projetado via [navbar-footer]: \u00FAltimo item da\n lista, faz parte do scroll do conte\u00FAdo (n\u00E3o fica fixo no rodap\u00E9). -->\n <hr class=\"tcloud-ui-navbar-divider tcloud-ui-navbar-footer-divider\" />\n <ul class=\"tcloud-ui-navbar-list tcloud-ui-navbar-footer-list\">\n <li class=\"tcloud-ui-navbar-footer-item\">\n <ng-content select=\"[navbar-footer]\"></ng-content>\n </li>\n </ul>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%}.tcloud-ui-navbar{box-sizing:border-box;border-right:1px solid var(--c-neutral-300);color:var(--c-neutral-700);display:flex;flex-direction:column;height:calc(100vh - 35px);margin:var(--size-0);padding:var(--size-0);transition:width .2s ease;width:var(--size-52)}.tcloud-ui-navbar.tcloud-ui-navbar-expanded{width:256px}.tcloud-ui-navbar.tcloud-ui-navbar-expanded .tcloud-ui-navbar-header{overflow:visible}.tcloud-ui-navbar.tcloud-ui-navbar-expanded .tcloud-ui-navbar-header .tcloud-ui-navbar-logo{width:6.75rem}.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.9rem;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-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-100);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-item{display:flex;list-style:none;margin:var(--size-0);padding:var(--size-0)}.tcloud-ui-navbar .tcloud-ui-navbar-footer-item:empty{display:none}.tcloud-ui-navbar .tcloud-ui-navbar-content:not(:has(.tcloud-ui-navbar-footer-item>*)) .tcloud-ui-navbar-footer-divider,.tcloud-ui-navbar .tcloud-ui-navbar-content:not(:has(.tcloud-ui-navbar-footer-item>*)) .tcloud-ui-navbar-footer-list{display:none}\n"] }]
|
|
9876
9895
|
}], propDecorators: { menuItems: [{
|
|
9877
9896
|
type: Input
|
|
9878
9897
|
}], groups: [{
|