@dev-tcloud/tcloud-ui 6.21.0 → 6.21.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/tcloud-ui-dropdown-multi-level.md +186 -0
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +93 -1
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/js/tcloud-ui-app.js +1 -1
- package/lib/_modules/tcloud-ui-dropdown-multi-level/tcloud-ui-dropdown-multi-level.component.d.ts +41 -0
- package/lib/_modules/tcloud-ui-dropdown-multi-level/tcloud-ui-dropdown-sub-menu/tcloud-ui-dropdown-sub-menu.component.d.ts +17 -0
- package/lib/revitalizacao/components/tc-rev-dropdown-multi-level/tc-rev-dropdown-multi-level.component.d.ts +3 -2
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
# Dropdown Multi Level
|
|
2
|
+
|
|
3
|
+
## Características
|
|
4
|
+
|
|
5
|
+
O componente `tcloud-ui-dropdown-multi-level` é um componente de seleção de opção a partir de uma estrutura de dados hierárquica (menu multi-nível). Ele permite aninhamento de opções e seleção em sub-menus.
|
|
6
|
+
|
|
7
|
+
## Instalação
|
|
8
|
+
|
|
9
|
+
Para utilizar o componente Dropdown Multi Level, importe o módulo `TCloudUiModule`:
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
import { TCloudUiModule } from '@tcloud-ui/lib';
|
|
13
|
+
import { Component } from '@angular/core';
|
|
14
|
+
|
|
15
|
+
@Component({
|
|
16
|
+
selector: 'app-example',
|
|
17
|
+
standalone: true,
|
|
18
|
+
imports: [TCloudUiModule],
|
|
19
|
+
template: `<tcloud-ui-dropdown-multi-level [menu]="menuOptions">Opções</tcloud-ui-dropdown-multi-level>`
|
|
20
|
+
})
|
|
21
|
+
export class ExampleComponent {}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Ou importe diretamente o componente e as interfaces de dados:
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import { TCloudUiDropdownMultiLevelComponent, MultiLevelDropdownOption, MultiLevelDropdownSize } from '@tcloud-ui/lib';
|
|
28
|
+
|
|
29
|
+
@Component({
|
|
30
|
+
selector: 'app-example',
|
|
31
|
+
standalone: true,
|
|
32
|
+
imports: [TCloudUiDropdownMultiLevelComponent],
|
|
33
|
+
template: `<tcloud-ui-dropdown-multi-level [menu]="menuOptions">Opções</tcloud-ui-dropdown-multi-level>`
|
|
34
|
+
})
|
|
35
|
+
export class ExampleComponent {}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Propriedades (API)
|
|
39
|
+
|
|
40
|
+
### Inputs
|
|
41
|
+
|
|
42
|
+
| Nome | Tipo | Descrição | Valor Default |
|
|
43
|
+
|------|------|-----------|---------------|
|
|
44
|
+
| `menu` | `MultiLevelDropdownOption[]` | **Obrigatório**. Estrutura de opções (nós principais e filhos) do menu | - |
|
|
45
|
+
| `subMenuPosition` | `'right' \| 'left'` | Posição de abertura do sub-menu em relação ao item pai | `'right'` |
|
|
46
|
+
| `disabled` | `boolean` | Desabilita interações com o dropdown | `false` |
|
|
47
|
+
| `size` | `MultiLevelDropdownSize` | Tamanho do dropdown: `'sm'` \| `'md'` \| `'lg'` | `'sm'` |
|
|
48
|
+
| `initialValue` | `MultiLevelDropdownOption \| null` | Valor pré-selecionado | `null` |
|
|
49
|
+
|
|
50
|
+
### Outputs
|
|
51
|
+
|
|
52
|
+
| Nome | Tipo de Evento | Descrição |
|
|
53
|
+
|------|----------------|-----------|
|
|
54
|
+
| `optionSelected` | `{ option: MultiLevelDropdownOption, parentOption: MultiLevelDropdownOption }` | Emitido quando uma opção é selecionada (apenas para itens que não possuem filhos) |
|
|
55
|
+
|
|
56
|
+
### Interfaces e Enums Exportados
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
export interface MultiLevelDropdownOption {
|
|
60
|
+
id?: any;
|
|
61
|
+
value: any;
|
|
62
|
+
displayValue: string;
|
|
63
|
+
disabled?: boolean;
|
|
64
|
+
children?: MultiLevelDropdownOption[];
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export enum MultiLevelDropdownSize {
|
|
68
|
+
sm = 'sm',
|
|
69
|
+
md = 'md',
|
|
70
|
+
lg = 'lg',
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Características Técnicas
|
|
75
|
+
|
|
76
|
+
- **Menu Hierárquico**: Suporte a opções com múltiplos níveis de aninhamento através da propriedade `children`.
|
|
77
|
+
- **Posicionamento de Submenu**: Permite abrir submenus para a esquerda (`left`) ou direita (`right`).
|
|
78
|
+
- **Seleção Restrita a Folhas**: Itens pai que possuem `children` não disparam evento de seleção e servem apenas para abrir submenus.
|
|
79
|
+
- **Transclusão de Conteúdo (Content Projection)**: O botão de gatilho do menu utiliza `ng-content`, permitindo a customização livre do conteúdo do botão.
|
|
80
|
+
- **Eventos com Contexto**: O evento `optionSelected` emite a opção final selecionada e também seu item pai direto.
|
|
81
|
+
|
|
82
|
+
## Exemplos de Uso
|
|
83
|
+
|
|
84
|
+
### Uso Básico
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
import { Component } from '@angular/core';
|
|
88
|
+
import { TCloudUiModule, MultiLevelDropdownOption } from '@tcloud-ui/lib';
|
|
89
|
+
import { CommonModule } from '@angular/common';
|
|
90
|
+
|
|
91
|
+
@Component({
|
|
92
|
+
selector: 'app-basic-multi-level-dropdown',
|
|
93
|
+
standalone: true,
|
|
94
|
+
imports: [CommonModule, TCloudUiModule],
|
|
95
|
+
template: `
|
|
96
|
+
<tcloud-ui-dropdown-multi-level
|
|
97
|
+
[menu]="menuOptions"
|
|
98
|
+
(optionSelected)="onSelected($event)">
|
|
99
|
+
Ações do Usuário
|
|
100
|
+
</tcloud-ui-dropdown-multi-level>
|
|
101
|
+
`
|
|
102
|
+
})
|
|
103
|
+
export class BasicMultiLevelDropdownComponent {
|
|
104
|
+
menuOptions: MultiLevelDropdownOption[] = [
|
|
105
|
+
{ value: 'home', displayValue: 'Início' },
|
|
106
|
+
{ value: 'settings', displayValue: 'Configurações' },
|
|
107
|
+
{
|
|
108
|
+
value: 'profile',
|
|
109
|
+
displayValue: 'Perfil',
|
|
110
|
+
children: [
|
|
111
|
+
{ value: 'view-profile', displayValue: 'Visualizar Perfil' },
|
|
112
|
+
{ value: 'edit-profile', displayValue: 'Editar Perfil' }
|
|
113
|
+
]
|
|
114
|
+
}
|
|
115
|
+
];
|
|
116
|
+
|
|
117
|
+
onSelected(event: { option: MultiLevelDropdownOption, parentOption: MultiLevelDropdownOption }) {
|
|
118
|
+
console.log('Selecionado:', event.option);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Sub-menu Posicionado à Esquerda
|
|
124
|
+
|
|
125
|
+
```typescript
|
|
126
|
+
import { Component } from '@angular/core';
|
|
127
|
+
import { TCloudUiModule, MultiLevelDropdownOption } from '@tcloud-ui/lib';
|
|
128
|
+
|
|
129
|
+
@Component({
|
|
130
|
+
selector: 'app-left-multi-level-dropdown',
|
|
131
|
+
standalone: true,
|
|
132
|
+
imports: [TCloudUiModule],
|
|
133
|
+
template: `
|
|
134
|
+
<tcloud-ui-dropdown-multi-level
|
|
135
|
+
[menu]="menuOptions"
|
|
136
|
+
subMenuPosition="left">
|
|
137
|
+
Menu à Esquerda
|
|
138
|
+
</tcloud-ui-dropdown-multi-level>
|
|
139
|
+
`
|
|
140
|
+
})
|
|
141
|
+
export class LeftMultiLevelDropdownComponent {
|
|
142
|
+
menuOptions: MultiLevelDropdownOption[] = [
|
|
143
|
+
{
|
|
144
|
+
value: 'export',
|
|
145
|
+
displayValue: 'Exportar Dados',
|
|
146
|
+
children: [
|
|
147
|
+
{ value: 'pdf', displayValue: 'Exportar como PDF' },
|
|
148
|
+
{ value: 'csv', displayValue: 'Exportar como CSV' }
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
];
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### Tamanhos Diferentes
|
|
156
|
+
|
|
157
|
+
```typescript
|
|
158
|
+
import { Component } from '@angular/core';
|
|
159
|
+
import { TCloudUiModule, MultiLevelDropdownOption, MultiLevelDropdownSize } from '@tcloud-ui/lib';
|
|
160
|
+
|
|
161
|
+
@Component({
|
|
162
|
+
selector: 'app-size-multi-level-dropdown',
|
|
163
|
+
standalone: true,
|
|
164
|
+
imports: [TCloudUiModule],
|
|
165
|
+
template: `
|
|
166
|
+
<tcloud-ui-dropdown-multi-level [menu]="menuOptions" [size]="sizes.sm">Pequeno</tcloud-ui-dropdown-multi-level>
|
|
167
|
+
<tcloud-ui-dropdown-multi-level [menu]="menuOptions" [size]="sizes.md">Médio</tcloud-ui-dropdown-multi-level>
|
|
168
|
+
<tcloud-ui-dropdown-multi-level [menu]="menuOptions" [size]="sizes.lg">Grande</tcloud-ui-dropdown-multi-level>
|
|
169
|
+
`
|
|
170
|
+
})
|
|
171
|
+
export class SizeMultiLevelDropdownComponent {
|
|
172
|
+
sizes = MultiLevelDropdownSize;
|
|
173
|
+
menuOptions: MultiLevelDropdownOption[] = [
|
|
174
|
+
{ value: '1', displayValue: 'Opção 1' }
|
|
175
|
+
];
|
|
176
|
+
}
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
## Acessibilidade
|
|
180
|
+
|
|
181
|
+
- O componente escuta eventos de clique no documento (`document:click`) para fechar o menu automaticamente caso o clique ocorra fora de seus limites (click-outside).
|
|
182
|
+
|
|
183
|
+
## Compatibilidade
|
|
184
|
+
|
|
185
|
+
- **Angular**: 17+ (suporta control flow blocks como `@if` e `@for`, além de signal inputs)
|
|
186
|
+
- **Browsers**: Todos os navegadores modernos
|
|
@@ -9829,6 +9829,98 @@ function provideTCloudUi(config) {
|
|
|
9829
9829
|
return makeEnvironmentProviders(providers);
|
|
9830
9830
|
}
|
|
9831
9831
|
|
|
9832
|
+
class TCloudUiDropdownSubMenuComponent {
|
|
9833
|
+
constructor() {
|
|
9834
|
+
this.items = input.required();
|
|
9835
|
+
this.position = input.required();
|
|
9836
|
+
this.parentOffsetTop = input.required();
|
|
9837
|
+
this.selectedOption = input();
|
|
9838
|
+
this.onOptionSelected = output();
|
|
9839
|
+
}
|
|
9840
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TCloudUiDropdownSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9841
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: TCloudUiDropdownSubMenuComponent, isStandalone: true, selector: "tcloud-ui-dropdown-sub-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, parentOffsetTop: { classPropertyName: "parentOffsetTop", publicName: "parentOffsetTop", isSignal: true, isRequired: true, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionSelected: "onOptionSelected" }, ngImport: i0, template: "<ul\n class=\"sub-menu\"\n [ngClass]=\"this.position()\"\n [style.top.px]=\"this.parentOffsetTop()\">\n @for (item of this.items(); track item.value)\n {\n <li\n class=\"sub-menu-item\"\n [class.selected]=\"this.selectedOption()?.value === item.value\"\n (click)=\"this.onOptionSelected.emit(item)\">\n {{ item.displayValue }}\n @if (this.selectedOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n @if (item.children?.length)\n {\n <tcloud-ui-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"position()\"\n [parentOffsetTop]=\"0\"\n [selectedOption]=\"this.selectedOption()\">\n </tcloud-ui-dropdown-sub-menu>\n }\n </li>\n }\n</ul>\n", styles: [".sub-menu{position:absolute;min-width:160px;background:#fff;box-shadow:var(--shadow-md);z-index:1001;padding:0;margin:0;list-style:none}.sub-menu.right{left:100%}.sub-menu.left{right:100%}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: TCloudUiDropdownSubMenuComponent, selector: "tcloud-ui-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
9842
|
+
}
|
|
9843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TCloudUiDropdownSubMenuComponent, decorators: [{
|
|
9844
|
+
type: Component,
|
|
9845
|
+
args: [{ selector: 'tcloud-ui-dropdown-sub-menu', imports: [CommonModule], template: "<ul\n class=\"sub-menu\"\n [ngClass]=\"this.position()\"\n [style.top.px]=\"this.parentOffsetTop()\">\n @for (item of this.items(); track item.value)\n {\n <li\n class=\"sub-menu-item\"\n [class.selected]=\"this.selectedOption()?.value === item.value\"\n (click)=\"this.onOptionSelected.emit(item)\">\n {{ item.displayValue }}\n @if (this.selectedOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n @if (item.children?.length)\n {\n <tcloud-ui-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"position()\"\n [parentOffsetTop]=\"0\"\n [selectedOption]=\"this.selectedOption()\">\n </tcloud-ui-dropdown-sub-menu>\n }\n </li>\n }\n</ul>\n", styles: [".sub-menu{position:absolute;min-width:160px;background:#fff;box-shadow:var(--shadow-md);z-index:1001;padding:0;margin:0;list-style:none}.sub-menu.right{left:100%}.sub-menu.left{right:100%}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
|
|
9846
|
+
}] });
|
|
9847
|
+
|
|
9848
|
+
var MultiLevelDropdownSize$1;
|
|
9849
|
+
(function (MultiLevelDropdownSize) {
|
|
9850
|
+
MultiLevelDropdownSize["sm"] = "sm";
|
|
9851
|
+
MultiLevelDropdownSize["md"] = "md";
|
|
9852
|
+
MultiLevelDropdownSize["lg"] = "lg";
|
|
9853
|
+
})(MultiLevelDropdownSize$1 || (MultiLevelDropdownSize$1 = {}));
|
|
9854
|
+
class TCloudUiDropdownMultiLevelComponent {
|
|
9855
|
+
onDocumentClick(event) {
|
|
9856
|
+
if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
|
|
9857
|
+
this.isOpen = false;
|
|
9858
|
+
}
|
|
9859
|
+
}
|
|
9860
|
+
constructor(elementRef) {
|
|
9861
|
+
this.elementRef = elementRef;
|
|
9862
|
+
this.dropdownSize = MultiLevelDropdownSize$1;
|
|
9863
|
+
this.menu = input.required();
|
|
9864
|
+
this.subMenuPosition = input('right');
|
|
9865
|
+
this.disabled = input(false);
|
|
9866
|
+
this.size = input(MultiLevelDropdownSize$1.sm);
|
|
9867
|
+
this.initialValue = input(null); // Valor pré-selecionado
|
|
9868
|
+
this.optionSelected = output();
|
|
9869
|
+
this.selectedOption = signal(null);
|
|
9870
|
+
this.selectedParentOption = signal(null);
|
|
9871
|
+
this.hoveredIndex = null;
|
|
9872
|
+
this.isOpen = false;
|
|
9873
|
+
}
|
|
9874
|
+
ngOnChanges(_simpleChanges) {
|
|
9875
|
+
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
9876
|
+
if (_simpleChanges['initialValue'] || _simpleChanges['menu']) {
|
|
9877
|
+
this.selectedOption.set(null);
|
|
9878
|
+
this.selectedParentOption.set(null);
|
|
9879
|
+
}
|
|
9880
|
+
}
|
|
9881
|
+
getItemOffsetTop(index) {
|
|
9882
|
+
if (!this.menuRoot)
|
|
9883
|
+
return 0;
|
|
9884
|
+
const items = this.menuRoot.nativeElement.querySelectorAll('.menu-item');
|
|
9885
|
+
if (items && items[index]) {
|
|
9886
|
+
return items[index].offsetTop;
|
|
9887
|
+
}
|
|
9888
|
+
return 0;
|
|
9889
|
+
}
|
|
9890
|
+
toggleDropdown() {
|
|
9891
|
+
this.isOpen = !this.isOpen;
|
|
9892
|
+
}
|
|
9893
|
+
selectOption(option, parentOption) {
|
|
9894
|
+
this.selectedOption.set(option);
|
|
9895
|
+
this.selectedParentOption.set(parentOption);
|
|
9896
|
+
this.optionSelected.emit({ option, parentOption }); // Emite apenas o valor da opção selecionada
|
|
9897
|
+
// this.isOpen = false; // Fecha o dropdown
|
|
9898
|
+
// this.hoveredIndex = null;
|
|
9899
|
+
}
|
|
9900
|
+
selectParentItem($event, option, parentOption) {
|
|
9901
|
+
$event.stopPropagation();
|
|
9902
|
+
if (parentOption?.children?.length)
|
|
9903
|
+
return;
|
|
9904
|
+
this.selectOption(option, parentOption);
|
|
9905
|
+
}
|
|
9906
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TCloudUiDropdownMultiLevelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9907
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: TCloudUiDropdownMultiLevelComponent, isStandalone: true, selector: "tcloud-ui-dropdown-multi-level", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, subMenuPosition: { classPropertyName: "subMenuPosition", publicName: "subMenuPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuRoot", first: true, predicate: ["menuRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tcloud-ui-dropdown-multi-level\">\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n tcloudButton=\"outline\"\n color=\"dark\"\n [size]=\"this.size()\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tcloud-ui-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li\n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"hoveredIndex = i\"\n (mouseleave)=\"hoveredIndex = null\"\n (click)=\"this.selectParentItem($event, item, item)\">\n {{ item.displayValue }}\n @if (this.selectedParentOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n }\n @if (item?.children?.length && hoveredIndex === i)\n {\n <tcloud-ui-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"subMenuPosition()\"\n [parentOffsetTop]=\"getItemOffsetTop(i)\"\n [selectedOption]=\"this.selectedOption()\"\n (onOptionSelected)=\"this.selectOption($event, item)\">\n </tcloud-ui-dropdown-sub-menu>\n }\n </li>\n }\n }\n\t</ul>\n</div>\n", styles: [":host{display:block}.tcloud-ui-dropdown-multi-level{position:relative;display:inline-block}.tcloud-ui-dropdown-multi-level .tcloud-ui-dropdown-toggle{align-items:center;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tcloud-ui-dropdown-multi-level .tcloud-ui-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tcloud-ui-dropdown-multi-level__menu-list{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;padding:0;width:130%;z-index:1000;color:var(--c-neutral-900)}.tcloud-ui-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TCloudUiDropdownSubMenuComponent, selector: "tcloud-ui-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }, { kind: "directive", type: TCloudUiButtonDirective, selector: "[tcloudButton]", inputs: ["color", "size", "fullWidth", "tcloudButton"] }] }); }
|
|
9908
|
+
}
|
|
9909
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: TCloudUiDropdownMultiLevelComponent, decorators: [{
|
|
9910
|
+
type: Component,
|
|
9911
|
+
args: [{ selector: 'tcloud-ui-dropdown-multi-level', imports: [
|
|
9912
|
+
CommonModule,
|
|
9913
|
+
TCloudUiDropdownSubMenuComponent,
|
|
9914
|
+
TCloudUiButtonDirective
|
|
9915
|
+
], template: "<div class=\"tcloud-ui-dropdown-multi-level\">\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n tcloudButton=\"outline\"\n color=\"dark\"\n [size]=\"this.size()\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tcloud-ui-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li\n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"hoveredIndex = i\"\n (mouseleave)=\"hoveredIndex = null\"\n (click)=\"this.selectParentItem($event, item, item)\">\n {{ item.displayValue }}\n @if (this.selectedParentOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n }\n @if (item?.children?.length && hoveredIndex === i)\n {\n <tcloud-ui-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"subMenuPosition()\"\n [parentOffsetTop]=\"getItemOffsetTop(i)\"\n [selectedOption]=\"this.selectedOption()\"\n (onOptionSelected)=\"this.selectOption($event, item)\">\n </tcloud-ui-dropdown-sub-menu>\n }\n </li>\n }\n }\n\t</ul>\n</div>\n", styles: [":host{display:block}.tcloud-ui-dropdown-multi-level{position:relative;display:inline-block}.tcloud-ui-dropdown-multi-level .tcloud-ui-dropdown-toggle{align-items:center;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tcloud-ui-dropdown-multi-level .tcloud-ui-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tcloud-ui-dropdown-multi-level__menu-list{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;padding:0;width:130%;z-index:1000;color:var(--c-neutral-900)}.tcloud-ui-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
|
|
9916
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
9917
|
+
type: HostListener,
|
|
9918
|
+
args: ['document:click', ['$event']]
|
|
9919
|
+
}], menuRoot: [{
|
|
9920
|
+
type: ViewChild,
|
|
9921
|
+
args: ['menuRoot', { static: false }]
|
|
9922
|
+
}] } });
|
|
9923
|
+
|
|
9832
9924
|
var TCloudUiDialogStatusEnum;
|
|
9833
9925
|
(function (TCloudUiDialogStatusEnum) {
|
|
9834
9926
|
TCloudUiDialogStatusEnum["success"] = "success";
|
|
@@ -11684,5 +11776,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
|
|
|
11684
11776
|
* Generated bundle index. Do not edit.
|
|
11685
11777
|
*/
|
|
11686
11778
|
|
|
11687
|
-
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, 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, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDialogComponent, TCloudUiDialogEventsEnum, TCloudUiDialogModel, TCloudUiDialogService, TCloudUiDialogStatusEnum, TCloudUiDialogTextConfirmationEnum, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, 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 };
|
|
11779
|
+
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, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDialogComponent, TCloudUiDialogEventsEnum, TCloudUiDialogModel, TCloudUiDialogService, TCloudUiDialogStatusEnum, TCloudUiDialogTextConfirmationEnum, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiDropdownMultiLevelComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, 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 };
|
|
11688
11780
|
//# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map
|