@dev-tcloud/tcloud-ui 0.0.0 → 0.0.2

package/fesm2020/dev-tcloud-tcloud-ui.mjs

@@ -1,341 +1,89 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
+import { Component, Input, NgModule, Injectable, EventEmitter, Output, ViewChild } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { Subject } from 'rxjs';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
 import * as i3 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Subject } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i1 from '@angular/router';
-import { RouterModule } from '@angular/router';
 
-class TcloudModalService {
+class TCloudUiLinhaLogoComponent {
     constructor() {
-        this.param_confirm = {};
-        this._stateClose = new Subject();
-        this.stateClose$ = this._stateClose.asObservable();
-        this._stateConfirm = new Subject();
-        this.stateConfirm$ = this._stateConfirm.asObservable();
-        this._stateRespConfirm = new Subject();
-        this.stateRespConfirm$ = this._stateRespConfirm.asObservable();
-        this._stateLoading = new Subject();
-        this.stateLoading$ = this._stateLoading.asObservable();
-    }
-    toModal(action) {
-        this._stateClose.next((action === 'open'));
-    }
-    toRespConfirm(resp) {
-        this._stateRespConfirm.next(resp);
-    }
-    getParamConfirm() {
-        return this.param_confirm;
-    }
-    toConfirm(confirm) {
-        this.param_confirm = confirm;
-        this._stateConfirm.next(confirm);
-    }
-    getLoading() {
-        return this.loading;
-    }
-    setLoading(loading) {
-        this.loading = loading;
-        this._stateLoading.next(loading);
-    }
-}
-TcloudModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TcloudModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudModalService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudModalService, decorators: [{
-            type: Injectable
-        }] });
-
-class TcloudUiModalComponent {
-    constructor(tcloudModalService) {
-        this.tcloudModalService = tcloudModalService;
-        this.param_confirm = {};
-        /* BEGIN - Parametros para modo confirmacao */
-        this._confirm = false;
-        this._confirmText = 'Confirmo';
-        this.autoClose = true;
-        this.maxWidth = 500;
-        // psg
-        this._open = false;
-        this._loading = false;
-        this.openChange = new EventEmitter();
-        this.toConfirm = new EventEmitter();
-        this.toCancel = new EventEmitter();
-        this.toAction = new EventEmitter();
-    }
-    set confirm(v) {
-        this._confirm = v;
-        this.param_confirm.confirm = this._confirm;
-        this.param_confirm.confirmText = this._confirmText;
-    }
-    set confirmText(v) {
-        this._confirmText = v;
-        this.param_confirm.confirmText = this._confirmText;
-        this.param_confirm.confirm = this._confirm;
-    }
-    set window(size) {
-        switch (size) {
-            case 'small':
-                this.maxWidth = 300;
-                break;
-            case 'medium':
-                this.maxWidth = 500;
-                break;
-            case 'large':
-                this.maxWidth = 900;
-                break;
-            case 'big':
-                this.maxWidth = 1100;
-                break;
-            case 'full':
-                this.maxWidth = 1400;
-                break;
-        }
-    }
-    set open(open) {
-        this._open = open;
-        this.fixed_body((open) ? 'on' : 'off');
-    }
-    get open() { return this._open; }
-    set loading(loading) {
-        this._loading = loading;
-        this.tcloudModalService.setLoading(loading);
+        this.product = '';
+        this.logo_name = '';
+        this.product_name = '';
+        this.alt_product_name = '';
+        this.font_size = '';
     }
-    get loading() { return this._loading; }
     ngOnInit() {
-        this.subscription = this.tcloudModalService.stateClose$.subscribe((open) => {
-            if (open) {
-                /* OPEN */
-            }
-            if (!open) {
-                /* CLOSE */
-                this.toClose();
-            }
-        });
-        this.subscriptionI = this.tcloudModalService.stateRespConfirm$.subscribe((resp) => {
-            if (resp) {
-                /* CONFIRMADO */
-                this.toConfirm.emit(resp);
-                this.toClose('confirmed');
-            }
-            if (!resp) {
-                /* CANCELADO */
-                this.toCancel.emit(resp);
-                this.toClose('cancel');
-            }
-        });
-        this.tcloudModalService.toConfirm(this.param_confirm);
-    }
-    toClose(action) {
-        if (this.autoClose) {
-            this.open = false;
-            this.openChange.emit(false);
-        }
-        action = (action) ? action : 'close';
-        this.toAction.emit(action);
-        this.fixed_body('off');
+        this.logo_name = this.getLogoName();
+        this.product_name = this.getProductName();
+        this.alt_product_name = (this.product_name).toUpperCase();
+        this.font_size = this.getWidthFontSize();
     }
-    checkIsOpen() {
-        if (this.open) {
-            this.fixed_body('on');
-        }
-        else {
-            this.fixed_body('off');
+    getProductName() {
+        if (this.product !== '') {
+            let name = this.product;
+            name = (name).replace('_', ' ');
+            name = (name).toLowerCase();
+            return name;
         }
+        return '';
     }
-    fixed_body(fixed) {
-        let body = document.getElementsByTagName("BODY")[0];
-        if (body && body.style) {
-            if (fixed === 'on') {
-                body.style.overflowY = "hidden";
-            }
-            if (fixed === 'off') {
-                body.style.removeProperty('overflow-y');
-            }
+    getLogoName() {
+        if (this.product !== '') {
+            let name = this.product;
+            name = (name).replace('_', '-');
+            name = (name).toLowerCase();
+            return 'logo-linha-' + name;
         }
+        return '';
     }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+    getWidthFontSize() {
+        let size = 28;
+        let new_size = size;
+        const count = (this.product_name).length;
+        if (count > 8) {
+            new_size = 28;
         }
-    }
-}
-TcloudUiModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component });
-TcloudUiModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TcloudUiModalComponent, selector: "tcloud-ui-modal", inputs: { confirm: "confirm", confirmText: "confirmText", autoClose: "autoClose", title: "title", maxWidth: "maxWidth", window: "window", open: "open", loading: "loading" }, outputs: { openChange: "openChange", toConfirm: "toConfirm", toCancel: "toCancel", toAction: "toAction" }, providers: [
-        TcloudModalService
-    ], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"open\" >{{ checkIsOpen() }}</div>\r\n\r\n<div class=\"base-modal\" *ngIf=\"open\">\r\n  <div class=\"sub-modal\" [@fade]=\"'visible'\">\r\n    <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\r\n      <div class=\"area-top-actions\">\r\n        <button type=\"button\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\r\n          <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\r\n          <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n\r\n      <ng-content></ng-content>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Ex: Modal -->\r\n<!-- \r\n  <tcloud-ui-modal [(open)]=\"open\">\r\n\r\n    <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\r\n\r\n    <tcloud-ui-modal-body>\r\n      Conte\u00FAdo do modal aqui\r\n    </tcloud-ui-modal-body>\r\n\r\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n  </tcloud-ui-modal>\r\n\r\n  <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\r\n-->\r\n\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n\r\n<!-- Ex: Confirm Modal -->\r\n<!-- \r\n  <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\r\n\r\n    <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\r\n\r\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n  </tcloud-ui-modal>\r\n\r\n  <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\r\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0}.sub-modal{padding:30px;position:absolute;width:100%}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.tc-modal-shadow{box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
-        trigger('fade', [
-            state('visible', style({ opacity: 1 })),
-            state('hide', style({ opacity: 0, top: '-38%' })),
-            transition('void => visible', [
-                style({ opacity: 0, top: '-38%' }),
-                animate('0.3s ease-out')
-            ]),
-            transition('visible => hide', animate('0.3s ease-out'))
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tcloud-ui-modal', providers: [
-                        TcloudModalService
-                    ], animations: [
-                        trigger('fade', [
-                            state('visible', style({ opacity: 1 })),
-                            state('hide', style({ opacity: 0, top: '-38%' })),
-                            transition('void => visible', [
-                                style({ opacity: 0, top: '-38%' }),
-                                animate('0.3s ease-out')
-                            ]),
-                            transition('visible => hide', animate('0.3s ease-out'))
-                        ])
-                    ], template: "<div class=\"tc-background-modal\" *ngIf=\"open\" >{{ checkIsOpen() }}</div>\r\n\r\n<div class=\"base-modal\" *ngIf=\"open\">\r\n  <div class=\"sub-modal\" [@fade]=\"'visible'\">\r\n    <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\r\n      <div class=\"area-top-actions\">\r\n        <button type=\"button\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\r\n          <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\r\n          <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n\r\n      <ng-content></ng-content>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Ex: Modal -->\r\n<!-- \r\n  <tcloud-ui-modal [(open)]=\"open\">\r\n\r\n    <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\r\n\r\n    <tcloud-ui-modal-body>\r\n      Conte\u00FAdo do modal aqui\r\n    </tcloud-ui-modal-body>\r\n\r\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n  </tcloud-ui-modal>\r\n\r\n  <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\r\n-->\r\n\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n\r\n<!-- Ex: Confirm Modal -->\r\n<!-- \r\n  <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\r\n\r\n    <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\r\n\r\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n  </tcloud-ui-modal>\r\n\r\n  <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\r\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0}.sub-modal{padding:30px;position:absolute;width:100%}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.tc-modal-shadow{box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: TcloudModalService }]; }, propDecorators: { confirm: [{
-                type: Input
-            }], confirmText: [{
-                type: Input
-            }], autoClose: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], window: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }], toConfirm: [{
-                type: Output
-            }], toCancel: [{
-                type: Output
-            }], toAction: [{
-                type: Output
-            }] } });
-
-class TcloudUiModalHeaderComponent {
-    constructor() {
-        this.mode = 'info';
-    }
-    ngOnInit() {
-    }
-}
-TcloudUiModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TcloudUiModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TcloudUiModalHeaderComponent, selector: "tcloud-ui-modal-header", inputs: { mode: "mode", title: "title" }, ngImport: i0, template: "<div class=\"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(--verde)}.tc-mode-danger{background:#f06868}.tc-mode-warning{background:#e8b02e}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tcloud-ui-modal-header', template: "<div class=\"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(--verde)}.tc-mode-danger{background:#f06868}.tc-mode-warning{background:#e8b02e}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { mode: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }] } });
-
-class TcloudUiModalBodyComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-TcloudUiModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TcloudUiModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TcloudUiModalBodyComponent, selector: "tcloud-ui-modal-body", ngImport: i0, template: "<div class=\"tc-modal-body\">\r\n  <ng-content></ng-content>\r\n</div>", styles: [".tc-modal-body{padding:13px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalBodyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tcloud-ui-modal-body', template: "<div class=\"tc-modal-body\">\r\n  <ng-content></ng-content>\r\n</div>", styles: [".tc-modal-body{padding:13px}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
-class TcloudUiModalFooterComponent {
-    constructor(tcloudModalService) {
-        this.tcloudModalService = tcloudModalService;
-        this.btnCloseText = 'Fechar';
-        this.btnCancelText = 'Cancelar';
-        this.btnConfirmText = 'Confirmar';
-        this.txt_value = '';
-        this.param_confirm = {};
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.txt_value = '';
-        this.param_confirm = this.tcloudModalService.getParamConfirm();
-        this.toStateLoading();
-    }
-    toClose() {
-        this.tcloudModalService.toModal('close');
-    }
-    toConfirm(valid) {
-        if (typeof valid === 'boolean') {
-            if (valid && (this.txt_value).toLowerCase() === (this.param_confirm.confirmText).toLowerCase()) {
-                this.tcloudModalService.toRespConfirm(true);
-                this.txt_value = '';
-            }
+        if (count > 12) {
+            const p = (size * (5 + (count * 2))) / 100;
+            new_size = (size - p);
         }
-    }
-    toCancel() {
-        this.tcloudModalService.toRespConfirm(false);
-    }
-    toStateLoading() {
-        this.loading = this.tcloudModalService.getLoading();
-        this.subscription = this.tcloudModalService.stateLoading$.subscribe((loading) => { this.loading = loading; });
-    }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+        if (count > 15) {
+            const p = (size * (10 + (count * 2))) / 100;
+            new_size = (size - p);
         }
+        return `${new_size}px`;
     }
 }
-TcloudUiModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalFooterComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component });
-TcloudUiModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TcloudUiModalFooterComponent, selector: "tcloud-ui-modal-footer", inputs: { btnCloseText: "btnCloseText", btnCancelText: "btnCancelText", btnConfirmText: "btnConfirmText" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], ngImport: i0, template: "<div class=\"tc-modal-footer\">\r\n\r\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\r\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\r\n    \r\n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\r\n      <input \r\n        [disabled]=\"loading\"\r\n        placeholder=\"{{ param_confirm.confirmText }}\"\r\n        name=\"txt_value\" \r\n        [(ngModel)]=\"txt_value\" \r\n        type=\"text\" \r\n        class=\"form-control form-confirm\" \r\n        required \r\n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\r\n    </form>\r\n\r\n  </div>\r\n\r\n  <hr>\r\n\r\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\r\n    <!-- {{ param_confirm | json }} -->\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toClose()\">{{ btnCloseText }}</button>\r\n\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\r\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"ml-3 btn-new-green\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalFooterComponent, decorators: [{
+TCloudUiLinhaLogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiLinhaLogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiLinhaLogoComponent, selector: "tcloud-ui-linha-logo", inputs: { product: "product" }, ngImport: i0, template: "<!-- <div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n  <img class=\"img-logo\" src=\"/assets/img/logo-totvs.svg\" alt=\"{{ alt_product_name }}\">\r\n  <p class=\"text-small\">Linha</p>\r\n  <p class=\"text-product\" [style]=\"'font-size:'+font_size+';'\" >{{ product_name }}</p>\r\n</div> -->\r\n\r\n<div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n  <img class=\"img-logo\" [attr.data-name-image]=\"logo_name\" [attr.src]=\"'/assets/img/'+logo_name+'.svg'\" alt=\"{{ alt_product_name }}\">\r\n</div>", styles: [".logo-product{display:flex;color:var(--cinza);flex-flow:column;width:150px}.logo-product .img-logo{width:100%;margin-bottom:13px}.logo-product .text-small{font-size:13px;margin:0;padding:0;text-align:left}.logo-product .text-product{text-align:left;font-size:22px;font-weight:700;line-height:1;margin:0;padding:0;text-transform:uppercase;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-modal-footer', template: "<div class=\"tc-modal-footer\">\r\n\r\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\r\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\r\n    \r\n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\r\n      <input \r\n        [disabled]=\"loading\"\r\n        placeholder=\"{{ param_confirm.confirmText }}\"\r\n        name=\"txt_value\" \r\n        [(ngModel)]=\"txt_value\" \r\n        type=\"text\" \r\n        class=\"form-control form-confirm\" \r\n        required \r\n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\r\n    </form>\r\n\r\n  </div>\r\n\r\n  <hr>\r\n\r\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\r\n    <!-- {{ param_confirm | json }} -->\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toClose()\">{{ btnCloseText }}</button>\r\n\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\r\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"ml-3 btn-new-green\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: TcloudModalService }]; }, propDecorators: { btnCloseText: [{
-                type: Input
-            }], btnCancelText: [{
-                type: Input
-            }], btnConfirmText: [{
+            args: [{ selector: 'tcloud-ui-linha-logo', template: "<!-- <div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n  <img class=\"img-logo\" src=\"/assets/img/logo-totvs.svg\" alt=\"{{ alt_product_name }}\">\r\n  <p class=\"text-small\">Linha</p>\r\n  <p class=\"text-product\" [style]=\"'font-size:'+font_size+';'\" >{{ product_name }}</p>\r\n</div> -->\r\n\r\n<div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n  <img class=\"img-logo\" [attr.data-name-image]=\"logo_name\" [attr.src]=\"'/assets/img/'+logo_name+'.svg'\" alt=\"{{ alt_product_name }}\">\r\n</div>", styles: [".logo-product{display:flex;color:var(--cinza);flex-flow:column;width:150px}.logo-product .img-logo{width:100%;margin-bottom:13px}.logo-product .text-small{font-size:13px;margin:0;padding:0;text-align:left}.logo-product .text-product{text-align:left;font-size:22px;font-weight:700;line-height:1;margin:0;padding:0;text-transform:uppercase;white-space:nowrap}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { product: [{
                 type: Input
-            }], _formulario: [{
-                type: ViewChild,
-                args: ['_formulario']
             }] } });
 
-class TcloudUiModalModule {
+class TCloudUiLinhaLogoModule {
 }
-TcloudUiModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TcloudUiModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalModule, declarations: [TcloudUiModalComponent,
-        TcloudUiModalHeaderComponent,
-        TcloudUiModalBodyComponent,
-        TcloudUiModalFooterComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule], exports: [TcloudUiModalComponent,
-        TcloudUiModalHeaderComponent,
-        TcloudUiModalBodyComponent,
-        TcloudUiModalFooterComponent] });
-TcloudUiModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudUiModalModule, decorators: [{
+TCloudUiLinhaLogoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiLinhaLogoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoModule, declarations: [TCloudUiLinhaLogoComponent], imports: [CommonModule], exports: [TCloudUiLinhaLogoComponent] });
+TCloudUiLinhaLogoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        TcloudUiModalComponent,
-                        TcloudUiModalHeaderComponent,
-                        TcloudUiModalBodyComponent,
-                        TcloudUiModalFooterComponent
+                        TCloudUiLinhaLogoComponent
                     ],
                     imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule
+                        CommonModule
                     ],
                     exports: [
-                        TcloudUiModalComponent,
-                        TcloudUiModalHeaderComponent,
-                        TcloudUiModalBodyComponent,
-                        TcloudUiModalFooterComponent
+                        TCloudUiLinhaLogoComponent
                     ]
                 }]
         }] });
@@ -407,11 +155,11 @@ class TabMenuService {
         });
     }
 }
-TabMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TabMenuService, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+TabMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TabMenuService, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 TabMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TabMenuService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TabMenuService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }]; } });
 
 class TCloudUiTabMenuComponent {
     constructor(tabMenuService) {
@@ -486,7 +234,7 @@ class TCloudUiTabContentComponent {
     }
 }
 TCloudUiTabContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabContentComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiTabContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabContentComponent, selector: "tcloud-ui-tab-content", inputs: { tab: "tab" }, ngImport: i0, template: "<div class=\"tc-tabmenu-content\" *ngIf=\"active\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n", styles: [".tc-tabmenu-content{margin:20px 0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TCloudUiTabContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabContentComponent, selector: "tcloud-ui-tab-content", inputs: { tab: "tab" }, ngImport: i0, template: "<div class=\"tc-tabmenu-content\" *ngIf=\"active\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n", styles: [".tc-tabmenu-content{margin:20px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-tab-content', template: "<div class=\"tc-tabmenu-content\" *ngIf=\"active\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n", styles: [".tc-tabmenu-content{margin:20px 0}\n"] }]
@@ -541,10 +289,10 @@ class TCloudUiTabTitleComponent {
     }
 }
 TCloudUiTabTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabTitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiTabTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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=\"tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{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:hover,.tab-title-active{background:var(--verde);color:#fff}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}.loading{cursor:progress!important}\n"] });
+TCloudUiTabTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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=\"tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{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:hover,.tab-title-active{background:var(--verde);color:#fff}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabTitleComponent, decorators: [{
             type: Component,
-            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=\"tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{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:hover,.tab-title-active{background:var(--verde);color:#fff}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}.loading{cursor:progress!important}\n"] }]
+            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=\"tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{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:hover,.tab-title-active{background:var(--verde);color:#fff}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] }]
         }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { tab: [{
                 type: Input
             }], title: [{
@@ -596,190 +344,566 @@ class TCloudUiTabSubtitleComponent {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
-        if (this.subscription2) {
-            this.subscription2.unsubscribe();
-        }
+        if (this.subscription2) {
+            this.subscription2.unsubscribe();
+        }
+    }
+}
+TCloudUiTabSubtitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabSubtitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiTabSubtitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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=\"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(--verde)}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabSubtitleComponent, decorators: [{
+            type: Component,
+            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=\"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(--verde)}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { tab: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class TCloudUiTabHeadComponent {
+    constructor() {
+        this.ID = '';
+        this.background = true;
+        this.background_color = 'transparent'; // var(--cinza4)
+    }
+    ngOnInit() {
+        if (this.background) {
+            this.background_color = 'var(--cinza4)';
+        }
+        this.ID = this.generateID();
+    }
+    generateID() {
+        return `tc-head-scroll-box-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+    }
+    to_scroll(action) {
+        this.moveScroll(action, this.width_scroll());
+    }
+    width_scroll() {
+        var ele = document.querySelectorAll(`.${this.ID}`);
+        return ele[0].querySelector("button").offsetWidth;
+    }
+    scrollSuave(old, des, atu, ele) {
+        const _this = this;
+        var easeOutCubic = (t) => { return (--t) * t * t + 1; };
+        atu += 5; // move de 5 em 5 pixel. Aumentando o valor da velocidade
+        var ease = easeOutCubic(atu / 100);
+        var del = des - old;
+        del *= ease;
+        del += old;
+        ele.scrollTo(del, 0);
+        if (atu < 100) {
+            window.requestAnimationFrame(() => {
+                _this.scrollSuave(old, des, atu, ele);
+            });
+        }
+    }
+    moveScroll(action, wid) {
+        var ele = document.querySelectorAll(`.${this.ID}`);
+        var ccs = ele[0];
+        var ccs_s = ccs.scrollLeft;
+        this.scrollSuave(ccs_s, action == 'next' ? wid + ccs_s : ccs_s - wid, 0, ccs);
+    }
+}
+TCloudUiTabHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiTabHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { background: "background" }, ngImport: i0, template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\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>\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: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.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(--verde);cursor:pointer;position:relative;top:15px;right:6px;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(--verde);cursor:pointer;position:relative;top:15px;left:6px;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}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\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>\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: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.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(--verde);cursor:pointer;position:relative;top:15px;right:6px;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(--verde);cursor:pointer;position:relative;top:15px;left:6px;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}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { background: [{
+                type: Input
+            }] } });
+
+class TCloudUiTabMenuModule {
+}
+TCloudUiTabMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiTabMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuModule, declarations: [TCloudUiTabMenuComponent,
+        TCloudUiTabContentComponent,
+        TCloudUiTabTitleComponent,
+        TCloudUiTabSubtitleComponent,
+        TCloudUiTabHeadComponent], imports: [CommonModule, i1$1.RouterModule], exports: [TCloudUiTabMenuComponent,
+        TCloudUiTabContentComponent,
+        TCloudUiTabTitleComponent,
+        TCloudUiTabSubtitleComponent,
+        TCloudUiTabHeadComponent] });
+TCloudUiTabMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuModule, imports: [CommonModule,
+        RouterModule.forRoot([])] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TCloudUiTabMenuComponent,
+                        TCloudUiTabContentComponent,
+                        TCloudUiTabTitleComponent,
+                        TCloudUiTabSubtitleComponent,
+                        TCloudUiTabHeadComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule.forRoot([]),
+                    ],
+                    exports: [
+                        TCloudUiTabMenuComponent,
+                        TCloudUiTabContentComponent,
+                        TCloudUiTabTitleComponent,
+                        TCloudUiTabSubtitleComponent,
+                        TCloudUiTabHeadComponent
+                    ],
+                }]
+        }] });
+
+class TcloudModalService {
+    constructor() {
+        this.param_confirm = {};
+        this._stateClose = new Subject();
+        this.stateClose$ = this._stateClose.asObservable();
+        this._stateConfirm = new Subject();
+        this.stateConfirm$ = this._stateConfirm.asObservable();
+        this._stateRespConfirm = new Subject();
+        this.stateRespConfirm$ = this._stateRespConfirm.asObservable();
+        this._stateLoading = new Subject();
+        this.stateLoading$ = this._stateLoading.asObservable();
+    }
+    toModal(action) {
+        this._stateClose.next((action === 'open'));
+    }
+    toRespConfirm(resp) {
+        this._stateRespConfirm.next(resp);
+    }
+    getParamConfirm() {
+        return this.param_confirm;
+    }
+    toConfirm(confirm) {
+        this.param_confirm = confirm;
+        this._stateConfirm.next(confirm);
+    }
+    getLoading() {
+        return this.loading;
+    }
+    setLoading(loading) {
+        this.loading = loading;
+        this._stateLoading.next(loading);
+    }
+}
+TcloudModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TcloudModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudModalService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TcloudModalService, decorators: [{
+            type: Injectable
+        }] });
+
+class TCloudUiModalComponent {
+    constructor(tcloudModalService) {
+        this.tcloudModalService = tcloudModalService;
+        this.param_confirm = {};
+        /* BEGIN - Parametros para modo confirmacao */
+        this._confirm = false;
+        this._confirmText = 'Confirmo';
+        this.autoClose = true;
+        this.maxWidth = 500;
+        // psg
+        this._open = false;
+        this._loading = false;
+        this.openChange = new EventEmitter();
+        this.toConfirm = new EventEmitter();
+        this.toCancel = new EventEmitter();
+        this.toAction = new EventEmitter();
+    }
+    set confirm(v) {
+        this._confirm = v;
+        this.param_confirm.confirm = this._confirm;
+        this.param_confirm.confirmText = this._confirmText;
+    }
+    set confirmText(v) {
+        this._confirmText = v;
+        this.param_confirm.confirmText = this._confirmText;
+        this.param_confirm.confirm = this._confirm;
+    }
+    set window(size) {
+        switch (size) {
+            case 'small':
+                this.maxWidth = 300;
+                break;
+            case 'medium':
+                this.maxWidth = 500;
+                break;
+            case 'large':
+                this.maxWidth = 900;
+                break;
+            case 'big':
+                this.maxWidth = 1100;
+                break;
+            case 'full':
+                this.maxWidth = 1400;
+                break;
+        }
+    }
+    set open(open) {
+        this._open = open;
+        this.fixed_body((open) ? 'on' : 'off');
+    }
+    get open() { return this._open; }
+    set loading(loading) {
+        this._loading = loading;
+        this.tcloudModalService.setLoading(loading);
+    }
+    get loading() { return this._loading; }
+    ngOnInit() {
+        this.subscription = this.tcloudModalService.stateClose$.subscribe((open) => {
+            if (open) {
+                /* OPEN */
+            }
+            if (!open) {
+                /* CLOSE */
+                this.toClose();
+            }
+        });
+        this.subscriptionI = this.tcloudModalService.stateRespConfirm$.subscribe((resp) => {
+            if (resp) {
+                /* CONFIRMADO */
+                this.toConfirm.emit(resp);
+                this.toClose('confirmed');
+            }
+            if (!resp) {
+                /* CANCELADO */
+                this.toCancel.emit(resp);
+                this.toClose('cancel');
+            }
+        });
+        this.tcloudModalService.toConfirm(this.param_confirm);
+    }
+    toClose(action) {
+        if (this.autoClose) {
+            this.open = false;
+            this.openChange.emit(false);
+        }
+        action = (action) ? action : 'close';
+        this.toAction.emit(action);
+        this.fixed_body('off');
+    }
+    checkIsOpen() {
+        if (this.open) {
+            this.fixed_body('on');
+        }
+        else {
+            this.fixed_body('off');
+        }
+    }
+    fixed_body(fixed) {
+        let body = document.getElementsByTagName("BODY")[0];
+        if (body && body.style) {
+            if (fixed === 'on') {
+                body.style.overflowY = "hidden";
+            }
+            if (fixed === 'off') {
+                body.style.removeProperty('overflow-y');
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
     }
 }
-TCloudUiTabSubtitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabSubtitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiTabSubtitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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=\"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(--verde)}.loading{cursor:progress!important}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabSubtitleComponent, decorators: [{
+TCloudUiModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiModalComponent, selector: "tcloud-ui-modal", inputs: { confirm: "confirm", confirmText: "confirmText", autoClose: "autoClose", title: "title", maxWidth: "maxWidth", window: "window", open: "open", loading: "loading" }, outputs: { openChange: "openChange", toConfirm: "toConfirm", toCancel: "toCancel", toAction: "toAction" }, providers: [
+        TcloudModalService
+    ], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"open\" >{{ checkIsOpen() }}</div>\r\n\r\n<div class=\"base-modal\" *ngIf=\"open\">\r\n  <div class=\"sub-modal\" [@fade]=\"'visible'\">\r\n    <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\r\n      <div class=\"area-top-actions\">\r\n        <button type=\"button\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\r\n          <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\r\n          <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n\r\n      <ng-content></ng-content>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Ex: Modal -->\r\n<!-- \r\n  <tcloud-ui-modal [(open)]=\"open\">\r\n\r\n    <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\r\n\r\n    <tcloud-ui-modal-body>\r\n      Conte\u00FAdo do modal aqui\r\n    </tcloud-ui-modal-body>\r\n\r\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n  </tcloud-ui-modal>\r\n\r\n  <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\r\n-->\r\n\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n\r\n<!-- Ex: Confirm Modal -->\r\n<!-- \r\n  <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\r\n\r\n    <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\r\n\r\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n  </tcloud-ui-modal>\r\n\r\n  <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\r\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0}.sub-modal{padding:30px;position:absolute;width:100%}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.tc-modal-shadow{box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+        trigger('fade', [
+            state('visible', style({ opacity: 1 })),
+            state('hide', style({ opacity: 0, top: '-38%' })),
+            transition('void => visible', [
+                style({ opacity: 0, top: '-38%' }),
+                animate('0.3s ease-out')
+            ]),
+            transition('visible => hide', animate('0.3s ease-out'))
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalComponent, decorators: [{
             type: Component,
-            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=\"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(--verde)}.loading{cursor:progress!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { tab: [{
+            args: [{ selector: 'tcloud-ui-modal', providers: [
+                        TcloudModalService
+                    ], animations: [
+                        trigger('fade', [
+                            state('visible', style({ opacity: 1 })),
+                            state('hide', style({ opacity: 0, top: '-38%' })),
+                            transition('void => visible', [
+                                style({ opacity: 0, top: '-38%' }),
+                                animate('0.3s ease-out')
+                            ]),
+                            transition('visible => hide', animate('0.3s ease-out'))
+                        ])
+                    ], template: "<div class=\"tc-background-modal\" *ngIf=\"open\" >{{ checkIsOpen() }}</div>\r\n\r\n<div class=\"base-modal\" *ngIf=\"open\">\r\n  <div class=\"sub-modal\" [@fade]=\"'visible'\">\r\n    <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\r\n      <div class=\"area-top-actions\">\r\n        <button type=\"button\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\r\n          <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\r\n          <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\r\n\r\n      <ng-content></ng-content>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Ex: Modal -->\r\n<!-- \r\n  <tcloud-ui-modal [(open)]=\"open\">\r\n\r\n    <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\r\n\r\n    <tcloud-ui-modal-body>\r\n      Conte\u00FAdo do modal aqui\r\n    </tcloud-ui-modal-body>\r\n\r\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n  </tcloud-ui-modal>\r\n\r\n  <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\r\n-->\r\n\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n<!-- ****** -->\r\n\r\n<!-- Ex: Confirm Modal -->\r\n<!-- \r\n  <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\r\n\r\n    <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\r\n\r\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\r\n\r\n  </tcloud-ui-modal>\r\n\r\n  <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\r\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0}.sub-modal{padding:30px;position:absolute;width:100%}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.tc-modal-shadow{box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: TcloudModalService }]; }, propDecorators: { confirm: [{
                 type: Input
-            }], active: [{
+            }], confirmText: [{
                 type: Input
-            }], disabled: [{
+            }], autoClose: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], window: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], loading: [{
                 type: Input
+            }], openChange: [{
+                type: Output
+            }], toConfirm: [{
+                type: Output
+            }], toCancel: [{
+                type: Output
+            }], toAction: [{
+                type: Output
             }] } });
 
-class TCloudUiTabHeadComponent {
+class TCloudUiModalHeaderComponent {
     constructor() {
-        this.ID = '';
-        this.background = true;
-        this.background_color = 'transparent'; // var(--cinza4)
+        this.mode = 'info';
     }
     ngOnInit() {
-        if (this.background) {
-            this.background_color = 'var(--cinza4)';
-        }
-        this.ID = this.generateID();
     }
-    generateID() {
-        return `tc-head-scroll-box-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+}
+TCloudUiModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiModalHeaderComponent, selector: "tcloud-ui-modal-header", inputs: { mode: "mode", title: "title" }, ngImport: i0, template: "<div class=\"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(--verde)}.tc-mode-danger{background:#f06868}.tc-mode-warning{background:#e8b02e}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-modal-header', template: "<div class=\"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(--verde)}.tc-mode-danger{background:#f06868}.tc-mode-warning{background:#e8b02e}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { mode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class TCloudUiModalBodyComponent {
+    constructor() { }
+    ngOnInit() {
     }
-    to_scroll(action) {
-        this.moveScroll(action, this.width_scroll());
+}
+TCloudUiModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiModalBodyComponent, selector: "tcloud-ui-modal-body", ngImport: i0, template: "<div class=\"tc-modal-body\">\r\n  <ng-content></ng-content>\r\n</div>", styles: [".tc-modal-body{padding:13px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-modal-body', template: "<div class=\"tc-modal-body\">\r\n  <ng-content></ng-content>\r\n</div>", styles: [".tc-modal-body{padding:13px}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class TCloudUiModalFooterComponent {
+    constructor(tcloudModalService) {
+        this.tcloudModalService = tcloudModalService;
+        this.btnCloseText = 'Fechar';
+        this.btnCancelText = 'Cancelar';
+        this.btnConfirmText = 'Confirmar';
+        this.txt_value = '';
+        this.param_confirm = {};
+        this.loading = false;
     }
-    width_scroll() {
-        var ele = document.querySelectorAll(`.${this.ID}`);
-        return ele[0].querySelector("button").offsetWidth;
+    ngOnInit() {
+        this.txt_value = '';
+        this.param_confirm = this.tcloudModalService.getParamConfirm();
+        this.toStateLoading();
     }
-    scrollSuave(old, des, atu, ele) {
-        const _this = this;
-        var easeOutCubic = (t) => { return (--t) * t * t + 1; };
-        atu += 5; // move de 5 em 5 pixel. Aumentando o valor da velocidade
-        var ease = easeOutCubic(atu / 100);
-        var del = des - old;
-        del *= ease;
-        del += old;
-        ele.scrollTo(del, 0);
-        if (atu < 100) {
-            window.requestAnimationFrame(() => {
-                _this.scrollSuave(old, des, atu, ele);
-            });
+    toClose() {
+        this.tcloudModalService.toModal('close');
+    }
+    toConfirm(valid) {
+        if (typeof valid === 'boolean') {
+            if (valid && (this.txt_value).toLowerCase() === (this.param_confirm.confirmText).toLowerCase()) {
+                this.tcloudModalService.toRespConfirm(true);
+                this.txt_value = '';
+            }
         }
     }
-    moveScroll(action, wid) {
-        var ele = document.querySelectorAll(`.${this.ID}`);
-        var ccs = ele[0];
-        var ccs_s = ccs.scrollLeft;
-        this.scrollSuave(ccs_s, action == 'next' ? wid + ccs_s : ccs_s - wid, 0, ccs);
+    toCancel() {
+        this.tcloudModalService.toRespConfirm(false);
+    }
+    toStateLoading() {
+        this.loading = this.tcloudModalService.getLoading();
+        this.subscription = this.tcloudModalService.stateLoading$.subscribe((loading) => { this.loading = loading; });
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
     }
 }
-TCloudUiTabHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiTabHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { background: "background" }, ngImport: i0, template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\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>\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: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.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(--verde);cursor:pointer;position:relative;top:15px;right:6px;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(--verde);cursor:pointer;position:relative;top:15px;left:6px;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}}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
+TCloudUiModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalFooterComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiModalFooterComponent, selector: "tcloud-ui-modal-footer", inputs: { btnCloseText: "btnCloseText", btnCancelText: "btnCancelText", btnConfirmText: "btnConfirmText" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], ngImport: i0, template: "<div class=\"tc-modal-footer\">\r\n\r\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\r\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\r\n    \r\n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\r\n      <input \r\n        [disabled]=\"loading\"\r\n        placeholder=\"{{ param_confirm.confirmText }}\"\r\n        name=\"txt_value\" \r\n        [(ngModel)]=\"txt_value\" \r\n        type=\"text\" \r\n        class=\"form-control form-confirm\" \r\n        required \r\n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\r\n    </form>\r\n\r\n  </div>\r\n\r\n  <hr>\r\n\r\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\r\n    <!-- {{ param_confirm | json }} -->\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toClose()\">{{ btnCloseText }}</button>\r\n\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\r\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"ml-3 btn-new-green\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\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>\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: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.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(--verde);cursor:pointer;position:relative;top:15px;right:6px;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(--verde);cursor:pointer;position:relative;top:15px;left:6px;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}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { background: [{
+            args: [{ selector: 'tcloud-ui-modal-footer', template: "<div class=\"tc-modal-footer\">\r\n\r\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\r\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\r\n    \r\n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\r\n      <input \r\n        [disabled]=\"loading\"\r\n        placeholder=\"{{ param_confirm.confirmText }}\"\r\n        name=\"txt_value\" \r\n        [(ngModel)]=\"txt_value\" \r\n        type=\"text\" \r\n        class=\"form-control form-confirm\" \r\n        required \r\n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\r\n    </form>\r\n\r\n  </div>\r\n\r\n  <hr>\r\n\r\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\r\n    <!-- {{ param_confirm | json }} -->\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toClose()\">{{ btnCloseText }}</button>\r\n\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\r\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"ml-3 btn-new-green\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: TcloudModalService }]; }, propDecorators: { btnCloseText: [{
                 type: Input
+            }], btnCancelText: [{
+                type: Input
+            }], btnConfirmText: [{
+                type: Input
+            }], _formulario: [{
+                type: ViewChild,
+                args: ['_formulario']
             }] } });
 
-class TCloudUiTabMenuModule {
+class TCloudUiModalModule {
 }
-TCloudUiTabMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TCloudUiTabMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuModule, declarations: [TCloudUiTabMenuComponent,
-        TCloudUiTabContentComponent,
-        TCloudUiTabTitleComponent,
-        TCloudUiTabSubtitleComponent,
-        TCloudUiTabHeadComponent], imports: [CommonModule, i1.RouterModule], exports: [TCloudUiTabMenuComponent,
-        TCloudUiTabContentComponent,
-        TCloudUiTabTitleComponent,
-        TCloudUiTabSubtitleComponent,
-        TCloudUiTabHeadComponent] });
-TCloudUiTabMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuModule, imports: [CommonModule,
-        RouterModule.forRoot([])] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuModule, decorators: [{
+TCloudUiModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalModule, declarations: [TCloudUiModalComponent,
+        TCloudUiModalHeaderComponent,
+        TCloudUiModalBodyComponent,
+        TCloudUiModalFooterComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule], exports: [TCloudUiModalComponent,
+        TCloudUiModalHeaderComponent,
+        TCloudUiModalBodyComponent,
+        TCloudUiModalFooterComponent] });
+TCloudUiModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        TCloudUiTabMenuComponent,
-                        TCloudUiTabContentComponent,
-                        TCloudUiTabTitleComponent,
-                        TCloudUiTabSubtitleComponent,
-                        TCloudUiTabHeadComponent
+                        TCloudUiModalComponent,
+                        TCloudUiModalHeaderComponent,
+                        TCloudUiModalBodyComponent,
+                        TCloudUiModalFooterComponent
                     ],
                     imports: [
                         CommonModule,
-                        RouterModule.forRoot([]),
+                        FormsModule,
+                        ReactiveFormsModule
                     ],
                     exports: [
-                        TCloudUiTabMenuComponent,
-                        TCloudUiTabContentComponent,
-                        TCloudUiTabTitleComponent,
-                        TCloudUiTabSubtitleComponent,
-                        TCloudUiTabHeadComponent
-                    ],
+                        TCloudUiModalComponent,
+                        TCloudUiModalHeaderComponent,
+                        TCloudUiModalBodyComponent,
+                        TCloudUiModalFooterComponent
+                    ]
                 }]
         }] });
 
