@dev-tcloud/tcloud-ui 7.3.3 → 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() {
|