@dev-tcloud/tcloud-ui 4.1.1 → 4.2.1
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/_directives/tooltip/tooltip.directive.mjs +131 -86
- package/esm2022/lib/_modules/tcloud-ui-number-step/tcloud-ui-number-step.component.mjs +17 -83
- package/esm2022/lib/_modules/tcloud-ui-number-step/tcloud-ui-number-step.module.mjs +10 -7
- package/esm2022/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-head/tcloud-ui-tab-head.component.mjs +3 -3
- package/esm2022/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-subtitle/tcloud-ui-tab-subtitle.component.mjs +3 -3
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +159 -177
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_directives/tooltip/tooltip.directive.d.ts +14 -6
- package/lib/_modules/tcloud-ui-accordion/services/tcloud-ui-accordion.service.d.ts +3 -3
- package/lib/_modules/tcloud-ui-datepicker/tcloud-ui-datepicker.component.d.ts +2 -2
- package/lib/_modules/tcloud-ui-datepicker-time/tcloud-ui-datepicker-time.component.d.ts +1 -1
- package/lib/_modules/tcloud-ui-modal/services/tcloud-modal.service.d.ts +1 -1
- package/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.d.ts +1 -1
- package/lib/_modules/tcloud-ui-number-step/tcloud-ui-number-step.component.d.ts +8 -24
- package/lib/_modules/tcloud-ui-tab-menu/services/tab-menu.service.d.ts +5 -5
- package/package.json +1 -1
- package/scss/components/custom/tab-menu.scss +12 -5
|
@@ -402,11 +402,11 @@ class TCloudUiTabSubtitleComponent {
|
|
|
402
402
|
}
|
|
403
403
|
}
|
|
404
404
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TCloudUiTabSubtitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
405
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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\"
|
|
405
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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\r\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\"></div>", styles: [".tab-subtitle{cursor:pointer;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:0;margin:20px 0;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"] }); }
|
|
406
406
|
}
|
|
407
407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TCloudUiTabSubtitleComponent, decorators: [{
|
|
408
408
|
type: Component,
|
|
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\"
|
|
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\r\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\"></div>", styles: [".tab-subtitle{cursor:pointer;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:0;margin:20px 0;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"] }]
|
|
410
410
|
}], ctorParameters: () => [{ type: TabMenuService }], propDecorators: { tab: [{
|
|
411
411
|
type: Input
|
|
412
412
|
}], active: [{
|
|
@@ -481,11 +481,11 @@ class TCloudUiTabHeadComponent {
|
|
|
481
481
|
this.scrollSuave(ccs_s, action == 'next' ? wid + ccs_s : ccs_s - wid, 0, ccs);
|
|
482
482
|
}
|
|
483
483
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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
|
|
484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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<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"] }] }); }
|
|
485
485
|
}
|
|
486
486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
|
|
487
487
|
type: Component,
|
|
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
|
|
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\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"] }]
|
|
489
489
|
}], ctorParameters: () => [{ type: TabMenuService }], propDecorators: { scroll: [{
|
|
490
490
|
type: Input
|
|
491
491
|
}], background: [{
|
|
@@ -916,14 +916,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
916
916
|
}]
|
|
917
917
|
}] });
|
|
918
918
|
|
|
919
|
-
|
|
919
|
+
class Step {
|
|
920
920
|
constructor() {
|
|
921
921
|
this.status = '';
|
|
922
922
|
this.index = 0;
|
|
923
923
|
this.class = '';
|
|
924
924
|
this.second_class = '';
|
|
925
925
|
}
|
|
926
|
-
}
|
|
926
|
+
}
|
|
927
927
|
class TCloudUiLineStepCircleComponent {
|
|
928
928
|
set active(active) {
|
|
929
929
|
if (active && active !== this._active) {
|
|
@@ -2593,100 +2593,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
2593
2593
|
}]
|
|
2594
2594
|
}] });
|
|
2595
2595
|
|
|
2596
|
-
class Step {
|
|
2597
|
-
constructor() {
|
|
2598
|
-
this.status = '';
|
|
2599
|
-
this.index = 0;
|
|
2600
|
-
this.class = '';
|
|
2601
|
-
this.second_class = '';
|
|
2602
|
-
}
|
|
2603
|
-
}
|
|
2604
2596
|
class TCloudUiNumberStepComponent {
|
|
2605
|
-
set active(active) {
|
|
2606
|
-
if (active && active !== this._active) {
|
|
2607
|
-
this._active = active;
|
|
2608
|
-
this.build_steps();
|
|
2609
|
-
}
|
|
2610
|
-
}
|
|
2611
|
-
get active() { return this._active; }
|
|
2612
|
-
set inactives(inactives) {
|
|
2613
|
-
if (inactives && inactives !== this._inactives) {
|
|
2614
|
-
this._inactives = inactives;
|
|
2615
|
-
this.build_steps();
|
|
2616
|
-
}
|
|
2617
|
-
}
|
|
2618
|
-
get inactives() { return this._inactives; }
|
|
2619
|
-
set complete(complete) {
|
|
2620
|
-
if (complete && complete !== this._complete) {
|
|
2621
|
-
this._complete = complete;
|
|
2622
|
-
this.build_steps();
|
|
2623
|
-
}
|
|
2624
|
-
}
|
|
2625
|
-
get complete() { return this._complete; }
|
|
2626
2597
|
constructor() {
|
|
2627
|
-
this.
|
|
2628
|
-
this.
|
|
2629
|
-
this._active = 0;
|
|
2630
|
-
this._inactives = [];
|
|
2631
|
-
this._complete = false;
|
|
2632
|
-
this.trilha = new Array();
|
|
2633
|
-
}
|
|
2634
|
-
ngOnInit() {
|
|
2635
|
-
setTimeout(() => { this.build_steps(); });
|
|
2598
|
+
this.inactives = [];
|
|
2599
|
+
this.clickStep = new EventEmitter();
|
|
2636
2600
|
}
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
for (let i = 0; i < this.step; i++) {
|
|
2641
|
-
(trilha).push({
|
|
2642
|
-
status: '',
|
|
2643
|
-
index: i + 1,
|
|
2644
|
-
class: 'step-default',
|
|
2645
|
-
second_class: '',
|
|
2646
|
-
});
|
|
2647
|
-
}
|
|
2648
|
-
}
|
|
2649
|
-
if (this.active > this.step) {
|
|
2650
|
-
this.active = this.step;
|
|
2651
|
-
this.complete = true;
|
|
2652
|
-
}
|
|
2653
|
-
if (this.complete) {
|
|
2654
|
-
this.active = this.step;
|
|
2655
|
-
}
|
|
2656
|
-
if (this.active && this.active > 0) {
|
|
2657
|
-
for (let i = 0; i < this.active; i++) {
|
|
2658
|
-
trilha[i].class = "step-progress";
|
|
2659
|
-
if ((i + 1) === this.active && !this.complete) {
|
|
2660
|
-
trilha[i].class = "step-active";
|
|
2661
|
-
}
|
|
2662
|
-
}
|
|
2663
|
-
}
|
|
2664
|
-
if (this.inactives && (this.inactives).length > 0) {
|
|
2665
|
-
for (let i = 0; i < (this.inactives).length; i++) {
|
|
2666
|
-
const icon = this.inactives[i];
|
|
2667
|
-
if (icon && icon > 0) {
|
|
2668
|
-
trilha[(icon - 1)].second_class = "step-inactive";
|
|
2669
|
-
}
|
|
2670
|
-
}
|
|
2671
|
-
}
|
|
2672
|
-
this.trilha = trilha;
|
|
2601
|
+
isInactive(_stepNumber) {
|
|
2602
|
+
const isInactive = this.inactives.find(x => x == _stepNumber);
|
|
2603
|
+
return isInactive ? true : false;
|
|
2673
2604
|
}
|
|
2674
2605
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TCloudUiNumberStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2675
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: TCloudUiNumberStepComponent, selector: "tcloud-ui-number-step", inputs: { step: "step",
|
|
2606
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: TCloudUiNumberStepComponent, selector: "tcloud-ui-number-step", inputs: { step: "step", active: "active", complete: "complete", useIconCheck: "useIconCheck", inactives: "inactives" }, outputs: { clickStep: "clickStep" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of [].constructor(step); let i = index\">\r\n\r\n <!-- Item circle -->\r\n @let numberStep = i + 1;\r\n @let inactive = isInactive(numberStep);\r\n @let last = (numberStep === step);\r\n <div\r\n class=\"container-circle\"\r\n [class.active]=\"(numberStep <= active) && !inactive\"\r\n [class.completed]=\"complete\"\r\n [class.disable]=\"inactive\"\r\n (click)=\"clickStep.emit(numberStep)\">\r\n\r\n <!-- Number -->\r\n <span *ngIf=\"(!complete) && (!inactive) && (numberStep >= active)\">{{ numberStep }}</span>\r\n\r\n <!-- Icon check -->\r\n <i *ngIf=\"(complete) || (!inactive) && (numberStep < active)\" class=\"fas fa-check\"></i>\r\n\r\n <!-- Icon disabled -->\r\n <i *ngIf=\"(!complete) && (inactive)\" class=\"far fa-circle\"></i>\r\n </div>\r\n\r\n <!-- Line progress -->\r\n <div *ngIf=\"!last\" class=\"container-line-progress\">\r\n <div\r\n class=\"line-progress\"\r\n [class.completed]=\"(complete) || (numberStep < active)\">\r\n </div>\r\n </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center}:host .container-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:ease-in-out .3s;border:solid 1px #ccc;cursor:default}:host .container-circle.active,:host .container-circle.completed{border:none;cursor:pointer;color:var(--white);background-color:var(--primary)}:host .container-circle.disable{cursor:not-allowed;color:#ccc;background-color:#fbfbfb}:host .container-line-progress{width:72px;height:2px;position:relative;background-color:#ccc}:host .container-line-progress .line-progress{width:0;height:100%;position:absolute;transition:ease-in-out .3s;background-color:var(--primary)}:host .container-line-progress .line-progress.completed{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
2676
2607
|
}
|
|
2677
2608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TCloudUiNumberStepComponent, decorators: [{
|
|
2678
2609
|
type: Component,
|
|
2679
|
-
args: [{ selector: 'tcloud-ui-number-step', template: "<
|
|
2680
|
-
}],
|
|
2610
|
+
args: [{ selector: 'tcloud-ui-number-step', template: "<ng-container *ngFor=\"let item of [].constructor(step); let i = index\">\r\n\r\n <!-- Item circle -->\r\n @let numberStep = i + 1;\r\n @let inactive = isInactive(numberStep);\r\n @let last = (numberStep === step);\r\n <div\r\n class=\"container-circle\"\r\n [class.active]=\"(numberStep <= active) && !inactive\"\r\n [class.completed]=\"complete\"\r\n [class.disable]=\"inactive\"\r\n (click)=\"clickStep.emit(numberStep)\">\r\n\r\n <!-- Number -->\r\n <span *ngIf=\"(!complete) && (!inactive) && (numberStep >= active)\">{{ numberStep }}</span>\r\n\r\n <!-- Icon check -->\r\n <i *ngIf=\"(complete) || (!inactive) && (numberStep < active)\" class=\"fas fa-check\"></i>\r\n\r\n <!-- Icon disabled -->\r\n <i *ngIf=\"(!complete) && (inactive)\" class=\"far fa-circle\"></i>\r\n </div>\r\n\r\n <!-- Line progress -->\r\n <div *ngIf=\"!last\" class=\"container-line-progress\">\r\n <div\r\n class=\"line-progress\"\r\n [class.completed]=\"(complete) || (numberStep < active)\">\r\n </div>\r\n </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center}:host .container-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:ease-in-out .3s;border:solid 1px #ccc;cursor:default}:host .container-circle.active,:host .container-circle.completed{border:none;cursor:pointer;color:var(--white);background-color:var(--primary)}:host .container-circle.disable{cursor:not-allowed;color:#ccc;background-color:#fbfbfb}:host .container-line-progress{width:72px;height:2px;position:relative;background-color:#ccc}:host .container-line-progress .line-progress{width:0;height:100%;position:absolute;transition:ease-in-out .3s;background-color:var(--primary)}:host .container-line-progress .line-progress.completed{width:100%}\n"] }]
|
|
2611
|
+
}], propDecorators: { step: [{
|
|
2612
|
+
type: Input,
|
|
2613
|
+
args: [{ required: true }]
|
|
2614
|
+
}], active: [{
|
|
2681
2615
|
type: Input
|
|
2682
|
-
}],
|
|
2616
|
+
}], complete: [{
|
|
2683
2617
|
type: Input
|
|
2684
|
-
}],
|
|
2618
|
+
}], useIconCheck: [{
|
|
2685
2619
|
type: Input
|
|
2686
2620
|
}], inactives: [{
|
|
2687
2621
|
type: Input
|
|
2688
|
-
}],
|
|
2689
|
-
type:
|
|
2622
|
+
}], clickStep: [{
|
|
2623
|
+
type: Output
|
|
2690
2624
|
}] } });
|
|
2691
2625
|
|
|
2692
2626
|
class TCloudUiNumberStepModule {
|
|
@@ -2698,15 +2632,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
2698
2632
|
type: NgModule,
|
|
2699
2633
|
args: [{
|
|
2700
2634
|
declarations: [
|
|
2701
|
-
TCloudUiNumberStepComponent
|
|
2635
|
+
TCloudUiNumberStepComponent,
|
|
2636
|
+
],
|
|
2637
|
+
imports: [
|
|
2638
|
+
CommonModule,
|
|
2702
2639
|
],
|
|
2703
2640
|
exports: [
|
|
2704
|
-
TCloudUiNumberStepComponent
|
|
2641
|
+
TCloudUiNumberStepComponent,
|
|
2705
2642
|
],
|
|
2706
|
-
|
|
2707
|
-
|
|
2643
|
+
schemas: [
|
|
2644
|
+
CUSTOM_ELEMENTS_SCHEMA,
|
|
2645
|
+
NO_ERRORS_SCHEMA
|
|
2708
2646
|
],
|
|
2709
|
-
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
|
|
2710
2647
|
}]
|
|
2711
2648
|
}] });
|
|
2712
2649
|
|
|
@@ -4688,79 +4625,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
4688
4625
|
}] } });
|
|
4689
4626
|
|
|
4690
4627
|
class TCloudUiTooltipDirective {
|
|
4691
|
-
onMouseOver(event) {
|
|
4692
|
-
let hoverInCallback = () => {
|
|
4693
|
-
this.remove = false;
|
|
4694
|
-
};
|
|
4695
|
-
let hoverOutCallback = () => {
|
|
4696
|
-
this.remove = true;
|
|
4697
|
-
const customDivAll = document.querySelectorAll('.tc-directive-tooltip');
|
|
4698
|
-
if (customDivAll && customDivAll.length > 0) {
|
|
4699
|
-
customDivAll.forEach((_customDiv) => {
|
|
4700
|
-
if (_customDiv) {
|
|
4701
|
-
_customDiv.remove();
|
|
4702
|
-
}
|
|
4703
|
-
});
|
|
4704
|
-
}
|
|
4705
|
-
};
|
|
4706
|
-
hoverOutCallback;
|
|
4707
|
-
setTimeout(() => {
|
|
4708
|
-
const scrollTop = window?.scrollY || window?.pageYOffset;
|
|
4709
|
-
const tooltip = this.renderer.createElement('div');
|
|
4710
|
-
const rect = this.el.nativeElement?.getBoundingClientRect();
|
|
4711
|
-
// const direction = this.el.nativeElement?.attributes['ng-reflect--t-cdirection']?.value || 'top';
|
|
4712
|
-
const direction = this._direction || 'top';
|
|
4713
|
-
const el_position_x = (rect?.left) ? parseInt(rect?.left) : 0;
|
|
4714
|
-
const el_position_y = (rect?.top) ? parseInt(rect?.top + scrollTop) : 0;
|
|
4715
|
-
let width = 0;
|
|
4716
|
-
let height = 0;
|
|
4717
|
-
if (event && event.target) {
|
|
4718
|
-
const _event = event.target;
|
|
4719
|
-
height = _event.offsetHeight;
|
|
4720
|
-
width = _event.offsetWidth;
|
|
4721
|
-
}
|
|
4722
|
-
const top = `${(el_position_y - ((height / 2) + 10))}px`;
|
|
4723
|
-
const left = `${el_position_x + (width / 2)}px`;
|
|
4724
|
-
this.renderer.setStyle(tooltip, 'top', '0px');
|
|
4725
|
-
this.renderer.setStyle(tooltip, 'left', '0px');
|
|
4726
|
-
this.renderer.setStyle(tooltip, 'opacity', '0');
|
|
4727
|
-
this.renderer.addClass(tooltip, 'tc-directive-tooltip');
|
|
4728
|
-
this.renderer.addClass(tooltip, `tc-directive-tooltip-${direction}`);
|
|
4729
|
-
const id = this.generateID();
|
|
4730
|
-
this.renderer.setAttribute(tooltip, 'id', id);
|
|
4731
|
-
const textNode = this.info_text;
|
|
4732
|
-
if (textNode !== undefined && textNode !== null && textNode !== '') {
|
|
4733
|
-
tooltip.innerHTML = textNode;
|
|
4734
|
-
this.renderer.appendChild(document.body, tooltip);
|
|
4735
|
-
this.start_tooltip(id, height, width, el_position_x, el_position_y, direction);
|
|
4736
|
-
if (tooltip) {
|
|
4737
|
-
tooltip.addEventListener('mouseenter', hoverInCallback);
|
|
4738
|
-
tooltip.addEventListener('mouseleave', hoverOutCallback);
|
|
4739
|
-
}
|
|
4740
|
-
}
|
|
4741
|
-
});
|
|
4742
|
-
}
|
|
4743
|
-
onMouseOut(event) {
|
|
4744
|
-
this.remove = true;
|
|
4745
|
-
const customDivAll = document.querySelectorAll('.tc-directive-tooltip');
|
|
4746
|
-
if (customDivAll && customDivAll.length > 0) {
|
|
4747
|
-
setTimeout(() => {
|
|
4748
|
-
if (this.remove) {
|
|
4749
|
-
customDivAll.forEach((_customDiv) => {
|
|
4750
|
-
if (_customDiv) {
|
|
4751
|
-
_customDiv.remove();
|
|
4752
|
-
}
|
|
4753
|
-
});
|
|
4754
|
-
}
|
|
4755
|
-
}, 25);
|
|
4756
|
-
}
|
|
4757
|
-
}
|
|
4758
4628
|
set TCtooltip(tooltip) {
|
|
4759
4629
|
if (tooltip) {
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
|
|
4763
|
-
this.
|
|
4630
|
+
this.info_text = typeof tooltip === 'object' ? '' : tooltip;
|
|
4631
|
+
if (this.tooltipVisible && this.tooltipElement) {
|
|
4632
|
+
// Atualiza o conteúdo do tooltip diretamente
|
|
4633
|
+
this.tooltipElement.innerHTML = this.info_text;
|
|
4634
|
+
// Reaplica a posição calculada anteriormente para manter a centralização
|
|
4635
|
+
this.repositionTooltip();
|
|
4764
4636
|
}
|
|
4765
4637
|
}
|
|
4766
4638
|
}
|
|
@@ -4772,12 +4644,121 @@ class TCloudUiTooltipDirective {
|
|
|
4772
4644
|
constructor(el, renderer) {
|
|
4773
4645
|
this.el = el;
|
|
4774
4646
|
this.renderer = renderer;
|
|
4647
|
+
this.tooltipMode = 'hover';
|
|
4775
4648
|
this.remove = false;
|
|
4776
4649
|
this.info_text = '';
|
|
4650
|
+
this.tooltipVisible = false;
|
|
4651
|
+
this.tooltipElement = null;
|
|
4777
4652
|
this._direction = 'top';
|
|
4778
4653
|
}
|
|
4654
|
+
onDocumentClick(event) {
|
|
4655
|
+
if (this.tooltipMode === 'click' && this.tooltipVisible && this.info_text) {
|
|
4656
|
+
const clickedInside = this.el.nativeElement.contains(event.target) || (this.tooltipElement?.contains(event.target));
|
|
4657
|
+
if (!clickedInside) {
|
|
4658
|
+
this.removeTooltip();
|
|
4659
|
+
}
|
|
4660
|
+
}
|
|
4661
|
+
}
|
|
4662
|
+
onMouseOver(event) {
|
|
4663
|
+
if (this.tooltipMode === 'hover' && !this.tooltipVisible && this.info_text) {
|
|
4664
|
+
this.createTooltip(event);
|
|
4665
|
+
this.tooltipVisible = true;
|
|
4666
|
+
}
|
|
4667
|
+
}
|
|
4668
|
+
onMouseOut(event) {
|
|
4669
|
+
if (this.tooltipVisible) {
|
|
4670
|
+
const relatedTarget = event.relatedTarget;
|
|
4671
|
+
if (!this.el.nativeElement.contains(relatedTarget) && !this.tooltipElement?.contains(relatedTarget)) {
|
|
4672
|
+
this.removeTooltip();
|
|
4673
|
+
}
|
|
4674
|
+
}
|
|
4675
|
+
}
|
|
4676
|
+
onClick(event) {
|
|
4677
|
+
if (this.tooltipMode === 'click') {
|
|
4678
|
+
if (this.tooltipVisible) {
|
|
4679
|
+
this.removeTooltip();
|
|
4680
|
+
}
|
|
4681
|
+
else {
|
|
4682
|
+
this.createTooltip(event);
|
|
4683
|
+
}
|
|
4684
|
+
this.tooltipVisible = !this.tooltipVisible;
|
|
4685
|
+
}
|
|
4686
|
+
}
|
|
4687
|
+
createTooltip(event) {
|
|
4688
|
+
const scrollTop = window?.scrollY || window?.pageYOffset;
|
|
4689
|
+
const tooltip = this.renderer.createElement('div');
|
|
4690
|
+
const rect = this.el.nativeElement?.getBoundingClientRect();
|
|
4691
|
+
const direction = this._direction || 'top';
|
|
4692
|
+
const el_position_x = rect?.left || 0;
|
|
4693
|
+
const el_position_y = rect?.top + scrollTop || 0;
|
|
4694
|
+
let width = 0;
|
|
4695
|
+
let height = 0;
|
|
4696
|
+
if (event && event.target) {
|
|
4697
|
+
const _event = event.target;
|
|
4698
|
+
height = _event.offsetHeight;
|
|
4699
|
+
width = _event.offsetWidth;
|
|
4700
|
+
}
|
|
4701
|
+
this.renderer.setStyle(tooltip, 'top', '0px');
|
|
4702
|
+
this.renderer.setStyle(tooltip, 'left', '0px');
|
|
4703
|
+
this.renderer.setStyle(tooltip, 'opacity', '0');
|
|
4704
|
+
this.renderer.addClass(tooltip, 'tc-directive-tooltip');
|
|
4705
|
+
this.renderer.addClass(tooltip, `tc-directive-tooltip-${direction}`);
|
|
4706
|
+
const id = this.generateID();
|
|
4707
|
+
this.renderer.setAttribute(tooltip, 'id', id);
|
|
4708
|
+
tooltip.innerHTML = this.info_text;
|
|
4709
|
+
this.renderer.appendChild(document.body, tooltip);
|
|
4710
|
+
this.start_tooltip(id, height, width, el_position_x, el_position_y, direction);
|
|
4711
|
+
this.tooltipElement = tooltip;
|
|
4712
|
+
tooltip.addEventListener('mouseenter', () => this.tooltipVisible = true);
|
|
4713
|
+
tooltip.addEventListener('mouseleave', () => this.removeTooltip());
|
|
4714
|
+
}
|
|
4715
|
+
removeTooltip() {
|
|
4716
|
+
const customDivAll = document.querySelectorAll('.tc-directive-tooltip');
|
|
4717
|
+
if (customDivAll && customDivAll.length > 0) {
|
|
4718
|
+
setTimeout(() => {
|
|
4719
|
+
customDivAll.forEach((_customDiv) => {
|
|
4720
|
+
if (_customDiv) {
|
|
4721
|
+
_customDiv.remove();
|
|
4722
|
+
}
|
|
4723
|
+
});
|
|
4724
|
+
}, 25);
|
|
4725
|
+
}
|
|
4726
|
+
this.tooltipVisible = false;
|
|
4727
|
+
this.tooltipElement = null;
|
|
4728
|
+
}
|
|
4729
|
+
repositionTooltip() {
|
|
4730
|
+
if (!this.tooltipElement)
|
|
4731
|
+
return;
|
|
4732
|
+
const rect = this.el.nativeElement?.getBoundingClientRect();
|
|
4733
|
+
const height = this.el.nativeElement.offsetHeight;
|
|
4734
|
+
const width = this.el.nativeElement.offsetWidth;
|
|
4735
|
+
const tooltipHeight = this.tooltipElement.clientHeight;
|
|
4736
|
+
const tooltipWidth = this.tooltipElement.clientWidth;
|
|
4737
|
+
let p_y = 0;
|
|
4738
|
+
let p_x = 0;
|
|
4739
|
+
const scrollTop = window?.scrollY || window?.pageYOffset;
|
|
4740
|
+
const center_position = (rect.left + (width / 2)) - (tooltipWidth / 2);
|
|
4741
|
+
if (this._direction === 'top') {
|
|
4742
|
+
p_y = (rect.top + scrollTop - tooltipHeight) - 15;
|
|
4743
|
+
p_x = center_position;
|
|
4744
|
+
}
|
|
4745
|
+
else if (this._direction === 'bottom') {
|
|
4746
|
+
p_y = (rect.top + scrollTop + height) + 15;
|
|
4747
|
+
p_x = center_position;
|
|
4748
|
+
}
|
|
4749
|
+
else if (this._direction === 'left') {
|
|
4750
|
+
p_y = (rect.top + scrollTop - (tooltipHeight / 2) + (height / 2));
|
|
4751
|
+
p_x = rect.left - tooltipWidth - 15;
|
|
4752
|
+
}
|
|
4753
|
+
else if (this._direction === 'right') {
|
|
4754
|
+
p_y = (rect.top + scrollTop - (tooltipHeight / 2) + (height / 2));
|
|
4755
|
+
p_x = rect.left + width + 15;
|
|
4756
|
+
}
|
|
4757
|
+
this.renderer.setStyle(this.tooltipElement, 'top', `${p_y}px`);
|
|
4758
|
+
this.renderer.setStyle(this.tooltipElement, 'left', `${p_x}px`);
|
|
4759
|
+
}
|
|
4779
4760
|
generateID(target) {
|
|
4780
|
-
const ref =
|
|
4761
|
+
const ref = target ? `-${target}` : '';
|
|
4781
4762
|
return `tc-tooltip-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}${ref}`;
|
|
4782
4763
|
}
|
|
4783
4764
|
start_tooltip(id, height, width, el_position_x, el_position_y, direction) {
|
|
@@ -4785,13 +4766,6 @@ class TCloudUiTooltipDirective {
|
|
|
4785
4766
|
const tooltip = document.getElementById(id);
|
|
4786
4767
|
const tooltip_height = tooltip.clientHeight;
|
|
4787
4768
|
const tooltip_width = tooltip.clientWidth;
|
|
4788
|
-
/*
|
|
4789
|
-
console.log('altura do target: ', height);
|
|
4790
|
-
console.log('largura do target: ', width);
|
|
4791
|
-
console.log('el_position_x do target: ', el_position_x);
|
|
4792
|
-
console.log('el_position_y do target: ', el_position_y);
|
|
4793
|
-
console.log('direction do tooltip: ', direction);
|
|
4794
|
-
*/
|
|
4795
4769
|
let p_y = 0;
|
|
4796
4770
|
let p_x = 0;
|
|
4797
4771
|
const center_position = (el_position_x + (width / 2)) - (tooltip_width / 2);
|
|
@@ -4817,23 +4791,31 @@ class TCloudUiTooltipDirective {
|
|
|
4817
4791
|
});
|
|
4818
4792
|
}
|
|
4819
4793
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TCloudUiTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4820
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: TCloudUiTooltipDirective, selector: "[TCtooltip]", inputs: { TCtooltip: "TCtooltip", TCdirection: "TCdirection" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" } }, ngImport: i0 }); }
|
|
4794
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: TCloudUiTooltipDirective, selector: "[TCtooltip]", inputs: { tooltipMode: "tooltipMode", TCtooltip: "TCtooltip", TCdirection: "TCdirection" }, host: { listeners: { "document:click": "onDocumentClick($event)", "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)", "click": "onClick($event)" } }, ngImport: i0 }); }
|
|
4821
4795
|
}
|
|
4822
4796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TCloudUiTooltipDirective, decorators: [{
|
|
4823
4797
|
type: Directive,
|
|
4824
4798
|
args: [{
|
|
4825
4799
|
selector: '[TCtooltip]'
|
|
4826
4800
|
}]
|
|
4827
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: {
|
|
4801
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipMode: [{
|
|
4802
|
+
type: Input
|
|
4803
|
+
}], TCtooltip: [{
|
|
4804
|
+
type: Input
|
|
4805
|
+
}], TCdirection: [{
|
|
4806
|
+
type: Input
|
|
4807
|
+
}], onDocumentClick: [{
|
|
4808
|
+
type: HostListener,
|
|
4809
|
+
args: ['document:click', ['$event']]
|
|
4810
|
+
}], onMouseOver: [{
|
|
4828
4811
|
type: HostListener,
|
|
4829
4812
|
args: ['mouseover', ['$event']]
|
|
4830
4813
|
}], onMouseOut: [{
|
|
4831
4814
|
type: HostListener,
|
|
4832
4815
|
args: ['mouseout', ['$event']]
|
|
4833
|
-
}],
|
|
4834
|
-
type:
|
|
4835
|
-
|
|
4836
|
-
type: Input
|
|
4816
|
+
}], onClick: [{
|
|
4817
|
+
type: HostListener,
|
|
4818
|
+
args: ['click', ['$event']]
|
|
4837
4819
|
}] } });
|
|
4838
4820
|
|
|
4839
4821
|
class TCloudUiElCopyDirective {
|