@dev-tcloud/tcloud-ui 0.0.21 → 0.0.23

package/assets/scss/custom/table.scss

@@ -7,6 +7,10 @@
     white-space: nowrap;
   }
 
+  td, th{
+    vertical-align: middle;
+  }
+
   th{
     font-weight: 400;
     line-height: 1.5;

package/esm2020/lib/_modules/tcloud-ui-choice-issues/tcloud-ui-choice-issues.component.mjs

@@ -67,10 +67,10 @@ export class TCloudUiChoiceIssuesComponent {
     }
 }
 TCloudUiChoiceIssuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiChoiceIssuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiChoiceIssuesComponent, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8\">\r\n      <p class=\"titulo\">{{ titulo }}</p>      \r\n    </div>\r\n    <div class=\"col-md-4 text-right\">  \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n            </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>    \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset view\" >\r\n              <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n              <label *ngIf=\"!value\">N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div class=\"col-md-12 mt-1\">\r\n      <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n    </div>\r\n    <div class=\"col-md-12 mt-2 mb-1\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TCloudUiChoiceIssuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiChoiceIssuesComponent, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8\">\r\n      <p class=\"titulo\">{{ titulo }}</p>      \r\n    </div>\r\n    <div class=\"col-md-4 text-right\">  \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n            </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>    \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset view\" >\r\n              <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n              <label *ngIf=\"!value\">N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div class=\"col-md-12 mt-1\">\r\n      <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n    </div>\r\n    <div class=\"col-md-12 mt-2 mb-1\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8\">\r\n      <p class=\"titulo\">{{ titulo }}</p>      \r\n    </div>\r\n    <div class=\"col-md-4 text-right\">  \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n            </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>    \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset view\" >\r\n              <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n              <label *ngIf=\"!value\">N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div class=\"col-md-12 mt-1\">\r\n      <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n    </div>\r\n    <div class=\"col-md-12 mt-2 mb-1\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8\">\r\n      <p class=\"titulo\">{{ titulo }}</p>      \r\n    </div>\r\n    <div class=\"col-md-4 text-right\">  \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n            </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>    \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset view\" >\r\n              <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n              <label *ngIf=\"!value\">N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div class=\"col-md-12 mt-1\">\r\n      <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n    </div>\r\n    <div class=\"col-md-12 mt-2 mb-1\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { view: [{
                 type: Input
             }], titulo: [{

package/esm2020/lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list.component.mjs

@@ -243,13 +243,13 @@ TCloudUiDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
 TCloudUiDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: { placeholder: "placeholder", disabled: "disabled", loading: "loading", search: "search", ngModel: "ngModel" }, outputs: { onInputChange: "onInputChange", onChange: "onChange", ngModelChange: "ngModelChange" }, providers: [
         DataListService,
         CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
-    ], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n  <div *ngIf=\"loading\" class=\"loading-area\">\r\n    <i class=\"fas fa-spinner fa-spin\"></i>\r\n  </div>\r\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\r\n  <button \r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select\" \r\n    type=\"button\" \r\n    id=\"{{ id }}\" \r\n    \r\n    [attr.aria-haspopup]=\"'true'\" \r\n    [attr.aria-expanded]=\"'false'\" \r\n    (click)=\"toOpen()\" >\r\n\r\n    <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>      \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>", styles: [".dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:1px solid #ccc;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    ], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n  <div *ngIf=\"loading\" class=\"loading-area\">\r\n    <i class=\"fas fa-spinner fa-spin\"></i>\r\n  </div>\r\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\r\n  <button \r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select\" \r\n    type=\"button\" \r\n    id=\"{{ id }}\" \r\n    \r\n    [attr.aria-haspopup]=\"'true'\" \r\n    [attr.aria-expanded]=\"'false'\" \r\n    (click)=\"toOpen()\" >\r\n\r\n    <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>      \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>", styles: [".dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:1px solid #ccc;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-data-list', providers: [
                         DataListService,
                         CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
-                    ], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n  <div *ngIf=\"loading\" class=\"loading-area\">\r\n    <i class=\"fas fa-spinner fa-spin\"></i>\r\n  </div>\r\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\r\n  <button \r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select\" \r\n    type=\"button\" \r\n    id=\"{{ id }}\" \r\n    \r\n    [attr.aria-haspopup]=\"'true'\" \r\n    [attr.aria-expanded]=\"'false'\" \r\n    (click)=\"toOpen()\" >\r\n\r\n    <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>      \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>", styles: [".dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:1px solid #ccc;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}\n"] }]
+                    ], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n  <div *ngIf=\"loading\" class=\"loading-area\">\r\n    <i class=\"fas fa-spinner fa-spin\"></i>\r\n  </div>\r\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\r\n  <button \r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select\" \r\n    type=\"button\" \r\n    id=\"{{ id }}\" \r\n    \r\n    [attr.aria-haspopup]=\"'true'\" \r\n    [attr.aria-expanded]=\"'false'\" \r\n    (click)=\"toOpen()\" >\r\n\r\n    <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>      \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>", styles: [".dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:1px solid #ccc;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataListService }, { type: i2.FormBuilder }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], disabled: [{

package/esm2020/lib/_modules/tcloud-ui-input-search/tcloud-ui-input-search.component.mjs

@@ -11,7 +11,7 @@ export class TCloudUiInputSearchComponent {
          * @param placeholder string - placeholder no input
          * @param mirror boolean - Exibir os valores espelhados ou somente os valores encontrados
          * @param base_object object - Objeto onde ser procurado
-         * @param found - Evite o valor encontrado
+         * @param found - Emite o valor encontrado
          */
         this.placeholder = 'Procurar...';
         this.mirror = true;
@@ -49,10 +49,10 @@ export class TCloudUiInputSearchComponent {
     }
 }
 TCloudUiInputSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiInputSearchComponent, deps: [{ token: i1.TCloudUiSearchInObjectService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiInputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiInputSearchComponent, selector: "tcloud-ui-input-search", inputs: { placeholder: "placeholder", mirror: "mirror", base_object: "base_object" }, outputs: { found: "found" }, ngImport: i0, template: "<table class=\"tc-group-input-table\" cellspacing=\"0\" cellpadding=\"0\">\n    <tr>\n        <td><input [(ngModel)]=\"search_text\" type=\"text\" (keyup)=\"buscar(search_text)\" placeholder=\"{{ placeholder }}\" ></td>\n        <td>     \n            <ng-container *ngIf=\"search_text === ''\">  \n                <button type=\"button\" (click)=\"buscar(search_text)\"><i class=\"fas fa-search\"></i></button>\n            </ng-container> \n\n            <ng-container *ngIf=\"search_text !== ''\">  \n                <button type=\"button\" (click)=\"clean()\"><i class=\"fas fa-times\"></i></button>\n            </ng-container>\n        </td>\n    </tr>\n</table>", styles: [".tc-group-input-table{width:100%;border-collapse:collapse;border-spacing:0}.tc-group-input-table td{border:none;border-style:hidden;border-spacing:0}.tc-group-input-table td:first-child input{width:100%;height:35px;border:none;border:1px solid #ccc}.tc-group-input-table td:last-child{width:40px}.tc-group-input-table td:last-child button{width:100%;height:35px;border:none;border-radius:0 10px 10px 0;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TCloudUiInputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiInputSearchComponent, selector: "tcloud-ui-input-search", inputs: { placeholder: "placeholder", mirror: "mirror", base_object: "base_object" }, outputs: { found: "found" }, ngImport: i0, template: "<table class=\"tc-group-input-table\" cellspacing=\"0\" cellpadding=\"0\">\n    <tr>\n        <td><input [(ngModel)]=\"search_text\" type=\"text\" (keyup)=\"buscar(search_text)\" placeholder=\"{{ placeholder }}\" ></td>\n        <td>     \n            <ng-container *ngIf=\"search_text === ''\">  \n                <button type=\"button\" (click)=\"buscar(search_text)\"><i class=\"fas fa-search\"></i></button>\n            </ng-container> \n\n            <ng-container *ngIf=\"search_text !== ''\">  \n                <button type=\"button\" (click)=\"clean()\"><i class=\"fas fa-times\"></i></button>\n            </ng-container>\n        </td>\n    </tr>\n</table>", styles: [".tc-group-input-table{width:100%;border-collapse:collapse;border-spacing:0}.tc-group-input-table td{border:none;border-style:hidden;border-spacing:0;vertical-align:top}.tc-group-input-table td:first-child input{width:100%;height:35px;border:none;border:1px solid #ccc}.tc-group-input-table td:last-child{width:40px}.tc-group-input-table td:last-child button{width:100%;height:35px;border:none;border-radius:0 10px 10px 0;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiInputSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-input-search', template: "<table class=\"tc-group-input-table\" cellspacing=\"0\" cellpadding=\"0\">\n    <tr>\n        <td><input [(ngModel)]=\"search_text\" type=\"text\" (keyup)=\"buscar(search_text)\" placeholder=\"{{ placeholder }}\" ></td>\n        <td>     \n            <ng-container *ngIf=\"search_text === ''\">  \n                <button type=\"button\" (click)=\"buscar(search_text)\"><i class=\"fas fa-search\"></i></button>\n            </ng-container> \n\n            <ng-container *ngIf=\"search_text !== ''\">  \n                <button type=\"button\" (click)=\"clean()\"><i class=\"fas fa-times\"></i></button>\n            </ng-container>\n        </td>\n    </tr>\n</table>", styles: [".tc-group-input-table{width:100%;border-collapse:collapse;border-spacing:0}.tc-group-input-table td{border:none;border-style:hidden;border-spacing:0}.tc-group-input-table td:first-child input{width:100%;height:35px;border:none;border:1px solid #ccc}.tc-group-input-table td:last-child{width:40px}.tc-group-input-table td:last-child button{width:100%;height:35px;border:none;border-radius:0 10px 10px 0;cursor:pointer}\n"] }]
+            args: [{ selector: 'tcloud-ui-input-search', template: "<table class=\"tc-group-input-table\" cellspacing=\"0\" cellpadding=\"0\">\n    <tr>\n        <td><input [(ngModel)]=\"search_text\" type=\"text\" (keyup)=\"buscar(search_text)\" placeholder=\"{{ placeholder }}\" ></td>\n        <td>     \n            <ng-container *ngIf=\"search_text === ''\">  \n                <button type=\"button\" (click)=\"buscar(search_text)\"><i class=\"fas fa-search\"></i></button>\n            </ng-container> \n\n            <ng-container *ngIf=\"search_text !== ''\">  \n                <button type=\"button\" (click)=\"clean()\"><i class=\"fas fa-times\"></i></button>\n            </ng-container>\n        </td>\n    </tr>\n</table>", styles: [".tc-group-input-table{width:100%;border-collapse:collapse;border-spacing:0}.tc-group-input-table td{border:none;border-style:hidden;border-spacing:0;vertical-align:top}.tc-group-input-table td:first-child input{width:100%;height:35px;border:none;border:1px solid #ccc}.tc-group-input-table td:last-child{width:40px}.tc-group-input-table td:last-child button{width:100%;height:35px;border:none;border-radius:0 10px 10px 0;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TCloudUiSearchInObjectService }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], mirror: [{
@@ -62,4 +62,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], found: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGNsb3VkLXVpLWlucHV0LXNlYXJjaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90Y2xvdWQtdWkvc3JjL2xpYi9fbW9kdWxlcy90Y2xvdWQtdWktaW5wdXQtc2VhcmNoL3RjbG91ZC11aS1pbnB1dC1zZWFyY2guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdGNsb3VkLXVpL3NyYy9saWIvX21vZHVsZXMvdGNsb3VkLXVpLWlucHV0LXNlYXJjaC90Y2xvdWQtdWktaW5wdXQtc2VhcmNoLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBUS9FLE1BQU0sT0FBTyw0QkFBNEI7SUFpQ3ZDLFlBQ1UscUJBQW9EO1FBQXBELDBCQUFxQixHQUFyQixxQkFBcUIsQ0FBK0I7UUFoQzlEOzs7Ozs7V0FNRztRQUVNLGdCQUFXLEdBQVcsYUFBYSxDQUFDO1FBRXBDLFdBQU0sR0FBWSxJQUFJLENBQUM7UUFFaEMsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFpQmYsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFJdEMsQ0FBQztJQWxCTCxJQUFhLFdBQVcsQ0FBQyxXQUFnQjtRQUN2QyxJQUFJLFdBQVcsRUFBRTtZQUNmLElBQUksQ0FBQyxZQUFZLEdBQUcsV0FBVyxDQUFDO1lBRWhDLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRTtnQkFDZixJQUFJLENBQUMsYUFBYSxHQUFHLFdBQVcsQ0FBQztnQkFDakMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO2FBQ2hCO1NBQ0Y7SUFDSCxDQUFDO0lBQ0QsSUFBSSxXQUFXLEtBQUksT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQztJQVU5QyxRQUFRO0lBQ1IsQ0FBQztJQUVELE1BQU0sQ0FBQyxLQUFhO1FBQ2xCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLElBQUksQ0FBQyxHQUFHLEtBQUssRUFBRSxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUNuRixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDZixJQUFJLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1NBQ2pCO2FBQUk7WUFDSCxJQUFJLENBQUMsYUFBYSxHQUFHLEVBQUUsQ0FBQztZQUN4QixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7U0FDaEI7UUFDRCxJQUFJLENBQUMsV0FBVyxHQUFHLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFFLElBQUksQ0FBQyxhQUFhLENBQUUsQ0FBQztJQUN4QyxDQUFDOzswSEF6RFUsNEJBQTRCOzhHQUE1Qiw0QkFBNEIsaUxDUnpDLDhwQkFhUTs0RkRMSyw0QkFBNEI7a0JBTHhDLFNBQVM7K0JBQ0Usd0JBQXdCO29IQWN6QixXQUFXO3NCQUFuQixLQUFLO2dCQUVHLE1BQU07c0JBQWQsS0FBSztnQkFLTyxXQUFXO3NCQUF2QixLQUFLO2dCQWNJLEtBQUs7c0JBQWQsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRDbG91ZFVpU2VhcmNoSW5PYmplY3RTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vX3NlcnZpY2VzL3NlYXJjaC1pbi1vYmplY3Quc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RjbG91ZC11aS1pbnB1dC1zZWFyY2gnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGNsb3VkLXVpLWlucHV0LXNlYXJjaC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RjbG91ZC11aS1pbnB1dC1zZWFyY2guY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBUQ2xvdWRVaUlucHV0U2VhcmNoQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICAvKipcbiAgICogdGNsb3VkLXVpLWlucHV0LXNlYXJjaCAtIFByb2N1cmEgcGVsbyB2YWxvciBpbmZvcm1hZG8gbm8gb2JqZXRvIGluZGljYWRvXG4gICAqIEBwYXJhbSBwbGFjZWhvbGRlciBzdHJpbmcgLSBwbGFjZWhvbGRlciBubyBpbnB1dFxuICAgKiBAcGFyYW0gbWlycm9yIGJvb2xlYW4gLSBFeGliaXIgb3MgdmFsb3JlcyBlc3BlbGhhZG9zIG91IHNvbWVudGUgb3MgdmFsb3JlcyBlbmNvbnRyYWRvc1xuICAgKiBAcGFyYW0gYmFzZV9vYmplY3Qgb2JqZWN0IC0gT2JqZXRvIG9uZGUgc2VyIHByb2N1cmFkbyBcbiAgICogQHBhcmFtIGZvdW5kIC0gRXZpdGUgbyB2YWxvciBlbmNvbnRyYWRvXG4gICAqL1xuXG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnUHJvY3VyYXIuLi4nO1xuXG4gIEBJbnB1dCgpIG1pcnJvcjogYm9vbGVhbiA9IHRydWU7XG5cbiAgc2VhcmNoX3RleHQ6IHN0cmluZyA9ICcnO1xuXG4gIHByaXZhdGUgX2Jhc2Vfb2JqZWN0OiBhbnk7XG4gIEBJbnB1dCgpIHNldCBiYXNlX29iamVjdChiYXNlX29iamVjdDogYW55KXtcbiAgICBpZiggYmFzZV9vYmplY3QgKXtcbiAgICAgIHRoaXMuX2Jhc2Vfb2JqZWN0ID0gYmFzZV9vYmplY3Q7XG5cbiAgICAgIGlmKCB0aGlzLm1pcnJvciApe1xuICAgICAgICB0aGlzLnJlc3VsdF9vYmplY3QgPSBiYXNlX29iamVjdDtcbiAgICAgICAgdGhpcy50b0ZvdW5kKCk7XG4gICAgICB9XG4gICAgfSAgICBcbiAgfVxuICBnZXQgYmFzZV9vYmplY3QoKXsgcmV0dXJuIHRoaXMuX2Jhc2Vfb2JqZWN0OyB9XG5cbiAgcmVzdWx0X29iamVjdDogYW55IHwgdW5kZWZpbmVkO1xuXG4gIEBPdXRwdXQoKSBmb3VuZCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgc2VhcmNoSW5PYmplY3RTZXJ2aWNlOiBUQ2xvdWRVaVNlYXJjaEluT2JqZWN0U2VydmljZVxuICApIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG5cbiAgYnVzY2FyKHZhbHVlOiBzdHJpbmcpe1xuICAgIHRoaXMucmVzdWx0X29iamVjdCA9IHRoaXMuc2VhcmNoSW5PYmplY3RTZXJ2aWNlLm1lZXQoYCR7dmFsdWV9YCwgdGhpcy5iYXNlX29iamVjdCk7XG4gICAgdGhpcy50b0ZvdW5kKCk7XG4gIH1cblxuICBjbGVhbigpe1xuICAgIGlmKCB0aGlzLm1pcnJvciApe1xuICAgICAgdGhpcy5idXNjYXIoJycpO1xuICAgIH1lbHNle1xuICAgICAgdGhpcy5yZXN1bHRfb2JqZWN0ID0gW107IFxuICAgICAgdGhpcy50b0ZvdW5kKCk7XG4gICAgfVxuICAgIHRoaXMuc2VhcmNoX3RleHQgPSAnJztcbiAgfVxuXG4gIHRvRm91bmQoKXtcbiAgICB0aGlzLmZvdW5kLmVtaXQoIHRoaXMucmVzdWx0X29iamVjdCApO1xuICB9XG5cbn1cbiIsIjx0YWJsZSBjbGFzcz1cInRjLWdyb3VwLWlucHV0LXRhYmxlXCIgY2VsbHNwYWNpbmc9XCIwXCIgY2VsbHBhZGRpbmc9XCIwXCI+XG4gICAgPHRyPlxuICAgICAgICA8dGQ+PGlucHV0IFsobmdNb2RlbCldPVwic2VhcmNoX3RleHRcIiB0eXBlPVwidGV4dFwiIChrZXl1cCk9XCJidXNjYXIoc2VhcmNoX3RleHQpXCIgcGxhY2Vob2xkZXI9XCJ7eyBwbGFjZWhvbGRlciB9fVwiID48L3RkPlxuICAgICAgICA8dGQ+ICAgICBcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzZWFyY2hfdGV4dCA9PT0gJydcIj4gIFxuICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIChjbGljayk9XCJidXNjYXIoc2VhcmNoX3RleHQpXCI+PGkgY2xhc3M9XCJmYXMgZmEtc2VhcmNoXCI+PC9pPjwvYnV0dG9uPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+IFxuXG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwic2VhcmNoX3RleHQgIT09ICcnXCI+ICBcbiAgICAgICAgICAgICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwiY2xlYW4oKVwiPjxpIGNsYXNzPVwiZmFzIGZhLXRpbWVzXCI+PC9pPjwvYnV0dG9uPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvdGQ+XG4gICAgPC90cj5cbjwvdGFibGU+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGNsb3VkLXVpLWlucHV0LXNlYXJjaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90Y2xvdWQtdWkvc3JjL2xpYi9fbW9kdWxlcy90Y2xvdWQtdWktaW5wdXQtc2VhcmNoL3RjbG91ZC11aS1pbnB1dC1zZWFyY2guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdGNsb3VkLXVpL3NyYy9saWIvX21vZHVsZXMvdGNsb3VkLXVpLWlucHV0LXNlYXJjaC90Y2xvdWQtdWktaW5wdXQtc2VhcmNoLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBUS9FLE1BQU0sT0FBTyw0QkFBNEI7SUFpQ3ZDLFlBQ1UscUJBQW9EO1FBQXBELDBCQUFxQixHQUFyQixxQkFBcUIsQ0FBK0I7UUFoQzlEOzs7Ozs7V0FNRztRQUVNLGdCQUFXLEdBQVcsYUFBYSxDQUFDO1FBRXBDLFdBQU0sR0FBWSxJQUFJLENBQUM7UUFFaEMsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFpQmYsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFJdEMsQ0FBQztJQWxCTCxJQUFhLFdBQVcsQ0FBQyxXQUFnQjtRQUN2QyxJQUFJLFdBQVcsRUFBRTtZQUNmLElBQUksQ0FBQyxZQUFZLEdBQUcsV0FBVyxDQUFDO1lBRWhDLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRTtnQkFDZixJQUFJLENBQUMsYUFBYSxHQUFHLFdBQVcsQ0FBQztnQkFDakMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO2FBQ2hCO1NBQ0Y7SUFDSCxDQUFDO0lBQ0QsSUFBSSxXQUFXLEtBQUksT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQztJQVU5QyxRQUFRO0lBQ1IsQ0FBQztJQUVELE1BQU0sQ0FBQyxLQUFhO1FBQ2xCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLElBQUksQ0FBQyxHQUFHLEtBQUssRUFBRSxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUNuRixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDZixJQUFJLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1NBQ2pCO2FBQUk7WUFDSCxJQUFJLENBQUMsYUFBYSxHQUFHLEVBQUUsQ0FBQztZQUN4QixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7U0FDaEI7UUFDRCxJQUFJLENBQUMsV0FBVyxHQUFHLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFFLElBQUksQ0FBQyxhQUFhLENBQUUsQ0FBQztJQUN4QyxDQUFDOzswSEF6RFUsNEJBQTRCOzhHQUE1Qiw0QkFBNEIsaUxDUnpDLDhwQkFhUTs0RkRMSyw0QkFBNEI7a0JBTHhDLFNBQVM7K0JBQ0Usd0JBQXdCO29IQWN6QixXQUFXO3NCQUFuQixLQUFLO2dCQUVHLE1BQU07c0JBQWQsS0FBSztnQkFLTyxXQUFXO3NCQUF2QixLQUFLO2dCQWNJLEtBQUs7c0JBQWQsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRDbG91ZFVpU2VhcmNoSW5PYmplY3RTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vX3NlcnZpY2VzL3NlYXJjaC1pbi1vYmplY3Quc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RjbG91ZC11aS1pbnB1dC1zZWFyY2gnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGNsb3VkLXVpLWlucHV0LXNlYXJjaC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RjbG91ZC11aS1pbnB1dC1zZWFyY2guY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBUQ2xvdWRVaUlucHV0U2VhcmNoQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICAvKipcbiAgICogdGNsb3VkLXVpLWlucHV0LXNlYXJjaCAtIFByb2N1cmEgcGVsbyB2YWxvciBpbmZvcm1hZG8gbm8gb2JqZXRvIGluZGljYWRvXG4gICAqIEBwYXJhbSBwbGFjZWhvbGRlciBzdHJpbmcgLSBwbGFjZWhvbGRlciBubyBpbnB1dFxuICAgKiBAcGFyYW0gbWlycm9yIGJvb2xlYW4gLSBFeGliaXIgb3MgdmFsb3JlcyBlc3BlbGhhZG9zIG91IHNvbWVudGUgb3MgdmFsb3JlcyBlbmNvbnRyYWRvc1xuICAgKiBAcGFyYW0gYmFzZV9vYmplY3Qgb2JqZWN0IC0gT2JqZXRvIG9uZGUgc2VyIHByb2N1cmFkbyBcbiAgICogQHBhcmFtIGZvdW5kIC0gRW1pdGUgbyB2YWxvciBlbmNvbnRyYWRvXG4gICAqL1xuXG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnUHJvY3VyYXIuLi4nO1xuXG4gIEBJbnB1dCgpIG1pcnJvcjogYm9vbGVhbiA9IHRydWU7XG5cbiAgc2VhcmNoX3RleHQ6IHN0cmluZyA9ICcnO1xuXG4gIHByaXZhdGUgX2Jhc2Vfb2JqZWN0OiBhbnk7XG4gIEBJbnB1dCgpIHNldCBiYXNlX29iamVjdChiYXNlX29iamVjdDogYW55KXtcbiAgICBpZiggYmFzZV9vYmplY3QgKXtcbiAgICAgIHRoaXMuX2Jhc2Vfb2JqZWN0ID0gYmFzZV9vYmplY3Q7XG5cbiAgICAgIGlmKCB0aGlzLm1pcnJvciApe1xuICAgICAgICB0aGlzLnJlc3VsdF9vYmplY3QgPSBiYXNlX29iamVjdDtcbiAgICAgICAgdGhpcy50b0ZvdW5kKCk7XG4gICAgICB9XG4gICAgfSAgICBcbiAgfVxuICBnZXQgYmFzZV9vYmplY3QoKXsgcmV0dXJuIHRoaXMuX2Jhc2Vfb2JqZWN0OyB9XG5cbiAgcmVzdWx0X29iamVjdDogYW55IHwgdW5kZWZpbmVkO1xuXG4gIEBPdXRwdXQoKSBmb3VuZCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgc2VhcmNoSW5PYmplY3RTZXJ2aWNlOiBUQ2xvdWRVaVNlYXJjaEluT2JqZWN0U2VydmljZVxuICApIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG5cbiAgYnVzY2FyKHZhbHVlOiBzdHJpbmcpe1xuICAgIHRoaXMucmVzdWx0X29iamVjdCA9IHRoaXMuc2VhcmNoSW5PYmplY3RTZXJ2aWNlLm1lZXQoYCR7dmFsdWV9YCwgdGhpcy5iYXNlX29iamVjdCk7XG4gICAgdGhpcy50b0ZvdW5kKCk7XG4gIH1cblxuICBjbGVhbigpe1xuICAgIGlmKCB0aGlzLm1pcnJvciApe1xuICAgICAgdGhpcy5idXNjYXIoJycpO1xuICAgIH1lbHNle1xuICAgICAgdGhpcy5yZXN1bHRfb2JqZWN0ID0gW107IFxuICAgICAgdGhpcy50b0ZvdW5kKCk7XG4gICAgfVxuICAgIHRoaXMuc2VhcmNoX3RleHQgPSAnJztcbiAgfVxuXG4gIHRvRm91bmQoKXtcbiAgICB0aGlzLmZvdW5kLmVtaXQoIHRoaXMucmVzdWx0X29iamVjdCApO1xuICB9XG5cbn1cbiIsIjx0YWJsZSBjbGFzcz1cInRjLWdyb3VwLWlucHV0LXRhYmxlXCIgY2VsbHNwYWNpbmc9XCIwXCIgY2VsbHBhZGRpbmc9XCIwXCI+XG4gICAgPHRyPlxuICAgICAgICA8dGQ+PGlucHV0IFsobmdNb2RlbCldPVwic2VhcmNoX3RleHRcIiB0eXBlPVwidGV4dFwiIChrZXl1cCk9XCJidXNjYXIoc2VhcmNoX3RleHQpXCIgcGxhY2Vob2xkZXI9XCJ7eyBwbGFjZWhvbGRlciB9fVwiID48L3RkPlxuICAgICAgICA8dGQ+ICAgICBcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzZWFyY2hfdGV4dCA9PT0gJydcIj4gIFxuICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIChjbGljayk9XCJidXNjYXIoc2VhcmNoX3RleHQpXCI+PGkgY2xhc3M9XCJmYXMgZmEtc2VhcmNoXCI+PC9pPjwvYnV0dG9uPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+IFxuXG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwic2VhcmNoX3RleHQgIT09ICcnXCI+ICBcbiAgICAgICAgICAgICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwiY2xlYW4oKVwiPjxpIGNsYXNzPVwiZmFzIGZhLXRpbWVzXCI+PC9pPjwvYnV0dG9uPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvdGQ+XG4gICAgPC90cj5cbjwvdGFibGU+Il19

package/esm2020/lib/_modules/tcloud-ui-line-step-circle/tcloud-ui-line-step-circle.component.mjs

@@ -56,10 +56,10 @@ export class TCloudUiLineStepCircleComponent {
     }
 }
 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\">\r\n        <!-- <i class=\"fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} \"></i> -->\r\n\r\n        <div class=\"tc-circle icon-{{ fase.class }} {{ fase.second_class }}\"></div>\r\n      \r\n      </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:calc(100% + 2px)}table tr{background-color:transparent!important}.step-default{background-color:#d9d9d9}.step-progress{background-color:#039be5!important}.icon-step-default{background-color:#d9d9d9}.icon-step-progress{background-color:#039be5}.icon-step-active{background-color:#ea9b3e}.step-inactive{background-color:#d9d9d9!important}.tc-circle{height:15px;width:15px;border-radius:50%;position:relative;z-index:1}\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"] }] });