-class TCloudUiLinhaLogoComponent {
+class Step {
     constructor() {
-        this.product = '';
-        this.logo_name = '';
-        this.product_name = '';
-        this.alt_product_name = '';
-        this.font_size = '';
-    }
-    ngOnInit() {
-        this.logo_name = this.getLogoName();
-        this.product_name = this.getProductName();
-        this.alt_product_name = (this.product_name).toUpperCase();
-        this.font_size = this.getWidthFontSize();
+        this.status = '';
+        this.index = 0;
+        this.class = '';
+        this.second_class = '';
     }
-    getProductName() {
-        if (this.product !== '') {
-            let name = this.product;
-            name = (name).replace('_', ' ');
-            name = (name).toLowerCase();
-            return name;
-        }
-        return '';
+}
+class TCloudUiLineStepCircleComponent {
+    constructor() {
+        this.step = 7;
+        this.active = 6;
+        this.inactives = [];
+        this.complete = false;
+        this.trilha = new Array();
     }
-    getLogoName() {
-        if (this.product !== '') {
-            let name = this.product;
-            name = (name).replace('_', '-');
-            name = (name).toLowerCase();
-            return 'logo-linha-' + name;
+    ngOnInit() {
+        setTimeout(() => { this.build_steps(); });
+    }
+    build_steps() {
+        let trilha = new Array();
+        if (this.step && this.step > 0) {
+            for (let i = 0; i < this.step; i++) {
+                (trilha).push({
+                    status: '',
+                    index: i + 1,
+                    class: 'step-default',
+                    second_class: '',
+                });
+            }
         }
-        return '';
-    }
-    getWidthFontSize() {
-        let size = 28;
-        let new_size = size;
-        const count = (this.product_name).length;
-        if (count > 8) {
-            new_size = 28;
+        if (this.active > this.step) {
+            this.active = this.step;
+            this.complete = true;
         }
-        if (count > 12) {
-            const p = (size * (5 + (count * 2))) / 100;
-            new_size = (size - p);
+        if (this.active && this.active > 0) {
+            for (let i = 0; i < this.active; i++) {
+                trilha[i].class = "step-progress";
+                if ((i + 1) === this.active && !this.complete) {
+                    trilha[i].class = "step-active";
+                }
+            }
         }
-        if (count > 15) {
-            const p = (size * (10 + (count * 2))) / 100;
-            new_size = (size - p);
+        if (this.inactives && (this.inactives).length > 0) {
+            for (let i = 0; i < (this.inactives).length; i++) {
+                const icon = this.inactives[i];
+                if (icon && icon > 0) {
+                    trilha[(icon - 1)].second_class = "step-inactive";
+                }
+            }
         }
-        return `${new_size}px`;
+        this.trilha = trilha;
     }
 }
-TCloudUiLinhaLogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiLinhaLogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiLinhaLogoComponent, selector: "tcloud-ui-linha-logo", inputs: { product: "product" }, ngImport: i0, template: "<!-- <div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n  <img class=\"img-logo\" src=\"/assets/img/logo-totvs.svg\" alt=\"{{ alt_product_name }}\">\r\n  <p class=\"text-small\">Linha</p>\r\n  <p class=\"text-product\" [style]=\"'font-size:'+font_size+';'\" >{{ product_name }}</p>\r\n</div> -->\r\n\r\n<div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n  <img class=\"img-logo\" [attr.data-name-image]=\"logo_name\" [attr.src]=\"'/assets/img/'+logo_name+'.svg'\" alt=\"{{ alt_product_name }}\">\r\n</div>", styles: [".logo-product{display:flex;color:var(--cinza);flex-flow:column;width:150px}.logo-product .img-logo{width:100%;margin-bottom:13px}.logo-product .text-small{font-size:13px;margin:0;padding:0;text-align:left}.logo-product .text-product{text-align:left;font-size:22px;font-weight:700;line-height:1;margin:0;padding:0;text-transform:uppercase;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoComponent, decorators: [{
+TCloudUiLineStepCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLineStepCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiLineStepCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiLineStepCircleComponent, selector: "tcloud-ui-line-step-circle", inputs: { step: "step", active: "active", inactives: "inactives", complete: "complete" }, ngImport: i0, template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\r\n  <tr>\r\n    <ng-container *ngFor=\"let fase of trilha; let i = index\" >\r\n      <td class=\"area-circle\"><i class=\"fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} \"></i></td>\r\n      <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\r\n        <div class=\"step-line {{ fase.class }}\"></div>\r\n      </td>\r\n    </ng-container>\r\n  </tr>\r\n</table>", styles: [".table-trilha{width:100%;border-collapse:collapse;margin-top:3px;margin-bottom:2px}.table-trilha td{border:none}.table-trilha .area-circle{width:0px}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:110%}table tr{background-color:transparent!important}.step-default{background-color:#d9d9d9}.step-progress{background-color:#039be5!important}.icon-step-default{color:#d9d9d9}.icon-step-progress{color:#039be5}.icon-step-active{color:#ea9b3e}.step-inactive{color:#d9d9d9!important}\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLineStepCircleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-linha-logo', template: "<!-- <div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n  <img class=\"img-logo\" src=\"/assets/img/logo-totvs.svg\" alt=\"{{ alt_product_name }}\">\r\n  <p class=\"text-small\">Linha</p>\r\n  <p class=\"text-product\" [style]=\"'font-size:'+font_size+';'\" >{{ product_name }}</p>\r\n</div> -->\r\n\r\n<div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n  <img class=\"img-logo\" [attr.data-name-image]=\"logo_name\" [attr.src]=\"'/assets/img/'+logo_name+'.svg'\" alt=\"{{ alt_product_name }}\">\r\n</div>", styles: [".logo-product{display:flex;color:var(--cinza);flex-flow:column;width:150px}.logo-product .img-logo{width:100%;margin-bottom:13px}.logo-product .text-small{font-size:13px;margin:0;padding:0;text-align:left}.logo-product .text-product{text-align:left;font-size:22px;font-weight:700;line-height:1;margin:0;padding:0;text-transform:uppercase;white-space:nowrap}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { product: [{
+            args: [{ selector: 'tcloud-ui-line-step-circle', template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\r\n  <tr>\r\n    <ng-container *ngFor=\"let fase of trilha; let i = index\" >\r\n      <td class=\"area-circle\"><i class=\"fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} \"></i></td>\r\n      <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\r\n        <div class=\"step-line {{ fase.class }}\"></div>\r\n      </td>\r\n    </ng-container>\r\n  </tr>\r\n</table>", styles: [".table-trilha{width:100%;border-collapse:collapse;margin-top:3px;margin-bottom:2px}.table-trilha td{border:none}.table-trilha .area-circle{width:0px}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:110%}table tr{background-color:transparent!important}.step-default{background-color:#d9d9d9}.step-progress{background-color:#039be5!important}.icon-step-default{color:#d9d9d9}.icon-step-progress{color:#039be5}.icon-step-active{color:#ea9b3e}.step-inactive{color:#d9d9d9!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { step: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], inactives: [{
+                type: Input
+            }], complete: [{
                 type: Input
             }] } });
 
-class TCloudUiLinhaLogoModule {
+class TCloudUiLineStepCircleModule {
 }
-TCloudUiLinhaLogoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TCloudUiLinhaLogoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoModule, declarations: [TCloudUiLinhaLogoComponent], imports: [CommonModule], exports: [TCloudUiLinhaLogoComponent] });
-TCloudUiLinhaLogoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoModule, decorators: [{
+TCloudUiLineStepCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLineStepCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiLineStepCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLineStepCircleModule, declarations: [TCloudUiLineStepCircleComponent], imports: [CommonModule], exports: [TCloudUiLineStepCircleComponent] });
+TCloudUiLineStepCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLineStepCircleModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLineStepCircleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        TCloudUiLinhaLogoComponent
+                        TCloudUiLineStepCircleComponent
                     ],
                     imports: [
                         CommonModule
                     ],
                     exports: [
-                        TCloudUiLinhaLogoComponent
+                        TCloudUiLineStepCircleComponent
+                    ]
+                }]
+        }] });
+
+class TCloudUiModule {
+}
+TCloudUiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, imports: [TCloudUiModalModule,
+        TCloudUiTabMenuModule,
+        TCloudUiLinhaLogoModule,
+        TCloudUiLineStepCircleModule], exports: [TCloudUiModalModule,
+        TCloudUiTabMenuModule,
+        TCloudUiLinhaLogoModule,
+        TCloudUiLineStepCircleModule] });
+TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, imports: [TCloudUiModalModule,
+        TCloudUiTabMenuModule,
+        TCloudUiLinhaLogoModule,
+        TCloudUiLineStepCircleModule, TCloudUiModalModule,
+        TCloudUiTabMenuModule,
+        TCloudUiLinhaLogoModule,
+        TCloudUiLineStepCircleModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TCloudUiModalModule,
+                        TCloudUiTabMenuModule,
+                        TCloudUiLinhaLogoModule,
+                        TCloudUiLineStepCircleModule
+                    ],
+                    exports: [
+                        TCloudUiModalModule,
+                        TCloudUiTabMenuModule,
+                        TCloudUiLinhaLogoModule,
+                        TCloudUiLineStepCircleModule
                     ]
                 }]
         }] });
@@ -788,5 +912,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TcloudUiModalBodyComponent, TcloudUiModalComponent, TcloudUiModalFooterComponent, TcloudUiModalHeaderComponent, TcloudUiModalModule };
+export { TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map