@dev-tcloud/tcloud-ui 6.20.0 → 6.20.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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, EventEmitter, Input, Output, InjectionToken, Optional, Inject, inject, signal, Pipe, forwardRef, ViewChild, input, effect, Directive, ViewEncapsulation, SkipSelf, ChangeDetectionStrategy, HostListener, ChangeDetectorRef, computed, ApplicationRef, output, model, ContentChildren, viewChild,
|
|
2
|
+
import { Injectable, Component, EventEmitter, Input, Output, InjectionToken, Optional, Inject, inject, signal, Pipe, forwardRef, ViewChild, input, effect, Directive, ViewEncapsulation, SkipSelf, ChangeDetectionStrategy, HostListener, ChangeDetectorRef, computed, ApplicationRef, output, model, ContentChildren, viewChild, NgModule, makeEnvironmentProviders } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
|
|
5
5
|
import { Subject, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, map } from 'rxjs';
|
|
@@ -9216,7 +9216,7 @@ class TCloudUiDialogComponent {
|
|
|
9216
9216
|
return this;
|
|
9217
9217
|
}
|
|
9218
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:
|
|
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: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(--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
9220
|
trigger('fade', [
|
|
9221
9221
|
state('visible', style({ opacity: 1 })),
|
|
9222
9222
|
state('hide', style({ opacity: 0, top: '-38%' })),
|
|
@@ -9240,7 +9240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
9240
9240
|
]),
|
|
9241
9241
|
transition('visible => hide', animate('0.3s ease-out'))
|
|
9242
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:
|
|
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: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(--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
9244
|
}], propDecorators: { onKeydownHandler: [{
|
|
9245
9245
|
type: HostListener,
|
|
9246
9246
|
args: ['document:keydown.escape', ['$event']]
|
|
@@ -9270,34 +9270,40 @@ class TCloudUiDialogService {
|
|
|
9270
9270
|
constructor() {
|
|
9271
9271
|
// * [Injects]
|
|
9272
9272
|
this.i18n = inject(I18nService);
|
|
9273
|
-
this.factoryResolver = inject(ComponentFactoryResolver);
|
|
9274
9273
|
}
|
|
9275
9274
|
/**
|
|
9276
9275
|
* Método usado para realizar a configuração de 'ViewContainerRef'
|
|
9277
9276
|
* @param viewContainerRef Obj
|
|
9278
9277
|
*/
|
|
9279
9278
|
setRootViewContainerRef(viewContainerRef) {
|
|
9280
|
-
if (!
|
|
9281
|
-
|
|
9279
|
+
if (!viewContainerRef)
|
|
9280
|
+
return;
|
|
9281
|
+
this.rootViewContainer = viewContainerRef;
|
|
9282
9282
|
}
|
|
9283
9283
|
/**
|
|
9284
9284
|
* Método usado para abrir o modal de dialog
|
|
9285
9285
|
* @param _data Info do dialog
|
|
9286
9286
|
*/
|
|
9287
9287
|
open(_data = {}) {
|
|
9288
|
-
|
|
9289
|
-
|
|
9290
|
-
|
|
9291
|
-
|
|
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);
|
|
9292
9298
|
// * Configura o texto do input de confirmação
|
|
9293
|
-
if (
|
|
9294
|
-
this.setTextConfirmation(
|
|
9295
|
-
|
|
9299
|
+
if (componentRef.instance.data.inputConfirmationText)
|
|
9300
|
+
this.setTextConfirmation(componentRef.instance);
|
|
9301
|
+
componentRef.instance.events.subscribe(event => {
|
|
9296
9302
|
// * Fecha o dialogo
|
|
9297
9303
|
if (event === TCloudUiDialogEventsEnum.close)
|
|
9298
|
-
|
|
9304
|
+
componentRef.destroy();
|
|
9299
9305
|
});
|
|
9300
|
-
return
|
|
9306
|
+
return componentRef.instance;
|
|
9301
9307
|
}
|
|
9302
9308
|
/**
|
|
9303
9309
|
* Método usado para configurar o texto do input de confirmação
|