+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\">\r\n        <!-- <i class=\"fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} \"></i> -->\r\n\r\n        <div class=\"tc-circle icon-{{ fase.class }} {{ fase.second_class }}\"></div>\r\n      \r\n      </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:calc(100% + 2px)}table tr{background-color:transparent!important}table th,table td{vertical-align:middle}.step-default{background-color:#d9d9d9}.step-progress{background-color:#039be5!important}.icon-step-default{background-color:#d9d9d9}.icon-step-progress{background-color:#039be5}.icon-step-active{background-color:#ea9b3e}.step-inactive{background-color:#d9d9d9!important}.tc-circle{height:15px;width:15px;border-radius:50%;position:relative;z-index:1}\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-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\">\r\n        <!-- <i class=\"fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} \"></i> -->\r\n\r\n        <div class=\"tc-circle icon-{{ fase.class }} {{ fase.second_class }}\"></div>\r\n      \r\n      </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:calc(100% + 2px)}table tr{background-color:transparent!important}.step-default{background-color:#d9d9d9}.step-progress{background-color:#039be5!important}.icon-step-default{background-color:#d9d9d9}.icon-step-progress{background-color:#039be5}.icon-step-active{background-color:#ea9b3e}.step-inactive{background-color:#d9d9d9!important}.tc-circle{height:15px;width:15px;border-radius:50%;position:relative;z-index:1}\n"] }]
+            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\">\r\n        <!-- <i class=\"fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} \"></i> -->\r\n\r\n        <div class=\"tc-circle icon-{{ fase.class }} {{ fase.second_class }}\"></div>\r\n      \r\n      </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:calc(100% + 2px)}table tr{background-color:transparent!important}table th,table td{vertical-align:middle}.step-default{background-color:#d9d9d9}.step-progress{background-color:#039be5!important}.icon-step-default{background-color:#d9d9d9}.icon-step-progress{background-color:#039be5}.icon-step-active{background-color:#ea9b3e}.step-inactive{background-color:#d9d9d9!important}.tc-circle{height:15px;width:15px;border-radius:50%;position:relative;z-index:1}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { step: [{
                 type: Input
             }], active: [{

package/esm2020/lib/_modules/tcloud-ui-multi-input/tcloud-ui-multi-input.component.mjs

@@ -128,10 +128,10 @@ export class TCloudUiMultiInputComponent {
     }
 }
 TCloudUiMultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div>\n\n    <table>\n      <tr>\n        <td>\n          <input (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n  \n    <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\">\n          <div class=\"box-value\" [title]=\"item.value\">\n            {{ item.value }}          \n          </div>\n          <div class=\"box-action\">\n            <button\n              [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n              title=\"Remover\"\n              type=\"button\"\n              (click)=\"removeItem(item.value, i);onChangeTouched()\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n \n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div>\n\n    <table>\n      <tr>\n        <td>\n          <input (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n  \n    <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\">\n          <div class=\"box-value\" [title]=\"item.value\">\n            {{ item.value }}          \n          </div>\n          <div class=\"box-action\">\n            <button\n              [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n              title=\"Remover\"\n              type=\"button\"\n              (click)=\"removeItem(item.value, i);onChangeTouched()\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n \n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div>\n\n    <table>\n      <tr>\n        <td>\n          <input (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n  \n    <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\">\n          <div class=\"box-value\" [title]=\"item.value\">\n            {{ item.value }}          \n          </div>\n          <div class=\"box-action\">\n            <button\n              [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n              title=\"Remover\"\n              type=\"button\"\n              (click)=\"removeItem(item.value, i);onChangeTouched()\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n \n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"] }]
