@dev-tcloud/tcloud-ui 6.28.2 → 6.28.3
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 +19 -0
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +11 -6
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/js/tcloud-ui-app.js +1 -1
- package/lib/_modules/tcloud-ui-dialog/models/tcloud-ui-dialog.model.d.ts +3 -1
- package/lib/_modules/tcloud-ui-dialog/tcloud-ui-dialog.component.d.ts +2 -0
- package/package.json +1 -1
package/docs/tcloud-ui-dialog.md
CHANGED
|
@@ -52,6 +52,7 @@ Valores passados em `_data` são mesclados com padrões do serviço (incluindo c
|
|
|
52
52
|
| `disable` | `boolean` | Desabilita botões, fechar e Escape | `undefined` / herdado |
|
|
53
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
54
|
| `inputConfirmationText` | `TCloudUiDialogTextConfirmationEnum` | Palavra esperada no campo de confirmação (mapeada para texto i18n) | `confirm` |
|
|
55
|
+
| `showInputConfirmation` | `boolean` | Controla a exibição do campo de confirmação por texto. Quando **`true`** (padrão), o input é exibido e validado antes de confirmar. Quando **`false`**, o input não é renderizado e o botão Confirmar dispara `onConfirm` diretamente, sem validação — apenas os botões | `true` |
|
|
55
56
|
| `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
57
|
| `buttonCancelText` | `string` | Rótulo do botão cancelar | Tradução de `dialogConfirmation.cancel` se omitido |
|
|
57
58
|
|
|
@@ -135,6 +136,23 @@ export class ExampleComponent implements AfterViewInit {
|
|
|
135
136
|
}
|
|
136
137
|
```
|
|
137
138
|
|
|
139
|
+
### Confirmação simples (apenas botões)
|
|
140
|
+
|
|
141
|
+
Quando não é necessária a confirmação por texto digitado, defina `showInputConfirmation: false`. O campo de confirmação não é exibido e o botão Confirmar dispara `onConfirm` diretamente.
|
|
142
|
+
|
|
143
|
+
```typescript
|
|
144
|
+
open(): void {
|
|
145
|
+
this.dialog
|
|
146
|
+
.open({
|
|
147
|
+
title: 'Confirmar operação',
|
|
148
|
+
message: '<p>Deseja prosseguir?</p>',
|
|
149
|
+
showInputConfirmation: false,
|
|
150
|
+
})
|
|
151
|
+
.onConfirm((d) => d.close(false))
|
|
152
|
+
.onCancel(() => {});
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
138
156
|
### Uso avançado
|
|
139
157
|
|
|
140
158
|
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.
|
|
@@ -165,3 +183,4 @@ Notas de comportamento:
|
|
|
165
183
|
- `dialog.close(false)` após operações bem-sucedidas evita executar o handler registrado em `onCancel`.
|
|
166
184
|
- Enquanto `data.loading` ou `data.disable` é verdadeiro, Escape não fecha o diálogo e os botões permanecem desabilitados.
|
|
167
185
|
- Com campo de confirmação ativo, o valor digitado deve coincidir com `textConfirmation` (comparação sem diferenciar maiúsculas/minúsculas).
|
|
186
|
+
- Com `showInputConfirmation: false`, não há validação por texto: o botão Confirmar chama `onConfirm` no clique (o botão segue desabilitado apenas durante `loading`/`disable`).
|
|
@@ -9888,6 +9888,10 @@ class TCloudUiDialogComponent {
|
|
|
9888
9888
|
// * [Injects]
|
|
9889
9889
|
this.i18n = inject(I18nService);
|
|
9890
9890
|
}
|
|
9891
|
+
/** `true` quando o input de confirmação deve ser exibido/validado (flag + texto definidos). */
|
|
9892
|
+
get hasInputConfirmation() {
|
|
9893
|
+
return this.data?.showInputConfirmation !== false && !!this.data?.inputConfirmationText;
|
|
9894
|
+
}
|
|
9891
9895
|
onKeydownHandler(event) {
|
|
9892
9896
|
if (this.data?.disable || this.data?.loading)
|
|
9893
9897
|
return;
|
|
@@ -9902,7 +9906,7 @@ class TCloudUiDialogComponent {
|
|
|
9902
9906
|
* podem mudar por mutação no modelo após abrir o dialog.
|
|
9903
9907
|
*/
|
|
9904
9908
|
syncInputConfirmationDisabledState() {
|
|
9905
|
-
if (!this.
|
|
9909
|
+
if (!this.hasInputConfirmation)
|
|
9906
9910
|
return;
|
|
9907
9911
|
const shouldDisable = !!(this.data.disable || this.data.loading);
|
|
9908
9912
|
if (shouldDisable && this.inputConfirmationControl.enabled) {
|
|
@@ -9961,7 +9965,7 @@ class TCloudUiDialogComponent {
|
|
|
9961
9965
|
*/
|
|
9962
9966
|
confirm() {
|
|
9963
9967
|
if (!this.data.loading) {
|
|
9964
|
-
if (this.
|
|
9968
|
+
if (this.hasInputConfirmation) {
|
|
9965
9969
|
if (this.checkInputConfirmation()) {
|
|
9966
9970
|
this.confirmFunction(this);
|
|
9967
9971
|
}
|
|
@@ -9992,7 +9996,7 @@ class TCloudUiDialogComponent {
|
|
|
9992
9996
|
return this;
|
|
9993
9997
|
}
|
|
9994
9998
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9995
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 (
|
|
9999
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 (hasInputConfirmation)\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:3000;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:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--c-neutral-50);color:var(--c-neutral-700)}.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(--c-neutral-600);border:1px solid var(--c-neutral-300)}.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: [
|
|
9996
10000
|
trigger('fade', [
|
|
9997
10001
|
state('visible', style({ opacity: 1 })),
|
|
9998
10002
|
state('hide', style({ opacity: 0, top: '-38%' })),
|
|
@@ -10016,7 +10020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
10016
10020
|
]),
|
|
10017
10021
|
transition('visible => hide', animate('0.3s ease-out'))
|
|
10018
10022
|
])
|
|
10019
|
-
], 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 (
|
|
10023
|
+
], 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 (hasInputConfirmation)\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:3000;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:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--c-neutral-50);color:var(--c-neutral-700)}.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(--c-neutral-600);border:1px solid var(--c-neutral-300)}.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"] }]
|
|
10020
10024
|
}], propDecorators: { onKeydownHandler: [{
|
|
10021
10025
|
type: HostListener,
|
|
10022
10026
|
args: ['document:keydown.escape', ['$event']]
|
|
@@ -10030,7 +10034,7 @@ var TCloudUiDialogTextConfirmationEnum;
|
|
|
10030
10034
|
})(TCloudUiDialogTextConfirmationEnum || (TCloudUiDialogTextConfirmationEnum = {}));
|
|
10031
10035
|
|
|
10032
10036
|
class TCloudUiDialogModel {
|
|
10033
|
-
constructor(_title, _description, _loading = false, _disable = false, _disableClickOutside = false, _inputConfirmationText, _buttonConfirmText, _buttonCancelText) {
|
|
10037
|
+
constructor(_title, _description, _loading = false, _disable = false, _disableClickOutside = false, _inputConfirmationText, _buttonConfirmText, _buttonCancelText, _showInputConfirmation = true) {
|
|
10034
10038
|
this.title = _title;
|
|
10035
10039
|
this.message = _description;
|
|
10036
10040
|
this.loading = _loading;
|
|
@@ -10039,6 +10043,7 @@ class TCloudUiDialogModel {
|
|
|
10039
10043
|
this.inputConfirmationText = _inputConfirmationText;
|
|
10040
10044
|
this.buttonConfirmText = _buttonConfirmText;
|
|
10041
10045
|
this.buttonCancelText = _buttonCancelText;
|
|
10046
|
+
this.showInputConfirmation = _showInputConfirmation;
|
|
10042
10047
|
}
|
|
10043
10048
|
}
|
|
10044
10049
|
|
|
@@ -10057,7 +10062,7 @@ class TCloudUiDialogService {
|
|
|
10057
10062
|
}
|
|
10058
10063
|
open(_data = {}) {
|
|
10059
10064
|
const componentRef = this.createDialogComponent();
|
|
10060
|
-
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);
|
|
10065
|
+
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, _data.showInputConfirmation ?? true);
|
|
10061
10066
|
if (componentRef.instance.data.inputConfirmationText)
|
|
10062
10067
|
this.setTextConfirmation(componentRef.instance);
|
|
10063
10068
|
componentRef.instance.events.subscribe(event => {
|