@dev-tcloud/tcloud-ui 2.3.4 → 2.3.5
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/esm2022/lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-header/tcloud-ui-modal-header.component.mjs +10 -7
- package/esm2022/lib/_modules/tcloud-ui-modal/services/tcloud-modal.service.mjs +8 -1
- package/esm2022/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.mjs +14 -7
- package/esm2022/lib/_modules/tcloud-ui-progress-bar/tcloud-ui-progress-bar.component.mjs +28 -3
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +52 -13
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-header/tcloud-ui-modal-header.component.d.ts +4 -2
- package/lib/_modules/tcloud-ui-modal/services/tcloud-modal.service.d.ts +4 -0
- package/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.d.ts +2 -2
- package/lib/_modules/tcloud-ui-progress-bar/tcloud-ui-progress-bar.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -535,6 +535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
535
535
|
|
|
536
536
|
class TcloudModalService {
|
|
537
537
|
constructor() {
|
|
538
|
+
this.param_mode = '';
|
|
538
539
|
this.param_confirm = {};
|
|
539
540
|
this._stateClose = new Subject();
|
|
540
541
|
this.stateClose$ = this._stateClose.asObservable();
|
|
@@ -544,6 +545,8 @@ class TcloudModalService {
|
|
|
544
545
|
this.stateRespConfirm$ = this._stateRespConfirm.asObservable();
|
|
545
546
|
this._stateLoading = new Subject();
|
|
546
547
|
this.stateLoading$ = this._stateLoading.asObservable();
|
|
548
|
+
this._stateMode = new Subject();
|
|
549
|
+
this.stateMode$ = this._stateMode.asObservable();
|
|
547
550
|
}
|
|
548
551
|
toModal(action) {
|
|
549
552
|
if (action === 'close') {
|
|
@@ -561,6 +564,10 @@ class TcloudModalService {
|
|
|
561
564
|
this.param_confirm = confirm;
|
|
562
565
|
this._stateConfirm.next(confirm);
|
|
563
566
|
}
|
|
567
|
+
toMode(mode) {
|
|
568
|
+
this.param_mode = mode;
|
|
569
|
+
this._stateMode.next(mode);
|
|
570
|
+
}
|
|
564
571
|
getLoading() {
|
|
565
572
|
return this.loading;
|
|
566
573
|
}
|
|
@@ -656,6 +663,8 @@ class TCloudUiModalComponent {
|
|
|
656
663
|
/* BEGIN - Parametros para modo confirmacao */
|
|
657
664
|
this._confirm = false;
|
|
658
665
|
this._confirmText = 'Confirmo';
|
|
666
|
+
/* END --- Parametros para modo confirmacao */
|
|
667
|
+
this.subscription = new Subscription();
|
|
659
668
|
/**
|
|
660
669
|
* autoClose boolean - Indica se deverá ser fechado quando confirmar uma ação - default true
|
|
661
670
|
*/
|
|
@@ -664,6 +673,7 @@ class TCloudUiModalComponent {
|
|
|
664
673
|
* maxWidth - number - Largura máxima do modal - default 500px
|
|
665
674
|
*/
|
|
666
675
|
this.maxWidth = 500;
|
|
676
|
+
this.mode = '';
|
|
667
677
|
this.control_open = false;
|
|
668
678
|
this._open = false;
|
|
669
679
|
this._loading = false;
|
|
@@ -673,7 +683,7 @@ class TCloudUiModalComponent {
|
|
|
673
683
|
this.toAction = new EventEmitter();
|
|
674
684
|
}
|
|
675
685
|
ngOnInit() {
|
|
676
|
-
this.subscription
|
|
686
|
+
this.subscription.add(this.tcloudModalService.stateClose$.subscribe((open) => {
|
|
677
687
|
if (open) {
|
|
678
688
|
/* OPEN */
|
|
679
689
|
}
|
|
@@ -681,8 +691,8 @@ class TCloudUiModalComponent {
|
|
|
681
691
|
/* CLOSE */
|
|
682
692
|
this.toClose();
|
|
683
693
|
}
|
|
684
|
-
});
|
|
685
|
-
this.
|
|
694
|
+
}));
|
|
695
|
+
this.subscription.add(this.tcloudModalService.stateRespConfirm$.subscribe((resp) => {
|
|
686
696
|
if (resp) {
|
|
687
697
|
/* CONFIRMADO */
|
|
688
698
|
this.toConfirm.emit(resp);
|
|
@@ -693,7 +703,10 @@ class TCloudUiModalComponent {
|
|
|
693
703
|
this.toCancel.emit(resp);
|
|
694
704
|
this.toClose('cancel');
|
|
695
705
|
}
|
|
696
|
-
});
|
|
706
|
+
}));
|
|
707
|
+
this.subscription.add(this.tcloudModalService.stateMode$.subscribe((resp) => {
|
|
708
|
+
this.mode = resp;
|
|
709
|
+
}));
|
|
697
710
|
this.tcloudModalService.toConfirm(this.param_confirm);
|
|
698
711
|
}
|
|
699
712
|
toClose(action) {
|
|
@@ -723,7 +736,7 @@ class TCloudUiModalComponent {
|
|
|
723
736
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiModalComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
724
737
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiModalComponent, selector: "tcloud-ui-modal", inputs: { confirm: "confirm", confirmText: "confirmText", autoClose: "autoClose", title: "title", maxWidth: "maxWidth", window: "window", open: "open", loading: "loading" }, outputs: { openChange: "openChange", toConfirm: "toConfirm", toCancel: "toCancel", toAction: "toAction" }, providers: [
|
|
725
738
|
TcloudModalService
|
|
726
|
-
], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\r\n\r\n<div class=\"tcloud-ui-modal base-modal\" *ngIf=\"open\">\r\n <div class=\"sub-modal\" [@fade]=\"'visible'\">\r\n <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\r\n <div class=\"area-top-actions\">\r\n <button type=\"button\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\r\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\r\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\r\n </button>\r\n </div>\r\n\r\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n\r\n <ng-content></ng-content>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Ex: Modal -->\r\n<!-- \r\n <tcloud-ui-modal [(open)]=\"open\">\r\n\r\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\r\n\r\n <tcloud-ui-modal-body>\r\n Conte\u00FAdo do modal aqui\r\n </tcloud-ui-modal-body>\r\n\r\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n </tcloud-ui-modal>\r\n\r\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\r\n-->\r\n\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n\r\n<!-- Ex: Confirm Modal -->\r\n<!-- \r\n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\r\n\r\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\r\n\r\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n </tcloud-ui-modal>\r\n\r\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\r\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.tc-modal-shadow{box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
739
|
+
], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\r\n\r\n<div class=\"tcloud-ui-modal base-modal\" *ngIf=\"open\">\r\n <div class=\"sub-modal\" [@fade]=\"'visible'\">\r\n <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\r\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\r\n <button type=\"button tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\r\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\r\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\r\n </button>\r\n </div>\r\n\r\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n\r\n <ng-content></ng-content>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Ex: Modal -->\r\n<!-- \r\n <tcloud-ui-modal [(open)]=\"open\">\r\n\r\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\r\n\r\n <tcloud-ui-modal-body>\r\n Conte\u00FAdo do modal aqui\r\n </tcloud-ui-modal-body>\r\n\r\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n </tcloud-ui-modal>\r\n\r\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\r\n-->\r\n\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n\r\n<!-- Ex: Confirm Modal -->\r\n<!-- \r\n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\r\n\r\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\r\n\r\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n </tcloud-ui-modal>\r\n\r\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\r\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.tc-modal-shadow{box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button i{color:var(--tc-gray-600)!important}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
727
740
|
trigger('fade', [
|
|
728
741
|
state('visible', style({ opacity: 1 })),
|
|
729
742
|
state('hide', style({ opacity: 0, top: '-38%' })),
|
|
@@ -749,7 +762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
749
762
|
]),
|
|
750
763
|
transition('visible => hide', animate('0.3s ease-out'))
|
|
751
764
|
])
|
|
752
|
-
], template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\r\n\r\n<div class=\"tcloud-ui-modal base-modal\" *ngIf=\"open\">\r\n <div class=\"sub-modal\" [@fade]=\"'visible'\">\r\n <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\r\n <div class=\"area-top-actions\">\r\n <button type=\"button\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\r\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\r\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\r\n </button>\r\n </div>\r\n\r\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n\r\n <ng-content></ng-content>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Ex: Modal -->\r\n<!-- \r\n <tcloud-ui-modal [(open)]=\"open\">\r\n\r\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\r\n\r\n <tcloud-ui-modal-body>\r\n Conte\u00FAdo do modal aqui\r\n </tcloud-ui-modal-body>\r\n\r\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n </tcloud-ui-modal>\r\n\r\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\r\n-->\r\n\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n\r\n<!-- Ex: Confirm Modal -->\r\n<!-- \r\n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\r\n\r\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\r\n\r\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n </tcloud-ui-modal>\r\n\r\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\r\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.tc-modal-shadow{box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"] }]
|
|
765
|
+
], template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\r\n\r\n<div class=\"tcloud-ui-modal base-modal\" *ngIf=\"open\">\r\n <div class=\"sub-modal\" [@fade]=\"'visible'\">\r\n <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\r\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\r\n <button type=\"button tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\r\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\r\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\r\n </button>\r\n </div>\r\n\r\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n\r\n <ng-content></ng-content>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Ex: Modal -->\r\n<!-- \r\n <tcloud-ui-modal [(open)]=\"open\">\r\n\r\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\r\n\r\n <tcloud-ui-modal-body>\r\n Conte\u00FAdo do modal aqui\r\n </tcloud-ui-modal-body>\r\n\r\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n </tcloud-ui-modal>\r\n\r\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\r\n-->\r\n\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n\r\n<!-- Ex: Confirm Modal -->\r\n<!-- \r\n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\r\n\r\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\r\n\r\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n </tcloud-ui-modal>\r\n\r\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\r\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.tc-modal-shadow{box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button i{color:var(--tc-gray-600)!important}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"] }]
|
|
753
766
|
}], ctorParameters: function () { return [{ type: TcloudModalService }]; }, propDecorators: { confirm: [{
|
|
754
767
|
type: Input
|
|
755
768
|
}], confirmText: [{
|
|
@@ -777,18 +790,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
777
790
|
}] } });
|
|
778
791
|
|
|
779
792
|
class TCloudUiModalHeaderComponent {
|
|
780
|
-
constructor() {
|
|
793
|
+
constructor(_tcloudModalService) {
|
|
794
|
+
this._tcloudModalService = _tcloudModalService;
|
|
781
795
|
this.mode = 'info';
|
|
782
796
|
}
|
|
783
797
|
ngOnInit() {
|
|
798
|
+
this._tcloudModalService.toMode(this.mode);
|
|
784
799
|
}
|
|
785
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
786
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiModalHeaderComponent, selector: "tcloud-ui-modal-header", inputs: { mode: "mode", title: "title" }, ngImport: i0, template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\r\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n <ng-content></ng-content>\r\n\r\n <hr>\r\n</div>\r\n", styles: ["h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.tc-modal-header{padding:12px;color:#fff;margin:-12px -12px 15px;border-radius:7px 7px 0 0}hr{display:none}.tc-mode-success{background:#62c46d}.tc-mode-info{background:var(--tc-primary)}.tc-mode-danger{background:#f06868}.tc-mode-warning{background:#e8b02e}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
800
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiModalHeaderComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
801
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiModalHeaderComponent, selector: "tcloud-ui-modal-header", inputs: { mode: "mode", title: "title" }, ngImport: i0, template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\r\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n <ng-content></ng-content>\r\n\r\n <hr>\r\n</div>\r\n", styles: ["h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.tc-modal-header{padding:12px;color:#fff;margin:-12px -12px 15px;border-radius:7px 7px 0 0}hr{display:none}.tc-mode-success{background:#62c46d}.tc-mode-info{background:var(--tc-primary)}.tc-mode-danger{background:#f06868}.tc-mode-warning{background:#e8b02e}.tc-mode-colorless{color:var(--tc-gray-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
787
802
|
}
|
|
788
803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiModalHeaderComponent, decorators: [{
|
|
789
804
|
type: Component,
|
|
790
|
-
args: [{ selector: 'tcloud-ui-modal-header', template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\r\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n <ng-content></ng-content>\r\n\r\n <hr>\r\n</div>\r\n", styles: ["h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.tc-modal-header{padding:12px;color:#fff;margin:-12px -12px 15px;border-radius:7px 7px 0 0}hr{display:none}.tc-mode-success{background:#62c46d}.tc-mode-info{background:var(--tc-primary)}.tc-mode-danger{background:#f06868}.tc-mode-warning{background:#e8b02e}\n"] }]
|
|
791
|
-
}], ctorParameters: function () { return []; }, propDecorators: { mode: [{
|
|
805
|
+
args: [{ selector: 'tcloud-ui-modal-header', template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\r\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n <ng-content></ng-content>\r\n\r\n <hr>\r\n</div>\r\n", styles: ["h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.tc-modal-header{padding:12px;color:#fff;margin:-12px -12px 15px;border-radius:7px 7px 0 0}hr{display:none}.tc-mode-success{background:#62c46d}.tc-mode-info{background:var(--tc-primary)}.tc-mode-danger{background:#f06868}.tc-mode-warning{background:#e8b02e}.tc-mode-colorless{color:var(--tc-gray-600)}\n"] }]
|
|
806
|
+
}], ctorParameters: function () { return [{ type: TcloudModalService }]; }, propDecorators: { mode: [{
|
|
792
807
|
type: Input
|
|
793
808
|
}], title: [{
|
|
794
809
|
type: Input
|
|
@@ -5741,6 +5756,8 @@ class TCloudUiProgressBarComponent {
|
|
|
5741
5756
|
this._height = 'normal';
|
|
5742
5757
|
this.progress_class = '';
|
|
5743
5758
|
this.height_class = '';
|
|
5759
|
+
this.useDefaultBackground = true;
|
|
5760
|
+
this.showValue = true;
|
|
5744
5761
|
}
|
|
5745
5762
|
ngOnInit() {
|
|
5746
5763
|
this.setMode();
|
|
@@ -5762,6 +5779,21 @@ class TCloudUiProgressBarComponent {
|
|
|
5762
5779
|
case 'info':
|
|
5763
5780
|
progress_class = 'progress-info';
|
|
5764
5781
|
break;
|
|
5782
|
+
case 'success':
|
|
5783
|
+
progress_class = 'progress-success';
|
|
5784
|
+
break;
|
|
5785
|
+
case 'gradient-success':
|
|
5786
|
+
progress_class = 'progress-gradient-success';
|
|
5787
|
+
break;
|
|
5788
|
+
case 'gradient-danger':
|
|
5789
|
+
progress_class = 'progress-gradient-danger';
|
|
5790
|
+
break;
|
|
5791
|
+
case 'gradient-warning':
|
|
5792
|
+
progress_class = 'progress-gradient-warning';
|
|
5793
|
+
break;
|
|
5794
|
+
case 'gradient-info':
|
|
5795
|
+
progress_class = 'progress-gradient-info';
|
|
5796
|
+
break;
|
|
5765
5797
|
}
|
|
5766
5798
|
this.progress_class = progress_class;
|
|
5767
5799
|
}
|
|
@@ -5778,21 +5810,28 @@ class TCloudUiProgressBarComponent {
|
|
|
5778
5810
|
case 'fat':
|
|
5779
5811
|
height_class = 'height-fat';
|
|
5780
5812
|
break;
|
|
5813
|
+
case 'very-fat':
|
|
5814
|
+
height_class = 'height-very-fat';
|
|
5815
|
+
break;
|
|
5781
5816
|
}
|
|
5782
5817
|
this.height_class = height_class;
|
|
5783
5818
|
}
|
|
5784
5819
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5785
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiProgressBarComponent, selector: "tcloud-ui-progress-bar", inputs: { status: "status", mode: "mode", height: "height" }, ngImport: i0, template: "<div class=\"tc-ui-progress-bar\">\n <div class=\"tc-progress-bar {{ height_class }}\">\n <div class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + status + '%'\"></div>\n </div>\n</div>", styles: [".tc-ui-progress-bar{border:1px solid #ccc;border-radius:9px}.tc-ui-progress-bar .height-slim{height:10px;border-radius:5px}.tc-ui-progress-bar .height-normal{height:15px;border-radius:8px}.tc-ui-progress-bar .height-fat{height:20px;border-radius:10px}.tc-ui-progress-bar .tc-progress-bar{border:1px solid #fff;background-color:var(--tc-gray-200)
|
|
5820
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiProgressBarComponent, selector: "tcloud-ui-progress-bar", inputs: { status: "status", mode: "mode", height: "height", useDefaultBackground: "useDefaultBackground", showValue: "showValue" }, ngImport: i0, template: "<div class=\"tc-ui-progress-bar tc-background-{{ progress_class }}\">\n <div class=\"tc-progress-bar {{ height_class }}\" [class.use-background]=\"useDefaultBackground\" >\n <div class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + status + '%'\"></div>\n <label *ngIf=\"height_class === 'height-very-fat' && showValue\" [class.fixed-left]=\"(+status >= 12)\" [style]=\"'left: '+ (70) +'px'\" class=\"indicative-value info-{{ progress_class }}\">{{ status }}%</label>\n </div>\n</div>", styles: [".tc-background-progress-gradient-success{border:none!important}.tc-background-progress-gradient-success .tc-progress-bar{background:rgb(47,234,155);background:linear-gradient(90deg,rgb(222,241,213) 0%,rgb(206,243,228) 100%)}.tc-background-progress-gradient-warning{border:none!important}.tc-background-progress-gradient-warning .tc-progress-bar{background:rgb(247,227,208);background:linear-gradient(90deg,rgb(247,227,208) 0%,rgb(247,217,216) 100%)}.tc-background-progress-gradient-info{border:none!important}.tc-background-progress-gradient-info .tc-progress-bar{background:rgb(47,234,155);background:linear-gradient(90deg,rgb(222,241,213) 0%,rgb(206,243,228) 100%)}.tc-background-progress-gradient-danger{border:none!important}.tc-background-progress-gradient-danger .tc-progress-bar{background:rgb(244,208,247);background:linear-gradient(90deg,rgb(244,208,247) 0%,rgb(238,167,165) 100%)}.tc-ui-progress-bar{border:1px solid #ccc;border-radius:9px}.tc-ui-progress-bar .height-slim{height:10px;border-radius:5px}.tc-ui-progress-bar .height-normal{height:15px;border-radius:8px}.tc-ui-progress-bar .height-fat{height:20px;border-radius:10px}.tc-ui-progress-bar .height-very-fat{height:24px;border-radius:10px}.tc-ui-progress-bar .tc-progress-bar{border:1px solid #fff;overflow:hidden}.tc-ui-progress-bar .tc-progress-bar.use-background{background-color:var(--tc-gray-200)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status{transition:width 2s ease;position:relative;bottom:1px}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-primary{background-color:var(--tc-primary)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-danger{background-color:var(--red)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-warning{background-color:var(--orange)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-info{background-color:var(--azul)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-success{background-color:var(--green2)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-success{background:rgb(47,234,155);background:linear-gradient(90deg,rgb(47,234,155) 0%,rgb(127,221,83) 100%)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-warning{background:rgb(255,191,26);background:linear-gradient(90deg,0%,rgb(255,191,26) 0%,rgb(255,64,128) 100%)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-info{background:rgb(47,234,155);background:linear-gradient(90deg,rgb(47,234,155) 0%,rgb(127,221,83) 100%)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-danger{background:rgb(234,47,103);background:linear-gradient(90deg,0%,rgb(233,47,102) 0%,rgb(208,46,46) 100%)}label.indicative-value{position:relative;top:-26px;z-index:1;font-size:17px;font-weight:500}label.indicative-value.info-progress-gradient-success,label.indicative-value.info-progress-success{color:var(--green2)}label.indicative-value.info-progress-gradient-anger,label.indicative-value.info-progress-danger{color:#d02e2e}label.indicative-value.info-progress-gradient-warning,label.indicative-value.info-progress-warning{color:#f7b50c}label.indicative-value.fixed-left{left:16px!important;color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
5786
5821
|
}
|
|
5787
5822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiProgressBarComponent, decorators: [{
|
|
5788
5823
|
type: Component,
|
|
5789
|
-
args: [{ selector: 'tcloud-ui-progress-bar', template: "<div class=\"tc-ui-progress-bar\">\n <div class=\"tc-progress-bar {{ height_class }}\">\n <div class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + status + '%'\"></div>\n </div>\n</div>", styles: [".tc-ui-progress-bar{border:1px solid #ccc;border-radius:9px}.tc-ui-progress-bar .height-slim{height:10px;border-radius:5px}.tc-ui-progress-bar .height-normal{height:15px;border-radius:8px}.tc-ui-progress-bar .height-fat{height:20px;border-radius:10px}.tc-ui-progress-bar .tc-progress-bar{border:1px solid #fff;background-color:var(--tc-gray-200)
|
|
5824
|
+
args: [{ selector: 'tcloud-ui-progress-bar', template: "<div class=\"tc-ui-progress-bar tc-background-{{ progress_class }}\">\n <div class=\"tc-progress-bar {{ height_class }}\" [class.use-background]=\"useDefaultBackground\" >\n <div class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + status + '%'\"></div>\n <label *ngIf=\"height_class === 'height-very-fat' && showValue\" [class.fixed-left]=\"(+status >= 12)\" [style]=\"'left: '+ (70) +'px'\" class=\"indicative-value info-{{ progress_class }}\">{{ status }}%</label>\n </div>\n</div>", styles: [".tc-background-progress-gradient-success{border:none!important}.tc-background-progress-gradient-success .tc-progress-bar{background:rgb(47,234,155);background:linear-gradient(90deg,rgb(222,241,213) 0%,rgb(206,243,228) 100%)}.tc-background-progress-gradient-warning{border:none!important}.tc-background-progress-gradient-warning .tc-progress-bar{background:rgb(247,227,208);background:linear-gradient(90deg,rgb(247,227,208) 0%,rgb(247,217,216) 100%)}.tc-background-progress-gradient-info{border:none!important}.tc-background-progress-gradient-info .tc-progress-bar{background:rgb(47,234,155);background:linear-gradient(90deg,rgb(222,241,213) 0%,rgb(206,243,228) 100%)}.tc-background-progress-gradient-danger{border:none!important}.tc-background-progress-gradient-danger .tc-progress-bar{background:rgb(244,208,247);background:linear-gradient(90deg,rgb(244,208,247) 0%,rgb(238,167,165) 100%)}.tc-ui-progress-bar{border:1px solid #ccc;border-radius:9px}.tc-ui-progress-bar .height-slim{height:10px;border-radius:5px}.tc-ui-progress-bar .height-normal{height:15px;border-radius:8px}.tc-ui-progress-bar .height-fat{height:20px;border-radius:10px}.tc-ui-progress-bar .height-very-fat{height:24px;border-radius:10px}.tc-ui-progress-bar .tc-progress-bar{border:1px solid #fff;overflow:hidden}.tc-ui-progress-bar .tc-progress-bar.use-background{background-color:var(--tc-gray-200)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status{transition:width 2s ease;position:relative;bottom:1px}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-primary{background-color:var(--tc-primary)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-danger{background-color:var(--red)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-warning{background-color:var(--orange)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-info{background-color:var(--azul)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-success{background-color:var(--green2)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-success{background:rgb(47,234,155);background:linear-gradient(90deg,rgb(47,234,155) 0%,rgb(127,221,83) 100%)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-warning{background:rgb(255,191,26);background:linear-gradient(90deg,0%,rgb(255,191,26) 0%,rgb(255,64,128) 100%)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-info{background:rgb(47,234,155);background:linear-gradient(90deg,rgb(47,234,155) 0%,rgb(127,221,83) 100%)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-danger{background:rgb(234,47,103);background:linear-gradient(90deg,0%,rgb(233,47,102) 0%,rgb(208,46,46) 100%)}label.indicative-value{position:relative;top:-26px;z-index:1;font-size:17px;font-weight:500}label.indicative-value.info-progress-gradient-success,label.indicative-value.info-progress-success{color:var(--green2)}label.indicative-value.info-progress-gradient-anger,label.indicative-value.info-progress-danger{color:#d02e2e}label.indicative-value.info-progress-gradient-warning,label.indicative-value.info-progress-warning{color:#f7b50c}label.indicative-value.fixed-left{left:16px!important;color:#fff!important}\n"] }]
|
|
5790
5825
|
}], ctorParameters: function () { return []; }, propDecorators: { status: [{
|
|
5791
5826
|
type: Input
|
|
5792
5827
|
}], mode: [{
|
|
5793
5828
|
type: Input
|
|
5794
5829
|
}], height: [{
|
|
5795
5830
|
type: Input
|
|
5831
|
+
}], useDefaultBackground: [{
|
|
5832
|
+
type: Input
|
|
5833
|
+
}], showValue: [{
|
|
5834
|
+
type: Input
|
|
5796
5835
|
}] } });
|
|
5797
5836
|
|
|
5798
5837
|
class TCloudUiProgressBarModule {
|