@dev-tcloud/tcloud-ui 0.0.70 → 0.0.72
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/esm2020/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.mjs +2 -2
- package/esm2020/lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-footer/tcloud-ui-modal-footer.component.mjs +2 -1
- package/esm2020/lib/_modules/tcloud-ui-modal/services/tcloud-modal.service.mjs +15 -1
- package/esm2020/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.mjs +13 -19
- package/fesm2015/dev-tcloud-tcloud-ui.mjs +28 -19
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +28 -19
- package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-modal/services/tcloud-modal.service.d.ts +1 -0
- package/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -489,6 +489,9 @@ class TcloudModalService {
|
|
|
489
489
|
this.stateLoading$ = this._stateLoading.asObservable();
|
|
490
490
|
}
|
|
491
491
|
toModal(action) {
|
|
492
|
+
if (action === 'close') {
|
|
493
|
+
this.fixed_body('off');
|
|
494
|
+
}
|
|
492
495
|
this._stateClose.next((action === 'open'));
|
|
493
496
|
}
|
|
494
497
|
toRespConfirm(resp) {
|
|
@@ -508,6 +511,17 @@ class TcloudModalService {
|
|
|
508
511
|
this.loading = loading;
|
|
509
512
|
this._stateLoading.next(loading);
|
|
510
513
|
}
|
|
514
|
+
fixed_body(fixed) {
|
|
515
|
+
let body = document.getElementsByTagName("BODY")[0];
|
|
516
|
+
if (body && body.style) {
|
|
517
|
+
if (fixed === 'on') {
|
|
518
|
+
body.style.overflowY = "hidden";
|
|
519
|
+
}
|
|
520
|
+
if (fixed === 'off') {
|
|
521
|
+
body.style.removeProperty('overflow-y');
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
}
|
|
511
525
|
}
|
|
512
526
|
TcloudModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
513
527
|
TcloudModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudModalService });
|
|
@@ -537,6 +551,7 @@ class TCloudUiModalComponent {
|
|
|
537
551
|
* maxWidth - number - Largura máxima do modal - default 500px
|
|
538
552
|
*/
|
|
539
553
|
this.maxWidth = 500;
|
|
554
|
+
this.control_open = false;
|
|
540
555
|
this._open = false;
|
|
541
556
|
this._loading = false;
|
|
542
557
|
this.openChange = new EventEmitter();
|
|
@@ -586,8 +601,10 @@ class TCloudUiModalComponent {
|
|
|
586
601
|
* open - boolean - Variável de controle para exibição do modal - obrigatório
|
|
587
602
|
*/
|
|
588
603
|
set open(open) {
|
|
604
|
+
this.control_open = open;
|
|
605
|
+
this.checkIsOpen();
|
|
589
606
|
this._open = open;
|
|
590
|
-
this.fixed_body((open) ? 'on' : 'off');
|
|
607
|
+
this.tcloudModalService.fixed_body((open) ? 'on' : 'off');
|
|
591
608
|
}
|
|
592
609
|
get open() { return this._open; }
|
|
593
610
|
/**
|
|
@@ -624,33 +641,24 @@ class TCloudUiModalComponent {
|
|
|
624
641
|
}
|
|
625
642
|
toClose(action) {
|
|
626
643
|
if (this.autoClose) {
|
|
644
|
+
this.control_open = false;
|
|
627
645
|
this.open = false;
|
|
628
646
|
this.openChange.emit(false);
|
|
629
647
|
}
|
|
630
648
|
action = (action) ? action : 'close';
|
|
631
649
|
this.toAction.emit(action);
|
|
632
|
-
this.fixed_body('off');
|
|
650
|
+
this.tcloudModalService.fixed_body('off');
|
|
633
651
|
}
|
|
634
652
|
checkIsOpen() {
|
|
635
|
-
if (this.
|
|
636
|
-
this.fixed_body('on');
|
|
653
|
+
if (this.control_open) {
|
|
654
|
+
this.tcloudModalService.fixed_body('on');
|
|
637
655
|
}
|
|
638
656
|
else {
|
|
639
|
-
this.fixed_body('off');
|
|
640
|
-
}
|
|
641
|
-
}
|
|
642
|
-
fixed_body(fixed) {
|
|
643
|
-
let body = document.getElementsByTagName("BODY")[0];
|
|
644
|
-
if (body && body.style) {
|
|
645
|
-
if (fixed === 'on') {
|
|
646
|
-
body.style.overflowY = "hidden";
|
|
647
|
-
}
|
|
648
|
-
if (fixed === 'off') {
|
|
649
|
-
body.style.removeProperty('overflow-y');
|
|
650
|
-
}
|
|
657
|
+
this.tcloudModalService.fixed_body('off');
|
|
651
658
|
}
|
|
652
659
|
}
|
|
653
660
|
ngOnDestroy() {
|
|
661
|
+
this.checkIsOpen();
|
|
654
662
|
if (this.subscription) {
|
|
655
663
|
this.subscription.unsubscribe();
|
|
656
664
|
}
|
|
@@ -659,7 +667,7 @@ class TCloudUiModalComponent {
|
|
|
659
667
|
TCloudUiModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
660
668
|
TCloudUiModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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: [
|
|
661
669
|
TcloudModalService
|
|
662
|
-
], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"
|
|
670
|
+
], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\r\n\r\n<div class=\"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}.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: [
|
|
663
671
|
trigger('fade', [
|
|
664
672
|
state('visible', style({ opacity: 1 })),
|
|
665
673
|
state('hide', style({ opacity: 0, top: '-38%' })),
|
|
@@ -684,7 +692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
684
692
|
]),
|
|
685
693
|
transition('visible => hide', animate('0.3s ease-out'))
|
|
686
694
|
])
|
|
687
|
-
], template: "<div class=\"tc-background-modal\" *ngIf=\"
|
|
695
|
+
], template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\r\n\r\n<div class=\"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}.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"] }]
|
|
688
696
|
}], ctorParameters: function () { return [{ type: TcloudModalService }]; }, propDecorators: { confirm: [{
|
|
689
697
|
type: Input
|
|
690
698
|
}], confirmText: [{
|
|
@@ -775,6 +783,7 @@ class TCloudUiModalFooterComponent {
|
|
|
775
783
|
this.subscription = this.tcloudModalService.stateLoading$.subscribe((loading) => { this.loading = loading; });
|
|
776
784
|
}
|
|
777
785
|
ngOnDestroy() {
|
|
786
|
+
this.tcloudModalService.fixed_body('off');
|
|
778
787
|
if (this.subscription) {
|
|
779
788
|
this.subscription.unsubscribe();
|
|
780
789
|
}
|
|
@@ -3301,7 +3310,7 @@ class TCloudUiFiltersComponent {
|
|
|
3301
3310
|
}
|
|
3302
3311
|
});
|
|
3303
3312
|
}
|
|
3304
|
-
console.log('onSubmit', this.filters);
|
|
3313
|
+
// console.log('onSubmit', this.filters);
|
|
3305
3314
|
this.onSubmit.emit(this.filters);
|
|
3306
3315
|
}
|
|
3307
3316
|
collectionFind(obj, path) {
|