@dev-tcloud/tcloud-ui 6.19.3 → 6.20.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.
- package/docs/tcloud-ui-dialog.md +167 -0
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +310 -38
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/js/tcloud-ui-app.js +1 -1
- package/lib/_modules/tcloud-ui-dialog/enums/tcloud-ui-dialog-events.enum.d.ts +4 -0
- package/lib/_modules/tcloud-ui-dialog/enums/tcloud-ui-dialog-status.enum.d.ts +6 -0
- package/lib/_modules/tcloud-ui-dialog/enums/tcloud-ui-dialog-text-confirmation.enum.d.ts +5 -0
- package/lib/_modules/tcloud-ui-dialog/models/tcloud-ui-dialog.model.d.ts +12 -0
- package/lib/_modules/tcloud-ui-dialog/services/tcloud-ui-dialog-service.d.ts +25 -0
- package/lib/_modules/tcloud-ui-dialog/tcloud-ui-dialog.component.d.ts +53 -0
- package/lib/tcloud-ui.module.d.ts +47 -46
- package/package.json +1 -1
- package/public-api.d.ts +6 -0
- package/scss/components/custom/modal.scss +6 -6
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
# TCloud UI Dialog
|
|
2
|
+
|
|
3
|
+
Componente standalone de diálogo de confirmação criado dinamicamente via `TCloudUiDialogService`, com suporte a mensagem HTML, estado de carregamento, confirmação por texto digitado e encadeamento fluente (`onConfirm` / `onCancel`).
|
|
4
|
+
|
|
5
|
+
## Características
|
|
6
|
+
|
|
7
|
+
- Abertura imperativa com `ComponentFactoryResolver` e `ViewContainerRef` raiz definido pelo consumidor
|
|
8
|
+
- Título, mensagem (`innerHTML`), textos de botões e rótulos via `TCloudUiDialogModel` e i18n padrão
|
|
9
|
+
- Modo de confirmação por palavra (`TCloudUiDialogTextConfirmationEnum`) com validação case-insensitive
|
|
10
|
+
- Indicador de carregamento (`tc-rev-small-loading`) quando `data.loading` é verdadeiro
|
|
11
|
+
- Tecla Escape e botão fechar disparam fluxo de cancelamento; animação de entrada/saída (`fade`)
|
|
12
|
+
- `BehaviorSubject` `events` notifica ciclo de vida (`open` / `close`); após `close` o serviço destrói a instância do componente
|
|
13
|
+
|
|
14
|
+
## Instalação
|
|
15
|
+
|
|
16
|
+
O componente e o serviço estão no `TCloudUiModule` (o serviço também está em `providedIn: 'root'`).
|
|
17
|
+
|
|
18
|
+
```typescript
|
|
19
|
+
import { TCloudUiModule, TCloudUiDialogService } from 'projects/tcloud-ui/src/public-api';
|
|
20
|
+
|
|
21
|
+
@NgModule({
|
|
22
|
+
imports: [TCloudUiModule],
|
|
23
|
+
})
|
|
24
|
+
export class AppModule {}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Uso standalone (apenas o componente, sem abrir via serviço — cenário raro, pois o fluxo previsto é via serviço):
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
import { TCloudUiDialogComponent } from 'projects/tcloud-ui/src/public-api';
|
|
31
|
+
|
|
32
|
+
@Component({
|
|
33
|
+
standalone: true,
|
|
34
|
+
imports: [TCloudUiDialogComponent],
|
|
35
|
+
})
|
|
36
|
+
export class ExampleComponent {}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Propriedades (API)
|
|
40
|
+
|
|
41
|
+
O seletor `tcloud-ui-dialog` não expõe `@Input()` nem `@Output()` para templates externos: a configuração ocorre pelo retorno de `TCloudUiDialogService.open()` e pela mutação de `data` na instância retornada.
|
|
42
|
+
|
|
43
|
+
### Parâmetros de `TCloudUiDialogService.open(_data?)`
|
|
44
|
+
|
|
45
|
+
Valores passados em `_data` são mesclados com padrões do serviço (incluindo chaves i18n). O serviço instancia `TCloudUiDialogModel` internamente.
|
|
46
|
+
|
|
47
|
+
| Campo | Tipo | Descrição | Valor padrão (comportamento do serviço) |
|
|
48
|
+
|-------|------|-----------|----------------------------------------|
|
|
49
|
+
| `title` | `string` | Título do cabeçalho | Tradução de `dialogConfirmation.default_title` ou *Atenção* |
|
|
50
|
+
| `message` | `string` | Corpo do diálogo (HTML) | Tradução de `dialogConfirmation.default_message` |
|
|
51
|
+
| `loading` | `boolean` | Exibe loading e bloqueia ações enquanto verdadeiro | `undefined` / herdado do objeto |
|
|
52
|
+
| `disable` | `boolean` | Desabilita botões, fechar e Escape | `undefined` / herdado |
|
|
53
|
+
| `disableClickOutside` | `boolean` | Comportamento do clique no backdrop: quando **falso** ou indefinido, o clique é ignorado; quando **verdadeiro** e `disable` é falso, o clique chama `close(true)` (mesmo fluxo que cancelar) | `undefined` / herdado |
|
|
54
|
+
| `inputConfirmationText` | `TCloudUiDialogTextConfirmationEnum` | Palavra esperada no campo de confirmação (mapeada para texto i18n) | `confirm` |
|
|
55
|
+
| `buttonConfirmText` | `string` | Armazenado em `TCloudUiDialogModel`; o template atual do diálogo exibe no botão principal o valor de `textConfirmation` com `titlecase`, não este campo | Opcional |
|
|
56
|
+
| `buttonCancelText` | `string` | Rótulo do botão cancelar | Tradução de `dialogConfirmation.cancel` se omitido |
|
|
57
|
+
|
|
58
|
+
### `TCloudUiDialogTextConfirmationEnum`
|
|
59
|
+
|
|
60
|
+
| Valor | Uso |
|
|
61
|
+
|-------|-----|
|
|
62
|
+
| `continue` | Palavra de confirmação associada à tradução `dialogConfirmation.continue` |
|
|
63
|
+
| `remove` | Idem `dialogConfirmation.remove` |
|
|
64
|
+
| `confirm` | Idem `dialogConfirmation.confirm` (padrão do serviço) |
|
|
65
|
+
|
|
66
|
+
### `TCloudUiDialogEventsEnum`
|
|
67
|
+
|
|
68
|
+
Emitido em `events` da instância do componente: `open` (valor inicial) e `close` ao finalizar animação de fechamento.
|
|
69
|
+
|
|
70
|
+
### `TCloudUiDialogStatusEnum`
|
|
71
|
+
|
|
72
|
+
Valores `success`, `error`, `info`, `warning` exportados no pacote para uso alinhado a fluxos de UI; o componente de diálogo atual não aplica esse enum no template.
|
|
73
|
+
|
|
74
|
+
### API pública da instância (`TCloudUiDialogComponent`)
|
|
75
|
+
|
|
76
|
+
| Membro | Tipo | Descrição |
|
|
77
|
+
|--------|------|-----------|
|
|
78
|
+
| `data` | `TCloudUiDialogModel` | Modelo exibido; pode ser mutado após abrir (ex.: `dialog.data.loading = true`) |
|
|
79
|
+
| `textConfirmation` | `string` | Palavra efetiva de confirmação (definida pelo serviço com base no enum e i18n) |
|
|
80
|
+
| `inputConfirmationControl` | `FormControl` | Controle do campo de confirmação; `Validators.required`; desabilitado quando `disable` ou `loading` |
|
|
81
|
+
| `events` | `BehaviorSubject<TCloudUiDialogEventsEnum>` | Ciclo de vida; completa após `close` |
|
|
82
|
+
| `animation` | `string` | Estado da animação (`visible` / `hide`) |
|
|
83
|
+
| `close(emitCancel?)` | `void` | Inicia fechamento; `emitCancel === true` (padrão) invoca callback de `onCancel`; `false` apenas encerra sem disparar cancelamento |
|
|
84
|
+
| `confirm()` | `void` | Valida texto de confirmação (se habilitado) e chama callback de `onConfirm` |
|
|
85
|
+
| `onConfirm(fn)` | `TCloudUiDialogComponent` | Registra callback recebendo a instância do diálogo; encadeável |
|
|
86
|
+
| `onCancel(fn)` | `TCloudUiDialogComponent` | Registra callback de cancelamento; encadeável |
|
|
87
|
+
|
|
88
|
+
### Configuração obrigatória do serviço
|
|
89
|
+
|
|
90
|
+
| Método | Descrição |
|
|
91
|
+
|--------|-----------|
|
|
92
|
+
| `setRootViewContainerRef(ref: ViewContainerRef)` | Define o container onde o host do diálogo será inserido (tipicamente `ViewChild` template em `#dialogRoot`) |
|
|
93
|
+
|
|
94
|
+
## Exemplos de uso
|
|
95
|
+
|
|
96
|
+
### Uso básico
|
|
97
|
+
|
|
98
|
+
Template com âncora para o diálogo e botão para abrir:
|
|
99
|
+
|
|
100
|
+
```html
|
|
101
|
+
<ng-container #dialogRoot></ng-container>
|
|
102
|
+
<button type="button" (click)="open()">Abrir diálogo</button>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
```typescript
|
|
106
|
+
import { AfterViewInit, Component, ViewChild, ViewContainerRef } from '@angular/core';
|
|
107
|
+
import {
|
|
108
|
+
TCloudUiDialogService,
|
|
109
|
+
TCloudUiDialogTextConfirmationEnum,
|
|
110
|
+
} from 'projects/tcloud-ui/src/public-api';
|
|
111
|
+
|
|
112
|
+
@Component({
|
|
113
|
+
selector: 'app-example',
|
|
114
|
+
templateUrl: './example.component.html',
|
|
115
|
+
})
|
|
116
|
+
export class ExampleComponent implements AfterViewInit {
|
|
117
|
+
@ViewChild('dialogRoot', { read: ViewContainerRef }) dialogRoot!: ViewContainerRef;
|
|
118
|
+
|
|
119
|
+
constructor(private readonly dialog: TCloudUiDialogService) {}
|
|
120
|
+
|
|
121
|
+
ngAfterViewInit(): void {
|
|
122
|
+
this.dialog.setRootViewContainerRef(this.dialogRoot);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
open(): void {
|
|
126
|
+
this.dialog
|
|
127
|
+
.open({
|
|
128
|
+
title: 'Confirmar operação',
|
|
129
|
+
message: '<p>Deseja prosseguir?</p>',
|
|
130
|
+
inputConfirmationText: TCloudUiDialogTextConfirmationEnum.confirm,
|
|
131
|
+
})
|
|
132
|
+
.onConfirm((d) => d.close(false))
|
|
133
|
+
.onCancel(() => {});
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Uso avançado
|
|
139
|
+
|
|
140
|
+
Padrão da página de demonstração: confirmação com palavra `remove`, bloqueio de clique externo até confirmar texto, fluxo assíncrono com `loading` e fechamento sem callback de cancelamento após sucesso.
|
|
141
|
+
|
|
142
|
+
```typescript
|
|
143
|
+
openDialogWarning(): void {
|
|
144
|
+
this.tCloudUiDialogService
|
|
145
|
+
.open({
|
|
146
|
+
title: 'Teste title',
|
|
147
|
+
message: 'Teste message',
|
|
148
|
+
disableClickOutside: true,
|
|
149
|
+
inputConfirmationText: TCloudUiDialogTextConfirmationEnum.remove,
|
|
150
|
+
buttonConfirmText: 'Teste confirm',
|
|
151
|
+
buttonCancelText: 'Teste cancel',
|
|
152
|
+
})
|
|
153
|
+
.onConfirm((dialog) => {
|
|
154
|
+
dialog.data.loading = true;
|
|
155
|
+
setTimeout(() => dialog.close(false), 3000);
|
|
156
|
+
})
|
|
157
|
+
.onCancel(() => {
|
|
158
|
+
alert('Cancelado');
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
Notas de comportamento:
|
|
164
|
+
|
|
165
|
+
- `dialog.close(false)` após operações bem-sucedidas evita executar o handler registrado em `onCancel`.
|
|
166
|
+
- Enquanto `data.loading` ou `data.disable` é verdadeiro, Escape não fecha o diálogo e os botões permanecem desabilitados.
|
|
167
|
+
- Com campo de confirmação ativo, o valor digitado deve coincidir com `textConfirmation` (comparação sem diferenciar maiúsculas/minúsculas).
|
|
@@ -5,7 +5,7 @@ import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
|
|
|
5
5
|
import { Subject, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, map } from 'rxjs';
|
|
6
6
|
import { trigger, state, style, transition, animate, AnimationBuilder } from '@angular/animations';
|
|
7
7
|
import * as i2 from '@angular/forms';
|
|
8
|
-
import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, NG_VALIDATORS,
|
|
8
|
+
import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, NG_VALIDATORS, Validators, FormGroup } from '@angular/forms';
|
|
9
9
|
import * as i1$1 from '@angular/router';
|
|
10
10
|
import { Router, RouterModule } from '@angular/router';
|
|
11
11
|
|
|
@@ -282,6 +282,15 @@ var modal$1 = {
|
|
|
282
282
|
to_confirm: "to confirm",
|
|
283
283
|
textByConfirm: "confirm"
|
|
284
284
|
};
|
|
285
|
+
var dialogConfirmation$1 = {
|
|
286
|
+
default_title: "Attention",
|
|
287
|
+
default_message: "Do you really want to execute this action?",
|
|
288
|
+
cancel: "Cancel",
|
|
289
|
+
"continue": "Continue",
|
|
290
|
+
remove: "Remove",
|
|
291
|
+
confirm: "Confirm",
|
|
292
|
+
input_confirmation_error: "Type the word \"{{word}}\"."
|
|
293
|
+
};
|
|
285
294
|
var enUS = {
|
|
286
295
|
choiceIssues: choiceIssues$1,
|
|
287
296
|
inputPassword: inputPassword$1,
|
|
@@ -290,7 +299,8 @@ var enUS = {
|
|
|
290
299
|
notFound: notFound$1,
|
|
291
300
|
searchInObject: searchInObject$1,
|
|
292
301
|
uploadArea: uploadArea$1,
|
|
293
|
-
modal: modal$1
|
|
302
|
+
modal: modal$1,
|
|
303
|
+
dialogConfirmation: dialogConfirmation$1
|
|
294
304
|
};
|
|
295
305
|
|
|
296
306
|
var choiceIssues = {
|
|
@@ -327,6 +337,15 @@ var modal = {
|
|
|
327
337
|
to_confirm: "para confirmar",
|
|
328
338
|
textByConfirm: "confirmo"
|
|
329
339
|
};
|
|
340
|
+
var dialogConfirmation = {
|
|
341
|
+
default_title: "Atención",
|
|
342
|
+
default_message: "¿Desea realmente ejecutar esta acción?",
|
|
343
|
+
cancel: "Cancelar",
|
|
344
|
+
"continue": "Continuar",
|
|
345
|
+
remove: "Eliminar",
|
|
346
|
+
confirm: "Confirmar",
|
|
347
|
+
input_confirmation_error: "Escribe la palabra \"{{word}}\"."
|
|
348
|
+
};
|
|
330
349
|
var esES = {
|
|
331
350
|
choiceIssues: choiceIssues,
|
|
332
351
|
inputPassword: inputPassword,
|
|
@@ -335,7 +354,8 @@ var esES = {
|
|
|
335
354
|
notFound: notFound,
|
|
336
355
|
searchInObject: searchInObject,
|
|
337
356
|
uploadArea: uploadArea,
|
|
338
|
-
modal: modal
|
|
357
|
+
modal: modal,
|
|
358
|
+
dialogConfirmation: dialogConfirmation
|
|
339
359
|
};
|
|
340
360
|
|
|
341
361
|
const LOCALE_MESSAGES = {
|
|
@@ -9045,6 +9065,273 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
9045
9065
|
}]
|
|
9046
9066
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
9047
9067
|
|
|
9068
|
+
var TCloudUiDialogEventsEnum;
|
|
9069
|
+
(function (TCloudUiDialogEventsEnum) {
|
|
9070
|
+
TCloudUiDialogEventsEnum[TCloudUiDialogEventsEnum["open"] = 0] = "open";
|
|
9071
|
+
TCloudUiDialogEventsEnum[TCloudUiDialogEventsEnum["close"] = 1] = "close";
|
|
9072
|
+
})(TCloudUiDialogEventsEnum || (TCloudUiDialogEventsEnum = {}));
|
|
9073
|
+
|
|
9074
|
+
class TcRevSmallLoadingComponent {
|
|
9075
|
+
constructor() {
|
|
9076
|
+
/** Width of the loading spinner accepts string with CSS units (px, rem, em) */
|
|
9077
|
+
this.width = input('1.25rem');
|
|
9078
|
+
/** Margin top in pixels */
|
|
9079
|
+
this.marginTop = input(0);
|
|
9080
|
+
/** Margin bottom in pixels */
|
|
9081
|
+
this.marginBottom = input(0);
|
|
9082
|
+
/** Margin right in pixels */
|
|
9083
|
+
this.marginRight = input(0);
|
|
9084
|
+
/** Margin left in pixels */
|
|
9085
|
+
this.marginLeft = input(0);
|
|
9086
|
+
this.style = new TcRevSmallLoadingComponentStyle();
|
|
9087
|
+
}
|
|
9088
|
+
ngOnInit() {
|
|
9089
|
+
this.style.marginTop = `${this.marginTop()}px`;
|
|
9090
|
+
this.style.marginRight = `${this.marginRight()}px`;
|
|
9091
|
+
this.style.marginLeft = `${this.marginLeft()}px`;
|
|
9092
|
+
this.style.marginBottom = `${this.marginBottom()}px`;
|
|
9093
|
+
this.style.width = this.width();
|
|
9094
|
+
this.style.height = this.width();
|
|
9095
|
+
}
|
|
9096
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TcRevSmallLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9097
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: TcRevSmallLoadingComponent, isStandalone: true, selector: "tc-rev-small-loading", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-small-loading\">\n <span\n class=\"tc-rev-small-loading__spinner\"\n [ngStyle]=\"this.style\">\n </span>\n</div>\n", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tc-rev-small-loading{display:flex;align-items:center;justify-content:center}.tc-rev-small-loading__spinner{animation:rotation 1s linear infinite;border:3px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:inline-block;height:var(--size-20);width:var(--size-20)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
9098
|
+
}
|
|
9099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TcRevSmallLoadingComponent, decorators: [{
|
|
9100
|
+
type: Component,
|
|
9101
|
+
args: [{ selector: 'tc-rev-small-loading', imports: [CommonModule], template: "<div class=\"tc-rev-small-loading\">\n <span\n class=\"tc-rev-small-loading__spinner\"\n [ngStyle]=\"this.style\">\n </span>\n</div>\n", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tc-rev-small-loading{display:flex;align-items:center;justify-content:center}.tc-rev-small-loading__spinner{animation:rotation 1s linear infinite;border:3px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:inline-block;height:var(--size-20);width:var(--size-20)}\n"] }]
|
|
9102
|
+
}] });
|
|
9103
|
+
class TcRevSmallLoadingComponentStyle {
|
|
9104
|
+
}
|
|
9105
|
+
|
|
9106
|
+
class TCloudUiDialogComponent {
|
|
9107
|
+
constructor() {
|
|
9108
|
+
this.animation = 'visible';
|
|
9109
|
+
this.inputConfirmationControl = new FormControl('', [Validators.required]);
|
|
9110
|
+
this.events = new BehaviorSubject(TCloudUiDialogEventsEnum.open);
|
|
9111
|
+
this.isClosing = false;
|
|
9112
|
+
// * [Injects]
|
|
9113
|
+
this.i18n = inject(I18nService);
|
|
9114
|
+
}
|
|
9115
|
+
onKeydownHandler(event) {
|
|
9116
|
+
if (this.data?.disable || this.data?.loading)
|
|
9117
|
+
return;
|
|
9118
|
+
event.preventDefault();
|
|
9119
|
+
this.close(true);
|
|
9120
|
+
}
|
|
9121
|
+
ngDoCheck() {
|
|
9122
|
+
this.syncInputConfirmationDisabledState();
|
|
9123
|
+
}
|
|
9124
|
+
/**
|
|
9125
|
+
* `FormControl` ignora `[disabled]` no template; `data.loading` / `data.disable`
|
|
9126
|
+
* podem mudar por mutação no modelo após abrir o dialog.
|
|
9127
|
+
*/
|
|
9128
|
+
syncInputConfirmationDisabledState() {
|
|
9129
|
+
if (!this.data?.inputConfirmationText)
|
|
9130
|
+
return;
|
|
9131
|
+
const shouldDisable = !!(this.data.disable || this.data.loading);
|
|
9132
|
+
if (shouldDisable && this.inputConfirmationControl.enabled) {
|
|
9133
|
+
this.inputConfirmationControl.disable({ emitEvent: false });
|
|
9134
|
+
}
|
|
9135
|
+
else if (!shouldDisable && this.inputConfirmationControl.disabled) {
|
|
9136
|
+
this.inputConfirmationControl.enable({ emitEvent: false });
|
|
9137
|
+
}
|
|
9138
|
+
}
|
|
9139
|
+
/**
|
|
9140
|
+
* Método para validar o valor do input! A confirmação deve ser igual a 'DELTE'
|
|
9141
|
+
*/
|
|
9142
|
+
checkInputConfirmation() {
|
|
9143
|
+
const inputValue = this.inputConfirmationControl.value ?? '';
|
|
9144
|
+
return inputValue.toUpperCase() === this.textConfirmation.toUpperCase();
|
|
9145
|
+
}
|
|
9146
|
+
/** Fecha com `onCancel` quando `data.disableClickOutside` está habilitado e o dialog não está bloqueado. */
|
|
9147
|
+
onBackdropClick() {
|
|
9148
|
+
if (!this.data?.disableClickOutside || this.data.disable)
|
|
9149
|
+
return;
|
|
9150
|
+
this.close(true);
|
|
9151
|
+
}
|
|
9152
|
+
/** Substitui `{{word}}` na mensagem vinda de `dialogConfirmation.input_confirmation_error`. */
|
|
9153
|
+
inputConfirmationErrorMessage() {
|
|
9154
|
+
const word = (this.textConfirmation ?? '').toLowerCase();
|
|
9155
|
+
const template = this.i18n.i18nTranslate('dialogConfirmation.input_confirmation_error', 'Digite corretamente a palavra "{{word}}".');
|
|
9156
|
+
return template.replace(/\{\{\s*word\s*\}\}/gi, word);
|
|
9157
|
+
}
|
|
9158
|
+
/**
|
|
9159
|
+
* Fecha o dialog após a animação.
|
|
9160
|
+
* @param emitCancel `true` (padrão): dispara `onCancel` — uso do X, Esc, botão Cancelar.
|
|
9161
|
+
* `false`: só remove o modal — ex.: após fluxo concluído em `onConfirm` (`dialog.close(false)`).
|
|
9162
|
+
*/
|
|
9163
|
+
close(emitCancel = true) {
|
|
9164
|
+
if (this.isClosing)
|
|
9165
|
+
return;
|
|
9166
|
+
this.isClosing = true;
|
|
9167
|
+
if (this.data) {
|
|
9168
|
+
this.data.loading = false;
|
|
9169
|
+
this.data.disable = false;
|
|
9170
|
+
}
|
|
9171
|
+
if (this.inputConfirmationControl.disabled) {
|
|
9172
|
+
this.inputConfirmationControl.enable({ emitEvent: false });
|
|
9173
|
+
}
|
|
9174
|
+
this.animation = 'hide';
|
|
9175
|
+
setTimeout(() => {
|
|
9176
|
+
if (emitCancel) {
|
|
9177
|
+
this.cancelFunction?.(this);
|
|
9178
|
+
}
|
|
9179
|
+
this.events.next(TCloudUiDialogEventsEnum.close);
|
|
9180
|
+
this.events.complete();
|
|
9181
|
+
}, 300);
|
|
9182
|
+
}
|
|
9183
|
+
/**
|
|
9184
|
+
* Método usado no .html para solicitar o click no botão de confirmação
|
|
9185
|
+
*/
|
|
9186
|
+
confirm() {
|
|
9187
|
+
if (!this.data.loading) {
|
|
9188
|
+
if (this.data.inputConfirmationText) {
|
|
9189
|
+
if (this.checkInputConfirmation()) {
|
|
9190
|
+
this.confirmFunction(this);
|
|
9191
|
+
}
|
|
9192
|
+
else {
|
|
9193
|
+
this.inputConfirmationControl.markAsTouched({ onlySelf: true });
|
|
9194
|
+
this.inputConfirmationControl.setErrors({ incorrect: true });
|
|
9195
|
+
}
|
|
9196
|
+
}
|
|
9197
|
+
else {
|
|
9198
|
+
this.confirmFunction(this);
|
|
9199
|
+
}
|
|
9200
|
+
}
|
|
9201
|
+
}
|
|
9202
|
+
/**
|
|
9203
|
+
* Méotodo usuário nos components pai, para receber o momento de fechamento do modal
|
|
9204
|
+
* @param fn Obj component
|
|
9205
|
+
*/
|
|
9206
|
+
onCancel(fn) {
|
|
9207
|
+
this.cancelFunction = fn;
|
|
9208
|
+
return this;
|
|
9209
|
+
}
|
|
9210
|
+
/**
|
|
9211
|
+
* Méotodo usuário nos components pai, para receber o momento de confirmação do modal
|
|
9212
|
+
* @param fn Obj component
|
|
9213
|
+
*/
|
|
9214
|
+
onConfirm(fn) {
|
|
9215
|
+
this.confirmFunction = fn;
|
|
9216
|
+
return this;
|
|
9217
|
+
}
|
|
9218
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9219
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TCloudUiDialogComponent, isStandalone: true, selector: "tcloud-ui-dialog", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (data?.inputConfirmationText)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:2000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:20001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--white)}.container-dialog .container-header{display:flex;justify-content:space-between;align-items:center}.container-dialog .container-header .tc-title{font-size:18px;font-weight:700}.container-dialog .container-header .container-close-button{width:40px;height:40px;border-radius:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--tc-gray-600);border:1px solid var(--tc-gray-500)}.container-dialog .container-input-confirmation{display:grid;gap:8px}.container-dialog .container-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.container-dialog .container-footer button{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }, { kind: "component", type: TcRevSmallLoadingComponent, selector: "tc-rev-small-loading", inputs: ["width", "marginTop", "marginBottom", "marginRight", "marginLeft"] }], animations: [
|
|
9220
|
+
trigger('fade', [
|
|
9221
|
+
state('visible', style({ opacity: 1 })),
|
|
9222
|
+
state('hide', style({ opacity: 0, top: '-38%' })),
|
|
9223
|
+
transition('void => visible', [
|
|
9224
|
+
style({ opacity: 0, top: '-38%' }),
|
|
9225
|
+
animate('0.3s ease-out')
|
|
9226
|
+
]),
|
|
9227
|
+
transition('visible => hide', animate('0.3s ease-out'))
|
|
9228
|
+
])
|
|
9229
|
+
] }); }
|
|
9230
|
+
}
|
|
9231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDialogComponent, decorators: [{
|
|
9232
|
+
type: Component,
|
|
9233
|
+
args: [{ selector: 'tcloud-ui-dialog', animations: [
|
|
9234
|
+
trigger('fade', [
|
|
9235
|
+
state('visible', style({ opacity: 1 })),
|
|
9236
|
+
state('hide', style({ opacity: 0, top: '-38%' })),
|
|
9237
|
+
transition('void => visible', [
|
|
9238
|
+
style({ opacity: 0, top: '-38%' }),
|
|
9239
|
+
animate('0.3s ease-out')
|
|
9240
|
+
]),
|
|
9241
|
+
transition('visible => hide', animate('0.3s ease-out'))
|
|
9242
|
+
])
|
|
9243
|
+
], standalone: true, imports: [CommonModule, ReactiveFormsModule, I18nTranslatePipe, TCloudUiLoadingComponent, TcRevSmallLoadingComponent], template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (data?.inputConfirmationText)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:2000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:20001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--white)}.container-dialog .container-header{display:flex;justify-content:space-between;align-items:center}.container-dialog .container-header .tc-title{font-size:18px;font-weight:700}.container-dialog .container-header .container-close-button{width:40px;height:40px;border-radius:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--tc-gray-600);border:1px solid var(--tc-gray-500)}.container-dialog .container-input-confirmation{display:grid;gap:8px}.container-dialog .container-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.container-dialog .container-footer button{width:100%}\n"] }]
|
|
9244
|
+
}], propDecorators: { onKeydownHandler: [{
|
|
9245
|
+
type: HostListener,
|
|
9246
|
+
args: ['document:keydown.escape', ['$event']]
|
|
9247
|
+
}] } });
|
|
9248
|
+
|
|
9249
|
+
var TCloudUiDialogTextConfirmationEnum;
|
|
9250
|
+
(function (TCloudUiDialogTextConfirmationEnum) {
|
|
9251
|
+
TCloudUiDialogTextConfirmationEnum["continue"] = "continue";
|
|
9252
|
+
TCloudUiDialogTextConfirmationEnum["remove"] = "remove";
|
|
9253
|
+
TCloudUiDialogTextConfirmationEnum["confirm"] = "confirm";
|
|
9254
|
+
})(TCloudUiDialogTextConfirmationEnum || (TCloudUiDialogTextConfirmationEnum = {}));
|
|
9255
|
+
|
|
9256
|
+
class TCloudUiDialogModel {
|
|
9257
|
+
constructor(_title, _description, _loading = false, _disable = false, _disableClickOutside = false, _inputConfirmationText, _buttonConfirmText, _buttonCancelText) {
|
|
9258
|
+
this.title = _title;
|
|
9259
|
+
this.message = _description;
|
|
9260
|
+
this.loading = _loading;
|
|
9261
|
+
this.disable = _disable;
|
|
9262
|
+
this.disableClickOutside = _disableClickOutside;
|
|
9263
|
+
this.inputConfirmationText = _inputConfirmationText;
|
|
9264
|
+
this.buttonConfirmText = _buttonConfirmText;
|
|
9265
|
+
this.buttonCancelText = _buttonCancelText;
|
|
9266
|
+
}
|
|
9267
|
+
}
|
|
9268
|
+
|
|
9269
|
+
class TCloudUiDialogService {
|
|
9270
|
+
constructor() {
|
|
9271
|
+
// * [Injects]
|
|
9272
|
+
this.i18n = inject(I18nService);
|
|
9273
|
+
}
|
|
9274
|
+
/**
|
|
9275
|
+
* Método usado para realizar a configuração de 'ViewContainerRef'
|
|
9276
|
+
* @param viewContainerRef Obj
|
|
9277
|
+
*/
|
|
9278
|
+
setRootViewContainerRef(viewContainerRef) {
|
|
9279
|
+
if (!viewContainerRef)
|
|
9280
|
+
return;
|
|
9281
|
+
this.rootViewContainer = viewContainerRef;
|
|
9282
|
+
}
|
|
9283
|
+
/**
|
|
9284
|
+
* Método usado para abrir o modal de dialog
|
|
9285
|
+
* @param _data Info do dialog
|
|
9286
|
+
*/
|
|
9287
|
+
open(_data = {}) {
|
|
9288
|
+
if (!this.rootViewContainer) {
|
|
9289
|
+
throw new Error('TCloudUiDialogService: ViewContainerRef não configurado. ' +
|
|
9290
|
+
'Declare no template um âncora (ex.: <ng-container #dialogRoot></ng-container>), ' +
|
|
9291
|
+
'use @ViewChild("dialogRoot", { read: ViewContainerRef }) e chame setRootViewContainerRef(ref) no ngAfterViewInit. ' +
|
|
9292
|
+
'Se #dialogRoot estiver dentro de *ngIf, chame setRootViewContainerRef de novo quando o bloco for exibido.');
|
|
9293
|
+
}
|
|
9294
|
+
const componentRef = this.rootViewContainer.createComponent(TCloudUiDialogComponent, {
|
|
9295
|
+
injector: this.rootViewContainer.injector,
|
|
9296
|
+
});
|
|
9297
|
+
componentRef.instance.data = new TCloudUiDialogModel(_data.title || this.i18n.i18nTranslate('dialogConfirmation.default_title', 'Atenção'), _data.message || this.i18n.i18nTranslate('dialogConfirmation.default_message', 'Deseja realmente executar esta ação?'), _data.loading, _data.disable, _data.disableClickOutside, _data.inputConfirmationText || TCloudUiDialogTextConfirmationEnum.confirm, _data.buttonConfirmText, _data.buttonCancelText);
|
|
9298
|
+
// * Configura o texto do input de confirmação
|
|
9299
|
+
if (componentRef.instance.data.inputConfirmationText)
|
|
9300
|
+
this.setTextConfirmation(componentRef.instance);
|
|
9301
|
+
componentRef.instance.events.subscribe(event => {
|
|
9302
|
+
// * Fecha o dialogo
|
|
9303
|
+
if (event === TCloudUiDialogEventsEnum.close)
|
|
9304
|
+
componentRef.destroy();
|
|
9305
|
+
});
|
|
9306
|
+
return componentRef.instance;
|
|
9307
|
+
}
|
|
9308
|
+
/**
|
|
9309
|
+
* Método usado para configurar o texto do input de confirmação
|
|
9310
|
+
* @param component Componente do dialogo
|
|
9311
|
+
*/
|
|
9312
|
+
setTextConfirmation(component) {
|
|
9313
|
+
switch (component.data.inputConfirmationText) {
|
|
9314
|
+
case TCloudUiDialogTextConfirmationEnum.continue:
|
|
9315
|
+
component.textConfirmation = this.i18n.i18nTranslate('dialogConfirmation.continue', 'continuar');
|
|
9316
|
+
break;
|
|
9317
|
+
case TCloudUiDialogTextConfirmationEnum.remove:
|
|
9318
|
+
component.textConfirmation = this.i18n.i18nTranslate('dialogConfirmation.remove', 'remover');
|
|
9319
|
+
break;
|
|
9320
|
+
case TCloudUiDialogTextConfirmationEnum.confirm:
|
|
9321
|
+
component.textConfirmation = this.i18n.i18nTranslate('dialogConfirmation.confirm', 'confirmar');
|
|
9322
|
+
break;
|
|
9323
|
+
}
|
|
9324
|
+
}
|
|
9325
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
9326
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDialogService, providedIn: 'root' }); }
|
|
9327
|
+
}
|
|
9328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDialogService, decorators: [{
|
|
9329
|
+
type: Injectable,
|
|
9330
|
+
args: [{
|
|
9331
|
+
providedIn: 'root'
|
|
9332
|
+
}]
|
|
9333
|
+
}] });
|
|
9334
|
+
|
|
9048
9335
|
const COMPONENTS = [
|
|
9049
9336
|
TCloudUiAccordionComponent,
|
|
9050
9337
|
TCloudUiAccordionBodyComponent,
|
|
@@ -9096,6 +9383,7 @@ const COMPONENTS = [
|
|
|
9096
9383
|
TCloudUiCalendarComponent,
|
|
9097
9384
|
TCloudUiDropdownComponent,
|
|
9098
9385
|
TCloudUiDropdownMultiComponent,
|
|
9386
|
+
TCloudUiDialogComponent,
|
|
9099
9387
|
TCloudUiEmptyContentComponent,
|
|
9100
9388
|
TCloudUiFaqComponent,
|
|
9101
9389
|
TCloudUiMessageComponent,
|
|
@@ -9146,6 +9434,9 @@ const PIPES = [
|
|
|
9146
9434
|
StatusInfoPipe,
|
|
9147
9435
|
TCloudUiPaginationPipe
|
|
9148
9436
|
];
|
|
9437
|
+
const SERVICES = [
|
|
9438
|
+
TCloudUiDialogService,
|
|
9439
|
+
];
|
|
9149
9440
|
class TCloudUiModule {
|
|
9150
9441
|
static forRoot(config) {
|
|
9151
9442
|
const providers = [
|
|
@@ -9223,6 +9514,7 @@ class TCloudUiModule {
|
|
|
9223
9514
|
TCloudUiCalendarComponent,
|
|
9224
9515
|
TCloudUiDropdownComponent,
|
|
9225
9516
|
TCloudUiDropdownMultiComponent,
|
|
9517
|
+
TCloudUiDialogComponent,
|
|
9226
9518
|
TCloudUiEmptyContentComponent,
|
|
9227
9519
|
TCloudUiFaqComponent,
|
|
9228
9520
|
TCloudUiMessageComponent,
|
|
@@ -9315,6 +9607,7 @@ class TCloudUiModule {
|
|
|
9315
9607
|
TCloudUiCalendarComponent,
|
|
9316
9608
|
TCloudUiDropdownComponent,
|
|
9317
9609
|
TCloudUiDropdownMultiComponent,
|
|
9610
|
+
TCloudUiDialogComponent,
|
|
9318
9611
|
TCloudUiEmptyContentComponent,
|
|
9319
9612
|
TCloudUiFaqComponent,
|
|
9320
9613
|
TCloudUiMessageComponent,
|
|
@@ -9361,7 +9654,8 @@ class TCloudUiModule {
|
|
|
9361
9654
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiModule, providers: [
|
|
9362
9655
|
DatePipe,
|
|
9363
9656
|
StatusInfoPipe,
|
|
9364
|
-
TCloudUiPaginationService
|
|
9657
|
+
TCloudUiPaginationService,
|
|
9658
|
+
...SERVICES
|
|
9365
9659
|
], imports: [TCloudUiAccordionComponent,
|
|
9366
9660
|
TCloudUiAccordionBodyComponent,
|
|
9367
9661
|
TCloudUiAccordionTitleComponent,
|
|
@@ -9407,6 +9701,7 @@ class TCloudUiModule {
|
|
|
9407
9701
|
TCloudUiCalendarComponent,
|
|
9408
9702
|
TCloudUiDropdownComponent,
|
|
9409
9703
|
TCloudUiDropdownMultiComponent,
|
|
9704
|
+
TCloudUiDialogComponent,
|
|
9410
9705
|
TCloudUiFaqComponent,
|
|
9411
9706
|
TCloudUiMessageComponent,
|
|
9412
9707
|
TCloudUiSkeletonLoadingComponent,
|
|
@@ -9441,7 +9736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
9441
9736
|
providers: [
|
|
9442
9737
|
DatePipe,
|
|
9443
9738
|
StatusInfoPipe,
|
|
9444
|
-
TCloudUiPaginationService
|
|
9739
|
+
TCloudUiPaginationService,
|
|
9740
|
+
...SERVICES
|
|
9445
9741
|
]
|
|
9446
9742
|
}]
|
|
9447
9743
|
}] });
|
|
@@ -9496,6 +9792,14 @@ function provideTCloudUi(config) {
|
|
|
9496
9792
|
return makeEnvironmentProviders(providers);
|
|
9497
9793
|
}
|
|
9498
9794
|
|
|
9795
|
+
var TCloudUiDialogStatusEnum;
|
|
9796
|
+
(function (TCloudUiDialogStatusEnum) {
|
|
9797
|
+
TCloudUiDialogStatusEnum["success"] = "success";
|
|
9798
|
+
TCloudUiDialogStatusEnum["error"] = "error";
|
|
9799
|
+
TCloudUiDialogStatusEnum["info"] = "info";
|
|
9800
|
+
TCloudUiDialogStatusEnum["warning"] = "warning";
|
|
9801
|
+
})(TCloudUiDialogStatusEnum || (TCloudUiDialogStatusEnum = {}));
|
|
9802
|
+
|
|
9499
9803
|
class TCloudUiLoadingTransitionsService {
|
|
9500
9804
|
constructor() {
|
|
9501
9805
|
this.ID = 'tcloud-ui-loading-transitions';
|
|
@@ -10870,38 +11174,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
10870
11174
|
}]
|
|
10871
11175
|
}] });
|
|
10872
11176
|
|
|
10873
|
-
class TcRevSmallLoadingComponent {
|
|
10874
|
-
constructor() {
|
|
10875
|
-
/** Width of the loading spinner accepts string with CSS units (px, rem, em) */
|
|
10876
|
-
this.width = input('1.25rem');
|
|
10877
|
-
/** Margin top in pixels */
|
|
10878
|
-
this.marginTop = input(0);
|
|
10879
|
-
/** Margin bottom in pixels */
|
|
10880
|
-
this.marginBottom = input(0);
|
|
10881
|
-
/** Margin right in pixels */
|
|
10882
|
-
this.marginRight = input(0);
|
|
10883
|
-
/** Margin left in pixels */
|
|
10884
|
-
this.marginLeft = input(0);
|
|
10885
|
-
this.style = new TcRevSmallLoadingComponentStyle();
|
|
10886
|
-
}
|
|
10887
|
-
ngOnInit() {
|
|
10888
|
-
this.style.marginTop = `${this.marginTop()}px`;
|
|
10889
|
-
this.style.marginRight = `${this.marginRight()}px`;
|
|
10890
|
-
this.style.marginLeft = `${this.marginLeft()}px`;
|
|
10891
|
-
this.style.marginBottom = `${this.marginBottom()}px`;
|
|
10892
|
-
this.style.width = this.width();
|
|
10893
|
-
this.style.height = this.width();
|
|
10894
|
-
}
|
|
10895
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TcRevSmallLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10896
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: TcRevSmallLoadingComponent, isStandalone: true, selector: "tc-rev-small-loading", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-small-loading\">\n <span\n class=\"tc-rev-small-loading__spinner\"\n [ngStyle]=\"this.style\">\n </span>\n</div>\n", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tc-rev-small-loading{display:flex;align-items:center;justify-content:center}.tc-rev-small-loading__spinner{animation:rotation 1s linear infinite;border:3px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:inline-block;height:var(--size-20);width:var(--size-20)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
10897
|
-
}
|
|
10898
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TcRevSmallLoadingComponent, decorators: [{
|
|
10899
|
-
type: Component,
|
|
10900
|
-
args: [{ selector: 'tc-rev-small-loading', imports: [CommonModule], template: "<div class=\"tc-rev-small-loading\">\n <span\n class=\"tc-rev-small-loading__spinner\"\n [ngStyle]=\"this.style\">\n </span>\n</div>\n", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tc-rev-small-loading{display:flex;align-items:center;justify-content:center}.tc-rev-small-loading__spinner{animation:rotation 1s linear infinite;border:3px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:inline-block;height:var(--size-20);width:var(--size-20)}\n"] }]
|
|
10901
|
-
}] });
|
|
10902
|
-
class TcRevSmallLoadingComponentStyle {
|
|
10903
|
-
}
|
|
10904
|
-
|
|
10905
11177
|
class TcRevTabGroupComponent {
|
|
10906
11178
|
constructor() {
|
|
10907
11179
|
this.isCarouselOverflowed = false;
|
|
@@ -11375,5 +11647,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
11375
11647
|
* Generated bundle index. Do not edit.
|
|
11376
11648
|
*/
|
|
11377
11649
|
|
|
11378
|
-
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, 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 };
|
|
11650
|
+
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 };
|
|
11379
11651
|
//# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map
|