@dev-tcloud/tcloud-ui 2.3.3 → 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.
Files changed (22) hide show
  1. package/esm2022/lib/_directives/tooltip/tooltip.directive.mjs +17 -11
  2. package/esm2022/lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-header/tcloud-ui-modal-header.component.mjs +10 -7
  3. package/esm2022/lib/_modules/tcloud-ui-modal/services/tcloud-modal.service.mjs +8 -1
  4. package/esm2022/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.mjs +14 -7
  5. package/esm2022/lib/_modules/tcloud-ui-progress-bar/tcloud-ui-progress-bar.component.mjs +28 -3
  6. package/esm2022/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-head/tcloud-ui-tab-head.component.mjs +11 -4
  7. package/esm2022/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-subtitle/tcloud-ui-tab-subtitle.component.mjs +17 -10
  8. package/esm2022/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-title/tcloud-ui-tab-title.component.mjs +17 -10
  9. package/esm2022/lib/_modules/tcloud-ui-tab-menu/services/tab-menu.service.mjs +10 -1
  10. package/fesm2022/dev-tcloud-tcloud-ui.mjs +118 -45
  11. package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
  12. package/lib/_directives/tooltip/tooltip.directive.d.ts +0 -1
  13. package/lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-header/tcloud-ui-modal-header.component.d.ts +4 -2
  14. package/lib/_modules/tcloud-ui-modal/services/tcloud-modal.service.d.ts +4 -0
  15. package/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.d.ts +2 -2
  16. package/lib/_modules/tcloud-ui-progress-bar/tcloud-ui-progress-bar.component.d.ts +3 -1
  17. package/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-head/tcloud-ui-tab-head.component.d.ts +3 -1
  18. package/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-subtitle/tcloud-ui-tab-subtitle.component.d.ts +1 -1
  19. package/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-title/tcloud-ui-tab-title.component.d.ts +1 -1
  20. package/lib/_modules/tcloud-ui-tab-menu/services/tab-menu.service.d.ts +5 -0
  21. package/package.json +1 -1
  22. package/scss/components/custom/tab-menu.scss +35 -34
package/fesm2022/dev-tcloud-tcloud-ui.mjs CHANGED
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
2
2
  import { Component, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, Injectable, EventEmitter, Output, ViewChild, forwardRef, Pipe, ViewEncapsulation, Directive, HostListener } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, DatePipe } from '@angular/common';
5
- import { Subject } from 'rxjs';
5
+ import { Subject, Subscription } from 'rxjs';
6
6
  import * as i1$1 from '@angular/router';
7
7
  import * as i2 from '@angular/forms';