+            args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div>\n\n    <table>\n      <tr>\n        <td>\n          <input (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n  \n    <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\">\n          <div class=\"box-value\" [title]=\"item.value\">\n            {{ item.value }}          \n          </div>\n          <div class=\"box-action\">\n            <button\n              [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n              title=\"Remover\"\n              type=\"button\"\n              (click)=\"removeItem(item.value, i);onChangeTouched()\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n \n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
                 type: Input
             }], placeholder: [{

package/esm2020/lib/_modules/tcloud-ui-multi-select/tcloud-ui-multi-select.component.mjs

@@ -140,10 +140,10 @@ export class TCloudUiMultiSelectComponent {
     }
 }
 TCloudUiMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "\r\n  <div>\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\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"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TCloudUiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "\r\n  <div>\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\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"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "\r\n  <div>\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"] }]
+            args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "\r\n  <div>\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
                 type: Input
             }], placeholder: [{

package/esm2020/lib/_modules/tcloud-ui-number-step/tcloud-ui-number-step.component.mjs

@@ -60,10 +60,10 @@ export class TCloudUiNumberStepComponent {
     }
 }
 TCloudUiNumberStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiNumberStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiNumberStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiNumberStepComponent, selector: "tcloud-ui-number-step", inputs: { step: "step", active: "active", inactives: "inactives", complete: "complete", useIconCheck: "useIconCheck" }, ngImport: i0, template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\n  <tr>\n    <ng-container *ngFor=\"let fase of trilha; let i = index\" >\n      <td class=\"area-circle\">\n        <div class=\"circle icon-{{ fase.class }} {{ fase.second_class }} \">\n\n          <ng-container *ngIf=\"useIconCheck\">\n            <ng-container *ngIf=\"i < active && fase.second_class !== 'step-inactive'\">\n              <div class=\"area-index\"><i class=\"fas fa-check\"></i></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"i < active && fase.second_class === 'step-inactive'\">\n              <div class=\"area-index\"><i class=\"far fa-circle\"></i></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"i >= active\">\n              <div class=\"area-index\">{{ i + 1 }}</div>\n            </ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"!useIconCheck\">\n            <div class=\"area-index\">{{ i + 1 }}</div>\n          </ng-container>\n          \n        </div>\n      </td>\n      <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\n        <div class=\"step-line {{ fase.class }}\"></div>        \n      </td>\n    </ng-container>\n  </tr>\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 .area-circle i{font-size:18px}.table-trilha .area-index{font-size:16px;position:relative;top:50%;transform:translateY(-50%)}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:calc(100% + 2px)}table tr{background-color:transparent!important}.circle{display:block;border:1px solid #ccc;height:48px;width:48px;border-radius:50%;text-align:center;font-size:14px}.step-progress{background-color:var(--verde)!important}.icon-step-progress{border-color:var(--verde);background-color:var(--verde)!important}.icon-step-progress .area-index{color:#fff}.icon-step-active{border-color:var(--verde);background-color:var(--verde)!important;color:#fff!important}.step-inactive{background-color:#fbfbfb!important}.step-inactive .area-index{color:#ccc!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"] }] });
+TCloudUiNumberStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiNumberStepComponent, selector: "tcloud-ui-number-step", inputs: { step: "step", active: "active", inactives: "inactives", complete: "complete", useIconCheck: "useIconCheck" }, ngImport: i0, template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\n  <tr>\n    <ng-container *ngFor=\"let fase of trilha; let i = index\" >\n      <td class=\"area-circle\">\n        <div class=\"circle icon-{{ fase.class }} {{ fase.second_class }} \">\n\n          <ng-container *ngIf=\"useIconCheck\">\n            <ng-container *ngIf=\"i < active && fase.second_class !== 'step-inactive'\">\n              <div class=\"area-index\"><i class=\"fas fa-check\"></i></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"i < active && fase.second_class === 'step-inactive'\">\n              <div class=\"area-index\"><i class=\"far fa-circle\"></i></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"i >= active\">\n              <div class=\"area-index\">{{ i + 1 }}</div>\n            </ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"!useIconCheck\">\n            <div class=\"area-index\">{{ i + 1 }}</div>\n          </ng-container>\n          \n        </div>\n      </td>\n      <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\n        <div class=\"step-line {{ fase.class }}\"></div>        \n      </td>\n    </ng-container>\n  </tr>\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 .area-circle i{font-size:18px}.table-trilha .area-index{font-size:16px;position:relative;top:50%;transform:translateY(-50%)}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:calc(100% + 2px)}table tr{background-color:transparent!important}table th,table td{vertical-align:middle}.circle{display:block;border:1px solid #ccc;height:48px;width:48px;border-radius:50%;text-align:center;font-size:14px}.step-progress{background-color:var(--verde)!important}.icon-step-progress{border-color:var(--verde);background-color:var(--verde)!important}.icon-step-progress .area-index{color:#fff}.icon-step-active{border-color:var(--verde);background-color:var(--verde)!important;color:#fff!important}.step-inactive{background-color:#fbfbfb!important}.step-inactive .area-index{color:#ccc!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: TCloudUiNumberStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-number-step', template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\n  <tr>\n    <ng-container *ngFor=\"let fase of trilha; let i = index\" >\n      <td class=\"area-circle\">\n        <div class=\"circle icon-{{ fase.class }} {{ fase.second_class }} \">\n\n          <ng-container *ngIf=\"useIconCheck\">\n            <ng-container *ngIf=\"i < active && fase.second_class !== 'step-inactive'\">\n              <div class=\"area-index\"><i class=\"fas fa-check\"></i></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"i < active && fase.second_class === 'step-inactive'\">\n              <div class=\"area-index\"><i class=\"far fa-circle\"></i></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"i >= active\">\n              <div class=\"area-index\">{{ i + 1 }}</div>\n            </ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"!useIconCheck\">\n            <div class=\"area-index\">{{ i + 1 }}</div>\n          </ng-container>\n          \n        </div>\n      </td>\n      <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\n        <div class=\"step-line {{ fase.class }}\"></div>        \n      </td>\n    </ng-container>\n  </tr>\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 .area-circle i{font-size:18px}.table-trilha .area-index{font-size:16px;position:relative;top:50%;transform:translateY(-50%)}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:calc(100% + 2px)}table tr{background-color:transparent!important}.circle{display:block;border:1px solid #ccc;height:48px;width:48px;border-radius:50%;text-align:center;font-size:14px}.step-progress{background-color:var(--verde)!important}.icon-step-progress{border-color:var(--verde);background-color:var(--verde)!important}.icon-step-progress .area-index{color:#fff}.icon-step-active{border-color:var(--verde);background-color:var(--verde)!important;color:#fff!important}.step-inactive{background-color:#fbfbfb!important}.step-inactive .area-index{color:#ccc!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-number-step', template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\n  <tr>\n    <ng-container *ngFor=\"let fase of trilha; let i = index\" >\n      <td class=\"area-circle\">\n        <div class=\"circle icon-{{ fase.class }} {{ fase.second_class }} \">\n\n          <ng-container *ngIf=\"useIconCheck\">\n            <ng-container *ngIf=\"i < active && fase.second_class !== 'step-inactive'\">\n              <div class=\"area-index\"><i class=\"fas fa-check\"></i></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"i < active && fase.second_class === 'step-inactive'\">\n              <div class=\"area-index\"><i class=\"far fa-circle\"></i></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"i >= active\">\n              <div class=\"area-index\">{{ i + 1 }}</div>\n            </ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"!useIconCheck\">\n            <div class=\"area-index\">{{ i + 1 }}</div>\n          </ng-container>\n          \n        </div>\n      </td>\n      <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\n        <div class=\"step-line {{ fase.class }}\"></div>        \n      </td>\n    </ng-container>\n  </tr>\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 .area-circle i{font-size:18px}.table-trilha .area-index{font-size:16px;position:relative;top:50%;transform:translateY(-50%)}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:calc(100% + 2px)}table tr{background-color:transparent!important}table th,table td{vertical-align:middle}.circle{display:block;border:1px solid #ccc;height:48px;width:48px;border-radius:50%;text-align:center;font-size:14px}.step-progress{background-color:var(--verde)!important}.icon-step-progress{border-color:var(--verde);background-color:var(--verde)!important}.icon-step-progress .area-index{color:#fff}.icon-step-active{border-color:var(--verde);background-color:var(--verde)!important;color:#fff!important}.step-inactive{background-color:#fbfbfb!important}.step-inactive .area-index{color:#ccc!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { step: [{
                 type: Input
             }], active: [{