8
8
  import { FormsModule, ReactiveFormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
@@ -98,6 +98,8 @@ class TabMenuService {
98
98
  this.info_tab = [];
99
99
  this.scrollSubject = new Subject();
100
100
  this.scrollState$ = this.scrollSubject.asObservable();
101
+ this.bottom_lineSubject = new Subject();
102
+ this.bottom_lineState$ = this.bottom_lineSubject.asObservable();
101
103
  this.tabSubject = new Subject();
102
104
  this.tabState$ = this.tabSubject.asObservable();
103
105
  this.loadingSubject = new Subject();
@@ -112,6 +114,13 @@ class TabMenuService {
112
114
  getTabScroll() {
113
115
  return this._scroll;
114
116
  }
117
+ setTabBottomLine(bottom_line) {
118
+ this._bottom_line = bottom_line;
119
+ this.bottom_lineSubject.next(bottom_line);
120
+ }
121
+ getTabBottomLine() {
122
+ return this._bottom_line;
123
+ }
115
124
  setTabLoading(loading) {
116
125
  this._loading = loading;
117
126
  this.loadingSubject.next(loading);
@@ -285,7 +294,9 @@ class TCloudUiTabTitleComponent {
285
294
  this.tab = '';
286
295
  this.active = false;
287
296
  this.loading = false;
297
+ this.bottom_line = false;
288
298
  this._disabled = false;
299
+ this.subscription = new Subscription();
289
300
  }
290
301
  ngOnInit() {
291
302
  if (!this.disabled) {
@@ -293,16 +304,23 @@ class TCloudUiTabTitleComponent {
293
304
  if (this.tab !== '') {
294
305
  this.active = (tab === this.tab);
295
306
  }
307
+ const bottom_line = this.tabMenuService.getTabBottomLine();
308
+ if (typeof bottom_line === 'boolean') {
309
+ this.bottom_line = bottom_line;
310
+ }
296
311
  }
297
- this.subscription = this.tabMenuService.tabState$.subscribe((tab) => {
312
+ this.subscription?.add(this.tabMenuService.tabState$.subscribe((tab) => {
298
313
  if (this.tab !== '') {
299
314
  this.active = (tab === this.tab);
300
315
  }
301
- });
316
+ }));
302
317
  this.loading = this.tabMenuService.getTabLoading();
303
- this.subscription2 = this.tabMenuService.loadingState$.subscribe((loading) => {
318
+ this.subscription?.add(this.tabMenuService.loadingState$.subscribe((loading) => {
304
319
  this.loading = loading;
305
- });
320
+ }));
321
+ this.subscription?.add(this.tabMenuService.bottom_lineState$.subscribe((bottom_line) => {
322
+ this.bottom_line = bottom_line;
323
+ }));
306
324
  }
307
325
  toTab() {
308
326
  if (!this.disabled) {
@@ -315,16 +333,13 @@ class TCloudUiTabTitleComponent {
315
333
  if (this.subscription) {
316
334
  this.subscription.unsubscribe();
317
335
  }
318
- if (this.subscription2) {
319
- this.subscription2.unsubscribe();
320
- }
321
336
  }
322
337
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabTitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
323
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabTitleComponent, selector: "tcloud-ui-tab-title", inputs: { tab: "tab", title: "title", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-title tab-title\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title-active{background:var(--tc-primary);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }); }
338
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabTitleComponent, selector: "tcloud-ui-tab-title", inputs: { tab: "tab", title: "title", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-title tab-title\" >\r\n <ng-content></ng-content>\r\n</button>\r\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\" ></div>", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title-active{background:var(--tc-primary);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }); }
324
339
  }
325
340
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabTitleComponent, decorators: [{
326
341
  type: Component,
327
- args: [{ selector: 'tcloud-ui-tab-title', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-title tab-title\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title-active{background:var(--tc-primary);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }]
342
+ args: [{ selector: 'tcloud-ui-tab-title', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-title tab-title\" >\r\n <ng-content></ng-content>\r\n</button>\r\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\" ></div>", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title-active{background:var(--tc-primary);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }]
328
343
  }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { tab: [{
329
344
  type: Input
330
345
  }], title: [{
@@ -347,6 +362,8 @@ class TCloudUiTabSubtitleComponent {
347
362
  this.active = false;
348
363
  this._disabled = false;
349
364
  this.loading = false;
365
+ this.bottom_line = false;
366
+ this.subscription = new Subscription();
350
367
  }
351
368
  ngOnInit() {
352
369
  if (!this.disabled) {
@@ -354,16 +371,23 @@ class TCloudUiTabSubtitleComponent {
354
371
  if (this.tab !== '') {
355
372
  this.active = (tab === this.tab);
356
373
  }
374
+ const bottom_line = this.tabMenuService.getTabBottomLine();
375
+ if (typeof bottom_line === 'boolean') {
376
+ this.bottom_line = bottom_line;
377
+ }
357
378
  }
358
- this.subscription = this.tabMenuService.tabState$.subscribe((tab) => {
379
+ this.subscription?.add(this.tabMenuService.tabState$.subscribe((tab) => {
359
380
  if (this.tab !== '') {
360
381
  this.active = (tab === this.tab);
361
382
  }
362
- });
383
+ }));
363
384
  this.loading = this.tabMenuService.getTabLoading();
364
- this.subscription2 = this.tabMenuService.loadingState$.subscribe((loading) => {
385
+ this.subscription?.add(this.tabMenuService.loadingState$.subscribe((loading) => {
365
386
  this.loading = loading;
366
- });
387
+ }));
388
+ this.subscription?.add(this.tabMenuService.bottom_lineState$.subscribe((bottom_line) => {
389
+ this.bottom_line = bottom_line;
390
+ }));
367
391
  }
368
392
  toTab() {
369
393
  if (!this.disabled) {
@@ -376,16 +400,13 @@ class TCloudUiTabSubtitleComponent {
376
400
  if (this.subscription) {
377
401
  this.subscription.unsubscribe();
378
402
  }
379
- if (this.subscription2) {
380
- this.subscription2.unsubscribe();
381
- }
382
403
  }
383
404
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabSubtitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
384
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabSubtitleComponent, selector: "tcloud-ui-tab-subtitle", inputs: { tab: "tab", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-subtitle-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-subtitle tab-subtitle\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-subtitle{cursor:pointer;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:0;margin:20px 10px}.tab-subtitle-active{color:var(--tc-primary)}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] }); }
405
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabSubtitleComponent, selector: "tcloud-ui-tab-subtitle", inputs: { tab: "tab", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-subtitle-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-subtitle tab-subtitle\" >\r\n <ng-content></ng-content>\r\n</button>\r\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\" ></div>\r\n", styles: [".tab-subtitle{cursor:pointer;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:0;margin:20px 10px;opacity:.8}.tab-subtitle:hover{opacity:1}.tab-subtitle-active{color:var(--tc-primary);opacity:1}.loading{cursor:progress!important}button:disabled{opacity:.6;cursor:not-allowed!important}button:disabled:hover{opacity:.6!important}\n"] }); }
385
406
  }
386
407
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabSubtitleComponent, decorators: [{
387
408
  type: Component,
388
- args: [{ selector: 'tcloud-ui-tab-subtitle', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-subtitle-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-subtitle tab-subtitle\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-subtitle{cursor:pointer;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:0;margin:20px 10px}.tab-subtitle-active{color:var(--tc-primary)}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] }]
409
+ args: [{ selector: 'tcloud-ui-tab-subtitle', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-subtitle-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-subtitle tab-subtitle\" >\r\n <ng-content></ng-content>\r\n</button>\r\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\" ></div>\r\n", styles: [".tab-subtitle{cursor:pointer;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:0;margin:20px 10px;opacity:.8}.tab-subtitle:hover{opacity:1}.tab-subtitle-active{color:var(--tc-primary);opacity:1}.loading{cursor:progress!important}button:disabled{opacity:.6;cursor:not-allowed!important}button:disabled:hover{opacity:.6!important}\n"] }]
389
410
  }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { tab: [{
390
411
  type: Input
391
412
  }], active: [{
@@ -402,13 +423,20 @@ class TCloudUiTabHeadComponent {
402
423
  }
403
424
  }
404
425
  get scroll() { return this._scroll; }
426
+ set bottom_line(bottom_line) {
427
+ if (typeof bottom_line === 'boolean') {
428
+ this._bottom_line = bottom_line;
429
+ this.tabMenuService.setTabBottomLine(bottom_line);
430
+ }
431
+ }
432
+ get bottom_line() { return this._bottom_line; }
405
433
  constructor(tabMenuService) {
406
434
  this.tabMenuService = tabMenuService;
407
435
  this._scroll = true;
408
436
  this.ID = '';
409
437
  this.background = true;
410
438
  this.backgroundColor = 'transparent'; // var(--cinza4)
411
- this.bottom_line = false;
439
+ this._bottom_line = false;
412
440
  }
413
441
  ngOnInit() {
414
442
  if (this.background) {
@@ -453,11 +481,11 @@ class TCloudUiTabHeadComponent {
453
481
  this.scrollSuave(ccs_s, action == 'next' ? wid + ccs_s : ccs_s - wid, 0, ccs);
454
482
  }
455
483
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
456
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { scroll: "scroll", background: "background", backgroundColor: "backgroundColor", bottom_line: "bottom_line" }, ngImport: i0, template: "\r\n\r\n<table class=\"tcloud-ui-tab-head area-navigation\">\r\n <tr>\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n\r\n </td>\r\n\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + backgroundColor + ';'\" [class.tab-full]=\"!scroll\" [class.tab-subtitle-line-bottom]=\"bottom_line\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}.tab-full{margin-left:0!important;margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
484
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { scroll: "scroll", background: "background", backgroundColor: "backgroundColor", bottom_line: "bottom_line" }, ngImport: i0, template: "\r\n\r\n<table class=\"tcloud-ui-tab-head area-navigation\">\r\n <tr>\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n\r\n </td>\r\n\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + backgroundColor + ';'\" [class.tab-full]=\"!scroll\" [class.tab-subtitle-line-bottom]=\"bottom_line\">\r\n <ng-content></ng-content> \r\n</div>\r\n<div class=\"hr-border-bottom\" *ngIf=\"bottom_line\"></div>\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}.hr-border-bottom{border-bottom:none;border-left:none;border-right:none;margin-top:0!important;border-top:1px solid #ccc;margin-bottom:0}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}.tab-full{margin-left:0!important;margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
457
485
  }
458
486
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
459
487
  type: Component,
460
- args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"tcloud-ui-tab-head area-navigation\">\r\n <tr>\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n\r\n </td>\r\n\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + backgroundColor + ';'\" [class.tab-full]=\"!scroll\" [class.tab-subtitle-line-bottom]=\"bottom_line\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}.tab-full{margin-left:0!important;margin-right:0!important}\n"] }]
488
+ args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"tcloud-ui-tab-head area-navigation\">\r\n <tr>\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n\r\n </td>\r\n\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + backgroundColor + ';'\" [class.tab-full]=\"!scroll\" [class.tab-subtitle-line-bottom]=\"bottom_line\">\r\n <ng-content></ng-content> \r\n</div>\r\n<div class=\"hr-border-bottom\" *ngIf=\"bottom_line\"></div>\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}.hr-border-bottom{border-bottom:none;border-left:none;border-right:none;margin-top:0!important;border-top:1px solid #ccc;margin-bottom:0}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}.tab-full{margin-left:0!important;margin-right:0!important}\n"] }]
461
489
  }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { scroll: [{
462
490
  type: Input
463
491
  }], background: [{
@@ -507,6 +535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
507
535
 
508
536
  class TcloudModalService {
509
537
  constructor() {
538
+ this.param_mode = '';
510
539
  this.param_confirm = {};
511
540
  this._stateClose = new Subject();
512
541
  this.stateClose$ = this._stateClose.asObservable();
@@ -516,6 +545,8 @@ class TcloudModalService {
516
545
  this.stateRespConfirm$ = this._stateRespConfirm.asObservable();
517
546
  this._stateLoading = new Subject();
518
547
  this.stateLoading$ = this._stateLoading.asObservable();
548
+ this._stateMode = new Subject();
549
+ this.stateMode$ = this._stateMode.asObservable();
519
550
  }
520
551
  toModal(action) {
521
552
  if (action === 'close') {
@@ -533,6 +564,10 @@ class TcloudModalService {
533
564
  this.param_confirm = confirm;
534
565
  this._stateConfirm.next(confirm);
535
566
  }
567
+ toMode(mode) {
568
+ this.param_mode = mode;
569
+ this._stateMode.next(mode);
570
+ }
536
571
  getLoading() {
537
572
  return this.loading;
538
573
  }
@@ -628,6 +663,8 @@ class TCloudUiModalComponent {
628
663
  /* BEGIN - Parametros para modo confirmacao */
629
664
  this._confirm = false;
630
665
  this._confirmText = 'Confirmo';
666
+ /* END --- Parametros para modo confirmacao */
667
+ this.subscription = new Subscription();
631
668
  /**
632
669
  * autoClose boolean - Indica se deverá ser fechado quando confirmar uma ação - default true
633
670
  */
@@ -636,6 +673,7 @@ class TCloudUiModalComponent {
636
673
  * maxWidth - number - Largura máxima do modal - default 500px
637
674
  */
638
675
  this.maxWidth = 500;
676
+ this.mode = '';
639
677
  this.control_open = false;
640
678
  this._open = false;
641
679
  this._loading = false;
@@ -645,7 +683,7 @@ class TCloudUiModalComponent {
645
683
  this.toAction = new EventEmitter();
646
684
  }
647
685
  ngOnInit() {
648
- this.subscription = this.tcloudModalService.stateClose$.subscribe((open) => {
686
+ this.subscription.add(this.tcloudModalService.stateClose$.subscribe((open) => {
649
687
  if (open) {
650
688
  /* OPEN */
651
689
  }
@@ -653,8 +691,8 @@ class TCloudUiModalComponent {
653
691
  /* CLOSE */
654
692
  this.toClose();
655
693
  }
656
- });
657
- this.subscriptionI = this.tcloudModalService.stateRespConfirm$.subscribe((resp) => {
694
+ }));
695
+ this.subscription.add(this.tcloudModalService.stateRespConfirm$.subscribe((resp) => {
658
696
  if (resp) {
659
697
  /* CONFIRMADO */
660
698
  this.toConfirm.emit(resp);
@@ -665,7 +703,10 @@ class TCloudUiModalComponent {
665
703
  this.toCancel.emit(resp);
666
704
  this.toClose('cancel');
667
705
  }
668
- });
706
+ }));
707
+ this.subscription.add(this.tcloudModalService.stateMode$.subscribe((resp) => {
708
+ this.mode = resp;
709
+ }));
669
710
  this.tcloudModalService.toConfirm(this.param_confirm);
670
711
  }
671
712
  toClose(action) {
@@ -695,7 +736,7 @@ class TCloudUiModalComponent {
695
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 }); }
696
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: [
697
738
  TcloudModalService
698
- ], 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: [
699
740
  trigger('fade', [
700
741
  state('visible', style({ opacity: 1 })),
701
742
  state('hide', style({ opacity: 0, top: '-38%' })),
@@ -721,7 +762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
721
762
  ]),
722
763
  transition('visible => hide', animate('0.3s ease-out'))
723
764
  ])
724
- ], 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"] }]
725
766
  }], ctorParameters: function () { return [{ type: TcloudModalService }]; }, propDecorators: { confirm: [{
726
767
  type: Input
727
768
  }], confirmText: [{
@@ -749,18 +790,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
749
790
  }] } });
750
791
 
751
792
  class TCloudUiModalHeaderComponent {
752
- constructor() {
793
+ constructor(_tcloudModalService) {
794
+ this._tcloudModalService = _tcloudModalService;
753
795
  this.mode = 'info';
754
796
  }
755
797
  ngOnInit() {
798
+ this._tcloudModalService.toMode(this.mode);
756
799
  }
757
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
758
- 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"] }] }); }
759
802
  }
760
803
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiModalHeaderComponent, decorators: [{
761
804
  type: Component,
762
- 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"] }]
763
- }], 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: [{
764
807
  type: Input
765
808
  }], title: [{
766
809
  type: Input
@@ -4598,14 +4641,18 @@ class TCloudUiTooltipDirective {
4598
4641
  };
4599
4642
  let hoverOutCallback = () => {
4600
4643
  this.remove = true;
4601
- const customDiv = document.querySelector('.tc-directive-tooltip');
4602
- if (customDiv) {
4603
- customDiv.remove();
4644
+ const customDivAll = document.querySelectorAll('.tc-directive-tooltip');
4645
+ if (customDivAll && customDivAll.length > 0) {
4646
+ customDivAll.forEach((_customDiv) => {
4647
+ if (_customDiv) {
4648
+ _customDiv.remove();
4649
+ }
4650
+ });
4604
4651
  }
4605
4652
  };
4606
4653
  hoverOutCallback;
4607
4654
  setTimeout(() => {
4608
- const scrollTop = window.scrollY || window.pageYOffset;
4655
+ const scrollTop = window?.scrollY || window?.pageYOffset;
4609
4656
  const tooltip = this.renderer.createElement('div');
4610
4657
  const rect = this.el.nativeElement?.getBoundingClientRect();
4611
4658
  // const direction = this.el.nativeElement?.attributes['ng-reflect--t-cdirection']?.value || 'top';
@@ -4642,15 +4689,17 @@ class TCloudUiTooltipDirective {
4642
4689
  }
4643
4690
  onMouseOut(event) {
4644
4691
  this.remove = true;
4645
- this.remove_tooltip(document.querySelector('.tc-directive-tooltip'));
4646
- }
4647
- remove_tooltip(customDiv) {
4648
- if (customDiv) {
4692
+ const customDivAll = document.querySelectorAll('.tc-directive-tooltip');
4693
+ if (customDivAll && customDivAll.length > 0) {
4649
4694
  setTimeout(() => {
4650
4695
  if (this.remove) {
4651
- customDiv.remove();
4696
+ customDivAll.forEach((_customDiv) => {
4697
+ if (_customDiv) {
4698
+ _customDiv.remove();
4699
+ }
4700
+ });
4652
4701
  }
4653
- }, 30);
4702
+ }, 25);
4654
4703
  }
4655
4704
  }
4656
4705
  set TCtooltip(tooltip) {
@@ -5707,6 +5756,8 @@ class TCloudUiProgressBarComponent {
5707
5756
  this._height = 'normal';
5708
5757
  this.progress_class = '';
5709
5758
  this.height_class = '';
5759
+ this.useDefaultBackground = true;
5760
+ this.showValue = true;
5710
5761
  }
5711
5762
  ngOnInit() {
5712
5763
  this.setMode();
@@ -5728,6 +5779,21 @@ class TCloudUiProgressBarComponent {
5728
5779
  case 'info':
5729
5780
  progress_class = 'progress-info';
5730
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;
5731
5797
  }
5732
5798
  this.progress_class = progress_class;
5733
5799
  }
@@ -5744,21 +5810,28 @@ class TCloudUiProgressBarComponent {
5744
5810
  case 'fat':
5745
5811
  height_class = 'height-fat';
5746
5812
  break;
5813
+ case 'very-fat':
5814
+ height_class = 'height-very-fat';
5815
+ break;
5747
5816
  }
5748
5817
  this.height_class = height_class;
5749
5818
  }
5750
5819
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5751
- 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);overflow:hidden}.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)}\n"] }); }
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"] }] }); }
5752
5821
  }
5753
5822
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiProgressBarComponent, decorators: [{
5754
5823
  type: Component,
5755
- 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);overflow:hidden}.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)}\n"] }]
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"] }]
5756
5825
  }], ctorParameters: function () { return []; }, propDecorators: { status: [{
5757
5826
  type: Input
5758
5827
  }], mode: [{
5759
5828
  type: Input
5760
5829
  }], height: [{
5761
5830
  type: Input
5831
+ }], useDefaultBackground: [{
5832
+ type: Input
5833
+ }], showValue: [{
5834
+ type: Input
5762
5835
  }] } });
5763
5836
 
5764
5837
  class TCloudUiProgressBarModule {