@dev-tcloud/tcloud-ui 6.19.0 → 6.19.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -423,12 +423,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
423
423
  }]
424
424
  }], ctorParameters: () => [{ type: I18nService }, { type: i0.ChangeDetectorRef }] });
425
425
 
426
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8 = {
426
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$9 = {
427
427
  provide: NG_VALUE_ACCESSOR,
428
428
  useExisting: forwardRef(() => TCloudUiChoiceIssuesComponent),
429
429
  multi: true
430
430
  };
431
- const noop$8 = () => {
431
+ const noop$9 = () => {
432
432
  };
433
433
  class TCloudUiChoiceIssuesComponent {
434
434
  constructor() {
@@ -440,8 +440,8 @@ class TCloudUiChoiceIssuesComponent {
440
440
  this.innerValue = false;
441
441
  //Placeholders for the callbacks which are later providesd
442
442
  //by the Control Value Accessor
443
- this.onTouchedCallback = noop$8;
444
- this.onChangeCallback = noop$8;
443
+ this.onTouchedCallback = noop$9;
444
+ this.onChangeCallback = noop$9;
445
445
  this.ID = 'tc-issue-' + Math.random().toString(36).substr(2, 9);
446
446
  }
447
447
  //get accessor
@@ -485,11 +485,11 @@ class TCloudUiChoiceIssuesComponent {
485
485
  return '_' + Math.random().toString(36).substr(2, 9);
486
486
  }
487
487
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiChoiceIssuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
488
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiChoiceIssuesComponent, isStandalone: true, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "<div class=\"tcloud-ui-choice-issues box p-2 mt-3 mb-2\">\n <input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\">\n\n <table class=\"choice-area\">\n <tr>\n <td class=\"choice-description\">\n\n <div>\n <p class=\"titulo\">{{ titulo }}</p>\n </div>\n <div class=\"mt-1\">\n <p class=\"sub-titulo\">{{ subTitulo }}</p>\n </div>\n <div class=\"mt-2 mb-1\">\n <ng-content></ng-content>\n </div>\n\n </td>\n <td class=\"choice-action\">\n <table class=\"mt-3 mr-2\" *ngIf=\"!view\">\n <tr>\n <td>\n <div class=\"form-fieldset\">\n <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\"\n [(ngModel)]=\"value\" (click)=\"setV(true)\">{{ 'choiceIssues.yes' | i18nTranslate : 'Sim'}}</label>\n </div>\n </td>\n <td>\n <div class=\"form-fieldset\">\n <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\"\n [(ngModel)]=\"value\" (click)=\"setV(false)\">{{ 'choiceIssues.no' | i18nTranslate : 'N\u00E3o'}}</label>\n </div>\n </td>\n </tr>\n </table>\n\n <table class=\"mt-2 mr-2\" *ngIf=\"view\">\n <tr>\n <td>\n <div class=\"form-fieldset view\">\n <label *ngIf=\"value\" class=\"v-true disabled\">Sim</label>\n <label *ngIf=\"!value\">N\u00E3o</label>\n </div>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n\n\n\n</div>", 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(--tc-primary);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%}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}.choice-description{width:100%}.choice-action{width:100%;max-width:200px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
488
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiChoiceIssuesComponent, isStandalone: true, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$9], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "<div class=\"tcloud-ui-choice-issues box p-2 mt-3 mb-2\">\n <input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\">\n\n <table class=\"choice-area\">\n <tr>\n <td class=\"choice-description\">\n\n <div>\n <p class=\"titulo\">{{ titulo }}</p>\n </div>\n <div class=\"mt-1\">\n <p class=\"sub-titulo\">{{ subTitulo }}</p>\n </div>\n <div class=\"mt-2 mb-1\">\n <ng-content></ng-content>\n </div>\n\n </td>\n <td class=\"choice-action\">\n <table class=\"mt-3 mr-2\" *ngIf=\"!view\">\n <tr>\n <td>\n <div class=\"form-fieldset\">\n <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\"\n [(ngModel)]=\"value\" (click)=\"setV(true)\">{{ 'choiceIssues.yes' | i18nTranslate : 'Sim'}}</label>\n </div>\n </td>\n <td>\n <div class=\"form-fieldset\">\n <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\"\n [(ngModel)]=\"value\" (click)=\"setV(false)\">{{ 'choiceIssues.no' | i18nTranslate : 'N\u00E3o'}}</label>\n </div>\n </td>\n </tr>\n </table>\n\n <table class=\"mt-2 mr-2\" *ngIf=\"view\">\n <tr>\n <td>\n <div class=\"form-fieldset view\">\n <label *ngIf=\"value\" class=\"v-true disabled\">Sim</label>\n <label *ngIf=\"!value\">N\u00E3o</label>\n </div>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n\n\n\n</div>", 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(--tc-primary);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%}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}.choice-description{width:100%}.choice-action{width:100%;max-width:200px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
489
489
  }
490
490
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiChoiceIssuesComponent, decorators: [{
491
491
  type: Component,
492
- args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8], standalone: true, imports: [
492
+ args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$9], standalone: true, imports: [
493
493
  CommonModule,
494
494
  FormsModule,
495
495
  I18nTranslatePipe
@@ -675,12 +675,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
675
675
  }]
676
676
  }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
677
677
 
678
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7 = {
678
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8 = {
679
679
  provide: NG_VALUE_ACCESSOR,
680
680
  useExisting: forwardRef(() => TCloudUiDataListComponent),
681
681
  multi: true
682
682
  };
683
- const noop$7 = () => {
683
+ const noop$8 = () => {
684
684
  };
685
685
  class TCloudUiDataListComponent {
686
686
  set disabled(v) {
@@ -748,8 +748,8 @@ class TCloudUiDataListComponent {
748
748
  this.id = '';
749
749
  //Placeholders for the callbacks which are later providesd
750
750
  //by the Control Value Accessor
751
- this.onTouchedCallback = noop$7;
752
- this.onChangeCallback = noop$7;
751
+ this.onTouchedCallback = noop$8;
752
+ this.onChangeCallback = noop$8;
753
753
  this.subscription_value = this.dataListService.stateValue$.subscribe(v => {
754
754
  this.selected_item = v;
755
755
  this.selectDescription();
@@ -945,14 +945,14 @@ class TCloudUiDataListComponent {
945
945
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDataListComponent, deps: [{ token: DataListService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
946
946
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiDataListComponent, isStandalone: true, selector: "tcloud-ui-data-list", inputs: { placeholder: "placeholder", disabled: "disabled", loading: "loading", showInput: "showInput", search: "search", listItems: "listItems", open: "open", border: "border", ngModel: "ngModel" }, outputs: { onInputChange: "onInputChange", onChange: "onChange", onOpened: "onOpened", onClosed: "onClosed", ngModelChange: "ngModelChange" }, providers: [
947
947
  DataListService,
948
- CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7
948
+ CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8
949
949
  ], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list tc-dropdown\" [class.disabled]=\"disabled || loading\">\n <div *ngIf=\"loading\" class=\"loading-area\">\n <i class=\"fas fa-spinner fa-spin\"></i>\n </div>\n <!-- [attr.data-bs-toggle]=\"'dropdown'\" -->\n <button \n tcloudForm\n #_option\n [class.input-hidden]=\"!showInput\"\n [class.in-border]=\"border\"\n [class.loading-box]=\"loading\"\n [disabled]=\"disabled || loading\"\n class=\"dropdown-toggle button-select no-margin-bottom area-text\" \n type=\"button\" \n id=\"{{ id }}\" \n \n [attr.aria-haspopup]=\"'true'\" \n [attr.aria-expanded]=\"'false'\" \n (click)=\"toOpen();toInput(_option)\" >\n\n <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\n {{ selected_description }}\n <span><i class=\"fas fa-angle-down\"></i></span>\n </button>\n <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\n\n <div class=\"line-search\" *ngIf=\"search\">\n <table class=\"box-search\">\n <tr>\n\n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n\n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n \n <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\n <ng-content></ng-content> \n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <ng-container *ngFor=\"let item of listItems\">\n <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\n </ng-container>\n </ng-container> \n </div>\n </div>\n</div>\n\n<div *ngIf=\"formulario\">\n <form [formGroup]=\"formulario\" style=\"display: none;\" >\n <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\n </form>\n</div>\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.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 input{width:100%}.line-search .box-search td.area-input{border:none}.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}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }, { kind: "directive", type: TCloudUiFormDirective, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
950
950
  }
951
951
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
952
952
  type: Component,
953
953
  args: [{ selector: 'tcloud-ui-data-list', providers: [
954
954
  DataListService,
955
- CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7
955
+ CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8
956
956
  ], imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListOptionComponent, TCloudUiFormDirective], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list tc-dropdown\" [class.disabled]=\"disabled || loading\">\n <div *ngIf=\"loading\" class=\"loading-area\">\n <i class=\"fas fa-spinner fa-spin\"></i>\n </div>\n <!-- [attr.data-bs-toggle]=\"'dropdown'\" -->\n <button \n tcloudForm\n #_option\n [class.input-hidden]=\"!showInput\"\n [class.in-border]=\"border\"\n [class.loading-box]=\"loading\"\n [disabled]=\"disabled || loading\"\n class=\"dropdown-toggle button-select no-margin-bottom area-text\" \n type=\"button\" \n id=\"{{ id }}\" \n \n [attr.aria-haspopup]=\"'true'\" \n [attr.aria-expanded]=\"'false'\" \n (click)=\"toOpen();toInput(_option)\" >\n\n <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\n {{ selected_description }}\n <span><i class=\"fas fa-angle-down\"></i></span>\n </button>\n <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\n\n <div class=\"line-search\" *ngIf=\"search\">\n <table class=\"box-search\">\n <tr>\n\n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n\n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n \n <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\n <ng-content></ng-content> \n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <ng-container *ngFor=\"let item of listItems\">\n <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\n </ng-container>\n </ng-container> \n </div>\n </div>\n</div>\n\n<div *ngIf=\"formulario\">\n <form [formGroup]=\"formulario\" style=\"display: none;\" >\n <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\n </form>\n</div>\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.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 input{width:100%}.line-search .box-search td.area-input{border:none}.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}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"] }]
957
957
  }], ctorParameters: () => [{ type: DataListService }, { type: i2.FormBuilder }], propDecorators: { placeholder: [{
958
958
  type: Input
@@ -1609,12 +1609,12 @@ var translation = {
1609
1609
  weekStart: 0
1610
1610
  }
1611
1611
  };
1612
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6 = {
1612
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7 = {
1613
1613
  provide: NG_VALUE_ACCESSOR,
1614
1614
  useExisting: forwardRef(() => TCloudUiDatepickerComponent),
1615
1615
  multi: true
1616
1616
  };
1617
- const noop$6 = () => {
1617
+ const noop$7 = () => {
1618
1618
  };
1619
1619
  class TCloudUiDatepickerComponent {
1620
1620
  set ngModel(v) {
@@ -1660,8 +1660,8 @@ class TCloudUiDatepickerComponent {
1660
1660
  this.ID = '';
1661
1661
  //Placeholders for the callbacks which are later providesd
1662
1662
  //by the Control Value Accessor
1663
- this.onTouchedCallback = noop$6;
1664
- this.onChangeCallback = noop$6;
1663
+ this.onTouchedCallback = noop$7;
1664
+ this.onChangeCallback = noop$7;
1665
1665
  }
1666
1666
  get layout() {
1667
1667
  return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
@@ -1990,11 +1990,11 @@ class TCloudUiDatepickerComponent {
1990
1990
  this.onTouchedCallback = fn;
1991
1991
  }
1992
1992
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDatepickerComponent, deps: [{ token: DateBRPipe }, { token: TCloudUiLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
1993
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TCloudUiDatepickerComponent, isStandalone: true, selector: "tcloud-ui-datepicker", inputs: { multiple: "multiple", maxNumberOfDates: "maxNumberOfDates", daysOfWeekDisabled: "daysOfWeekDisabled", minDate: "minDate", maxDate: "maxDate", datesDisabled: "datesDisabled", modeInput: "modeInput", useBorder: "useBorder", childInputDateTime: "childInputDateTime", startViewInMinDate: "startViewInMinDate", startViewInMaxDate: "startViewInMaxDate", disabled: "disabled", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange", onCheckDate: "onCheckDate" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6, DateBRPipe], viewQueries: [{ propertyName: "input_datepicker", first: true, predicate: ["input_datepicker"], descendants: true }], ngImport: i0, template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n @if (layout === 'classic') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n </td>\n }\n <td class=\"td-date\">\n <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n </td>\n @if (layout === 'modern') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n </td>\n }\n </tr>\n </table>\n </div>\n</ng-container>\n\n<!-- Inline mode -->\n<ng-container *ngIf=\"!modeInput\">\n <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n</ng-container>\n\n<!-- EX de uso \n <tc-datepicker \n [multiple]=\"false\"\n [daysOfWeekDisabled]=\"[0,6]\"\n [minDate]=\"'18/11/2021'\"\n [maxDate]=\"'18/12/2023'\"\n [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n [modeInput]=\"false\"\n (onChange)=\"($event)\"\n (onCheckDate)=\"onCheckDate($event)\"\n [(ngModel)]=\"dateValue\" >\n </tc-datepicker>\n \n // multiple = false\n // dateValue - string - pode ser: 12/12/2022 \n\n // multiple = true\n // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \n\n <pre>data: {{ dateValue }}</pre>\n-->", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None }); }
1993
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TCloudUiDatepickerComponent, isStandalone: true, selector: "tcloud-ui-datepicker", inputs: { multiple: "multiple", maxNumberOfDates: "maxNumberOfDates", daysOfWeekDisabled: "daysOfWeekDisabled", minDate: "minDate", maxDate: "maxDate", datesDisabled: "datesDisabled", modeInput: "modeInput", useBorder: "useBorder", childInputDateTime: "childInputDateTime", startViewInMinDate: "startViewInMinDate", startViewInMaxDate: "startViewInMaxDate", disabled: "disabled", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange", onCheckDate: "onCheckDate" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7, DateBRPipe], viewQueries: [{ propertyName: "input_datepicker", first: true, predicate: ["input_datepicker"], descendants: true }], ngImport: i0, template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n @if (layout === 'classic') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n </td>\n }\n <td class=\"td-date\">\n <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n </td>\n @if (layout === 'modern') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n </td>\n }\n </tr>\n </table>\n </div>\n</ng-container>\n\n<!-- Inline mode -->\n<ng-container *ngIf=\"!modeInput\">\n <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n</ng-container>\n\n<!-- EX de uso \n <tc-datepicker \n [multiple]=\"false\"\n [daysOfWeekDisabled]=\"[0,6]\"\n [minDate]=\"'18/11/2021'\"\n [maxDate]=\"'18/12/2023'\"\n [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n [modeInput]=\"false\"\n (onChange)=\"($event)\"\n (onCheckDate)=\"onCheckDate($event)\"\n [(ngModel)]=\"dateValue\" >\n </tc-datepicker>\n \n // multiple = false\n // dateValue - string - pode ser: 12/12/2022 \n\n // multiple = true\n // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \n\n <pre>data: {{ dateValue }}</pre>\n-->", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None }); }
1994
1994
  }
1995
1995
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDatepickerComponent, decorators: [{
1996
1996
  type: Component,
1997
- args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6, DateBRPipe], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, DateBRPipe], template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n @if (layout === 'classic') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n </td>\n }\n <td class=\"td-date\">\n <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n </td>\n @if (layout === 'modern') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n </td>\n }\n </tr>\n </table>\n </div>\n</ng-container>\n\n<!-- Inline mode -->\n<ng-container *ngIf=\"!modeInput\">\n <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n</ng-container>\n\n<!-- EX de uso \n <tc-datepicker \n [multiple]=\"false\"\n [daysOfWeekDisabled]=\"[0,6]\"\n [minDate]=\"'18/11/2021'\"\n [maxDate]=\"'18/12/2023'\"\n [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n [modeInput]=\"false\"\n (onChange)=\"($event)\"\n (onCheckDate)=\"onCheckDate($event)\"\n [(ngModel)]=\"dateValue\" >\n </tc-datepicker>\n \n // multiple = false\n // dateValue - string - pode ser: 12/12/2022 \n\n // multiple = true\n // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \n\n <pre>data: {{ dateValue }}</pre>\n-->", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"] }]
1997
+ args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7, DateBRPipe], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, DateBRPipe], template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n @if (layout === 'classic') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n </td>\n }\n <td class=\"td-date\">\n <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n </td>\n @if (layout === 'modern') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n </td>\n }\n </tr>\n </table>\n </div>\n</ng-container>\n\n<!-- Inline mode -->\n<ng-container *ngIf=\"!modeInput\">\n <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n</ng-container>\n\n<!-- EX de uso \n <tc-datepicker \n [multiple]=\"false\"\n [daysOfWeekDisabled]=\"[0,6]\"\n [minDate]=\"'18/11/2021'\"\n [maxDate]=\"'18/12/2023'\"\n [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n [modeInput]=\"false\"\n (onChange)=\"($event)\"\n (onCheckDate)=\"onCheckDate($event)\"\n [(ngModel)]=\"dateValue\" >\n </tc-datepicker>\n \n // multiple = false\n // dateValue - string - pode ser: 12/12/2022 \n\n // multiple = true\n // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \n\n <pre>data: {{ dateValue }}</pre>\n-->", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"] }]
1998
1998
  }], ctorParameters: () => [{ type: DateBRPipe }, { type: TCloudUiLayoutService }], propDecorators: { multiple: [{
1999
1999
  type: Input
2000
2000
  }], maxNumberOfDates: [{
@@ -2034,12 +2034,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
2034
2034
  type: Input
2035
2035
  }] } });
2036
2036
 
2037
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5 = {
2037
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6 = {
2038
2038
  provide: NG_VALUE_ACCESSOR,
2039
2039
  useExisting: forwardRef(() => TCloudUiDatepickerTimeComponent),
2040
2040
  multi: true
2041
2041
  };
2042
- const noop$5 = () => {
2042
+ const noop$6 = () => {
2043
2043
  };
2044
2044
  class TCloudUiDatepickerTimeComponent {
2045
2045
  constructor() {
@@ -2062,8 +2062,8 @@ class TCloudUiDatepickerTimeComponent {
2062
2062
  this.value_options_date_time = '';
2063
2063
  //Placeholders for the callbacks which are later providesd
2064
2064
  //by the Control Value Accessor
2065
- this.onTouchedCallback = noop$5;
2066
- this.onChangeCallback = noop$5;
2065
+ this.onTouchedCallback = noop$6;
2066
+ this.onChangeCallback = noop$6;
2067
2067
  }
2068
2068
  set ngModel(v) {
2069
2069
  if (v && v !== this.innerValue) {
@@ -2323,11 +2323,11 @@ class TCloudUiDatepickerTimeComponent {
2323
2323
  this.onTouchedCallback = fn;
2324
2324
  }
2325
2325
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDatepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2326
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiDatepickerTimeComponent, isStandalone: true, selector: "tcloud-ui-datepicker-time", inputs: { ngModel: "ngModel", minDate: "minDate", maxDate: "maxDate", useOptionsDateTime: "useOptionsDateTime" }, outputs: { ngModelChange: "ngModelChange", onChange: "onChange", eventChange: "eventChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5], viewQueries: [{ propertyName: "datepickertime", first: true, predicate: ["_datepickertime"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-datepicker-time\">\n <input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\n <form #_formulario=\"ngForm\">\n <div class=\"input-control-time\">\n <div class=\"form-control-time\">\n\n <table style=\"width: 100%;\">\n <tr>\n <td>\n\n <div class=\"input-options-date\">\n <table class=\"form-time\">\n <tr>\n <!-- <td class=\"area-icon\"><div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div></td> -->\n <td class=\"area-input-date\">\n <ng-container *ngIf=\"show_date_picker\">\n <tcloud-ui-datepicker [minDate]=\"minDate\" [maxDate]=\"maxDate\" #_tclouddatepickertime [childInputDateTime]=\"true\" [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker>\n </ng-container>\n </td>\n \n <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\n <td class=\"area-input-hour\">\n <!--<input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\">-->\n <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"HH\" name=\"hh\">\n <ng-container *ngFor=\"let hh of option_HH\">\n <option [ngValue]=\"hh\">{{ hh }}</option>\n </ng-container>\n </select>\n </td>\n <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\n <td class=\"area-input-minute\">\n <!--<input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\">-->\n <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"MM\" name=\"mm\">\n <ng-container *ngFor=\"let mm of option_MM\">\n <option [value]=\"mm\">{{ mm }}</option>\n </ng-container>\n </select>\n </td>\n <td class=\"area-clean\"></td>\n </tr>\n </table>\n\n <div class=\"description-options-date\" *ngIf=\"value_options_date_time !== ''\">\n <strong>{{ description_options_date_time }}</strong>\n\n <!-- <div class=\"area-action-date-time-selected\">\n <button class=\"btn-icon\" type=\"button\" (click)=\"closedTimeDescription()\" >\n <i class=\"fas fa-times\"></i>\n </button> \n </div> -->\n </div>\n\n\n </div>\n\n </td>\n <td *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0\" style=\"width: 20px\">\n <button type=\"button\" class=\"icon-short-time\" (click)=\"open_options_date_time = !open_options_date_time\" [title]=\"description_options_date_time\" >\n <i *ngIf=\"!open_options_date_time\" class=\"fas fa-caret-down\"></i>\n <i *ngIf=\"open_options_date_time\" class=\"fas fa-caret-up\"></i>\n </button>\n\n <ng-container *ngIf=\"value_options_date_time !== ''\">\n <button class=\"btn-icon-close\" type=\"button\" (click)=\"closedTimeDescription()\" >\n <i class=\"fas fa-times\"></i>\n </button> \n </ng-container>\n\n </td>\n </tr>\n <tr *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0 && open_options_date_time\">\n <td colspan=\"2\">\n <tcloud-ui-data-list \n name=\"value_options_date_time\"\n [showInput]=\"false\" \n [search]=\"false\" \n [open]=\"true\" \n [listItems]=\"options_date_time\" \n (onClosed)=\"onClosedOptionsDateTime()\"\n [ngModel]=\"value_options_date_time\"\n (ngModelChange)=\"onChangeOptionsDateTime($event)\"\n >\n </tcloud-ui-data-list>\n\n \n\n\n \n </td>\n </tr>\n </table>\n\n \n </div>\n </div>\n </form>\n</div>", styles: ["@charset \"UTF-8\";.input-control-time{background-color:#fff;border:1px solid #ccc;border-radius:3px;width:100%;height:40px}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.form-time td:first-child{overflow:hidden}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:100px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:12px}input,.datepicker-input{border:none!important}.select-time-date{border:none;background-color:transparent;width:40px;height:35px;padding:0;text-align:center;font-size:13px;color:#777;position:relative;top:-2px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.select-time-date:focus{box-shadow:0 0;border:0 none;outline:0}.btn-icon-close{border:none;background-color:#fff;cursor:pointer;padding:0;color:#aaa;width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:#c43a3a!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:#8a8a8a}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:#fff;width:100%;height:34px;overflow:hidden}.input-options-date .description-options-date strong{font-size:14px;font-weight:400;padding-left:5px}.input-options-date .area-action-date-time-selected{width:20px;display:block;float:right;text-align:right;position:relative;top:-2px;left:30px;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "startViewInMinDate", "startViewInMaxDate", "disabled", "ngModel", "code"], outputs: ["onChange", "ngModelChange", "onCheckDate"] }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }] }); }
2326
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiDatepickerTimeComponent, isStandalone: true, selector: "tcloud-ui-datepicker-time", inputs: { ngModel: "ngModel", minDate: "minDate", maxDate: "maxDate", useOptionsDateTime: "useOptionsDateTime" }, outputs: { ngModelChange: "ngModelChange", onChange: "onChange", eventChange: "eventChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6], viewQueries: [{ propertyName: "datepickertime", first: true, predicate: ["_datepickertime"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-datepicker-time\">\n <input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\n <form #_formulario=\"ngForm\">\n <div class=\"input-control-time\">\n <div class=\"form-control-time\">\n\n <table style=\"width: 100%;\">\n <tr>\n <td>\n\n <div class=\"input-options-date\">\n <table class=\"form-time\">\n <tr>\n <!-- <td class=\"area-icon\"><div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div></td> -->\n <td class=\"area-input-date\">\n <ng-container *ngIf=\"show_date_picker\">\n <tcloud-ui-datepicker [minDate]=\"minDate\" [maxDate]=\"maxDate\" #_tclouddatepickertime [childInputDateTime]=\"true\" [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker>\n </ng-container>\n </td>\n \n <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\n <td class=\"area-input-hour\">\n <!--<input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\">-->\n <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"HH\" name=\"hh\">\n <ng-container *ngFor=\"let hh of option_HH\">\n <option [ngValue]=\"hh\">{{ hh }}</option>\n </ng-container>\n </select>\n </td>\n <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\n <td class=\"area-input-minute\">\n <!--<input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\">-->\n <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"MM\" name=\"mm\">\n <ng-container *ngFor=\"let mm of option_MM\">\n <option [value]=\"mm\">{{ mm }}</option>\n </ng-container>\n </select>\n </td>\n <td class=\"area-clean\"></td>\n </tr>\n </table>\n\n <div class=\"description-options-date\" *ngIf=\"value_options_date_time !== ''\">\n <strong>{{ description_options_date_time }}</strong>\n\n <!-- <div class=\"area-action-date-time-selected\">\n <button class=\"btn-icon\" type=\"button\" (click)=\"closedTimeDescription()\" >\n <i class=\"fas fa-times\"></i>\n </button> \n </div> -->\n </div>\n\n\n </div>\n\n </td>\n <td *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0\" style=\"width: 20px\">\n <button type=\"button\" class=\"icon-short-time\" (click)=\"open_options_date_time = !open_options_date_time\" [title]=\"description_options_date_time\" >\n <i *ngIf=\"!open_options_date_time\" class=\"fas fa-caret-down\"></i>\n <i *ngIf=\"open_options_date_time\" class=\"fas fa-caret-up\"></i>\n </button>\n\n <ng-container *ngIf=\"value_options_date_time !== ''\">\n <button class=\"btn-icon-close\" type=\"button\" (click)=\"closedTimeDescription()\" >\n <i class=\"fas fa-times\"></i>\n </button> \n </ng-container>\n\n </td>\n </tr>\n <tr *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0 && open_options_date_time\">\n <td colspan=\"2\">\n <tcloud-ui-data-list \n name=\"value_options_date_time\"\n [showInput]=\"false\" \n [search]=\"false\" \n [open]=\"true\" \n [listItems]=\"options_date_time\" \n (onClosed)=\"onClosedOptionsDateTime()\"\n [ngModel]=\"value_options_date_time\"\n (ngModelChange)=\"onChangeOptionsDateTime($event)\"\n >\n </tcloud-ui-data-list>\n\n \n\n\n \n </td>\n </tr>\n </table>\n\n \n </div>\n </div>\n </form>\n</div>", styles: ["@charset \"UTF-8\";.input-control-time{background-color:#fff;border:1px solid #ccc;border-radius:3px;width:100%;height:40px}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.form-time td:first-child{overflow:hidden}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:100px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:12px}input,.datepicker-input{border:none!important}.select-time-date{border:none;background-color:transparent;width:40px;height:35px;padding:0;text-align:center;font-size:13px;color:#777;position:relative;top:-2px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.select-time-date:focus{box-shadow:0 0;border:0 none;outline:0}.btn-icon-close{border:none;background-color:#fff;cursor:pointer;padding:0;color:#aaa;width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:#c43a3a!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:#8a8a8a}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:#fff;width:100%;height:34px;overflow:hidden}.input-options-date .description-options-date strong{font-size:14px;font-weight:400;padding-left:5px}.input-options-date .area-action-date-time-selected{width:20px;display:block;float:right;text-align:right;position:relative;top:-2px;left:30px;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "startViewInMinDate", "startViewInMaxDate", "disabled", "ngModel", "code"], outputs: ["onChange", "ngModelChange", "onCheckDate"] }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }] }); }
2327
2327
  }
2328
2328
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDatepickerTimeComponent, decorators: [{
2329
2329
  type: Component,
2330
- args: [{ selector: 'tcloud-ui-datepicker-time', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5], standalone: true, imports: [CommonModule, FormsModule, TCloudUiDatepickerComponent, TCloudUiDataListComponent], template: "<div class=\"tcloud-ui-datepicker-time\">\n <input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\n <form #_formulario=\"ngForm\">\n <div class=\"input-control-time\">\n <div class=\"form-control-time\">\n\n <table style=\"width: 100%;\">\n <tr>\n <td>\n\n <div class=\"input-options-date\">\n <table class=\"form-time\">\n <tr>\n <!-- <td class=\"area-icon\"><div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div></td> -->\n <td class=\"area-input-date\">\n <ng-container *ngIf=\"show_date_picker\">\n <tcloud-ui-datepicker [minDate]=\"minDate\" [maxDate]=\"maxDate\" #_tclouddatepickertime [childInputDateTime]=\"true\" [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker>\n </ng-container>\n </td>\n \n <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\n <td class=\"area-input-hour\">\n <!--<input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\">-->\n <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"HH\" name=\"hh\">\n <ng-container *ngFor=\"let hh of option_HH\">\n <option [ngValue]=\"hh\">{{ hh }}</option>\n </ng-container>\n </select>\n </td>\n <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\n <td class=\"area-input-minute\">\n <!--<input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\">-->\n <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"MM\" name=\"mm\">\n <ng-container *ngFor=\"let mm of option_MM\">\n <option [value]=\"mm\">{{ mm }}</option>\n </ng-container>\n </select>\n </td>\n <td class=\"area-clean\"></td>\n </tr>\n </table>\n\n <div class=\"description-options-date\" *ngIf=\"value_options_date_time !== ''\">\n <strong>{{ description_options_date_time }}</strong>\n\n <!-- <div class=\"area-action-date-time-selected\">\n <button class=\"btn-icon\" type=\"button\" (click)=\"closedTimeDescription()\" >\n <i class=\"fas fa-times\"></i>\n </button> \n </div> -->\n </div>\n\n\n </div>\n\n </td>\n <td *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0\" style=\"width: 20px\">\n <button type=\"button\" class=\"icon-short-time\" (click)=\"open_options_date_time = !open_options_date_time\" [title]=\"description_options_date_time\" >\n <i *ngIf=\"!open_options_date_time\" class=\"fas fa-caret-down\"></i>\n <i *ngIf=\"open_options_date_time\" class=\"fas fa-caret-up\"></i>\n </button>\n\n <ng-container *ngIf=\"value_options_date_time !== ''\">\n <button class=\"btn-icon-close\" type=\"button\" (click)=\"closedTimeDescription()\" >\n <i class=\"fas fa-times\"></i>\n </button> \n </ng-container>\n\n </td>\n </tr>\n <tr *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0 && open_options_date_time\">\n <td colspan=\"2\">\n <tcloud-ui-data-list \n name=\"value_options_date_time\"\n [showInput]=\"false\" \n [search]=\"false\" \n [open]=\"true\" \n [listItems]=\"options_date_time\" \n (onClosed)=\"onClosedOptionsDateTime()\"\n [ngModel]=\"value_options_date_time\"\n (ngModelChange)=\"onChangeOptionsDateTime($event)\"\n >\n </tcloud-ui-data-list>\n\n \n\n\n \n </td>\n </tr>\n </table>\n\n \n </div>\n </div>\n </form>\n</div>", styles: ["@charset \"UTF-8\";.input-control-time{background-color:#fff;border:1px solid #ccc;border-radius:3px;width:100%;height:40px}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.form-time td:first-child{overflow:hidden}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:100px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:12px}input,.datepicker-input{border:none!important}.select-time-date{border:none;background-color:transparent;width:40px;height:35px;padding:0;text-align:center;font-size:13px;color:#777;position:relative;top:-2px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.select-time-date:focus{box-shadow:0 0;border:0 none;outline:0}.btn-icon-close{border:none;background-color:#fff;cursor:pointer;padding:0;color:#aaa;width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:#c43a3a!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:#8a8a8a}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:#fff;width:100%;height:34px;overflow:hidden}.input-options-date .description-options-date strong{font-size:14px;font-weight:400;padding-left:5px}.input-options-date .area-action-date-time-selected{width:20px;display:block;float:right;text-align:right;position:relative;top:-2px;left:30px;z-index:1}\n"] }]
2330
+ args: [{ selector: 'tcloud-ui-datepicker-time', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6], standalone: true, imports: [CommonModule, FormsModule, TCloudUiDatepickerComponent, TCloudUiDataListComponent], template: "<div class=\"tcloud-ui-datepicker-time\">\n <input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\n <form #_formulario=\"ngForm\">\n <div class=\"input-control-time\">\n <div class=\"form-control-time\">\n\n <table style=\"width: 100%;\">\n <tr>\n <td>\n\n <div class=\"input-options-date\">\n <table class=\"form-time\">\n <tr>\n <!-- <td class=\"area-icon\"><div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div></td> -->\n <td class=\"area-input-date\">\n <ng-container *ngIf=\"show_date_picker\">\n <tcloud-ui-datepicker [minDate]=\"minDate\" [maxDate]=\"maxDate\" #_tclouddatepickertime [childInputDateTime]=\"true\" [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker>\n </ng-container>\n </td>\n \n <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\n <td class=\"area-input-hour\">\n <!--<input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\">-->\n <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"HH\" name=\"hh\">\n <ng-container *ngFor=\"let hh of option_HH\">\n <option [ngValue]=\"hh\">{{ hh }}</option>\n </ng-container>\n </select>\n </td>\n <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\n <td class=\"area-input-minute\">\n <!--<input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\">-->\n <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"MM\" name=\"mm\">\n <ng-container *ngFor=\"let mm of option_MM\">\n <option [value]=\"mm\">{{ mm }}</option>\n </ng-container>\n </select>\n </td>\n <td class=\"area-clean\"></td>\n </tr>\n </table>\n\n <div class=\"description-options-date\" *ngIf=\"value_options_date_time !== ''\">\n <strong>{{ description_options_date_time }}</strong>\n\n <!-- <div class=\"area-action-date-time-selected\">\n <button class=\"btn-icon\" type=\"button\" (click)=\"closedTimeDescription()\" >\n <i class=\"fas fa-times\"></i>\n </button> \n </div> -->\n </div>\n\n\n </div>\n\n </td>\n <td *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0\" style=\"width: 20px\">\n <button type=\"button\" class=\"icon-short-time\" (click)=\"open_options_date_time = !open_options_date_time\" [title]=\"description_options_date_time\" >\n <i *ngIf=\"!open_options_date_time\" class=\"fas fa-caret-down\"></i>\n <i *ngIf=\"open_options_date_time\" class=\"fas fa-caret-up\"></i>\n </button>\n\n <ng-container *ngIf=\"value_options_date_time !== ''\">\n <button class=\"btn-icon-close\" type=\"button\" (click)=\"closedTimeDescription()\" >\n <i class=\"fas fa-times\"></i>\n </button> \n </ng-container>\n\n </td>\n </tr>\n <tr *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0 && open_options_date_time\">\n <td colspan=\"2\">\n <tcloud-ui-data-list \n name=\"value_options_date_time\"\n [showInput]=\"false\" \n [search]=\"false\" \n [open]=\"true\" \n [listItems]=\"options_date_time\" \n (onClosed)=\"onClosedOptionsDateTime()\"\n [ngModel]=\"value_options_date_time\"\n (ngModelChange)=\"onChangeOptionsDateTime($event)\"\n >\n </tcloud-ui-data-list>\n\n \n\n\n \n </td>\n </tr>\n </table>\n\n \n </div>\n </div>\n </form>\n</div>", styles: ["@charset \"UTF-8\";.input-control-time{background-color:#fff;border:1px solid #ccc;border-radius:3px;width:100%;height:40px}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.form-time td:first-child{overflow:hidden}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:100px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:12px}input,.datepicker-input{border:none!important}.select-time-date{border:none;background-color:transparent;width:40px;height:35px;padding:0;text-align:center;font-size:13px;color:#777;position:relative;top:-2px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.select-time-date:focus{box-shadow:0 0;border:0 none;outline:0}.btn-icon-close{border:none;background-color:#fff;cursor:pointer;padding:0;color:#aaa;width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:#c43a3a!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:#8a8a8a}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:#fff;width:100%;height:34px;overflow:hidden}.input-options-date .description-options-date strong{font-size:14px;font-weight:400;padding-left:5px}.input-options-date .area-action-date-time-selected{width:20px;display:block;float:right;text-align:right;position:relative;top:-2px;left:30px;z-index:1}\n"] }]
2331
2331
  }], propDecorators: { ngModel: [{
2332
2332
  type: Input
2333
2333
  }], ngModelChange: [{
@@ -2374,12 +2374,12 @@ const CUSTOM_INPUT_VALIDATORS$3 = {
2374
2374
  useExisting: forwardRef(() => TCloudUiRangeDateComponent),
2375
2375
  multi: true
2376
2376
  };
2377
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4 = {
2377
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5 = {
2378
2378
  provide: NG_VALUE_ACCESSOR,
2379
2379
  useExisting: forwardRef(() => TCloudUiRangeDateComponent),
2380
2380
  multi: true
2381
2381
  };
2382
- const noop$4 = () => {
2382
+ const noop$5 = () => {
2383
2383
  };
2384
2384
  class TCloudUiRangeDateComponent {
2385
2385
  constructor() {
@@ -2394,8 +2394,8 @@ class TCloudUiRangeDateComponent {
2394
2394
  this.isValid = false;
2395
2395
  //Placeholders for the callbacks which are later providesd
2396
2396
  //by the Control Value Accessor
2397
- this.onTouchedCallback = noop$4;
2398
- this.onChangeCallback = noop$4;
2397
+ this.onTouchedCallback = noop$5;
2398
+ this.onChangeCallback = noop$5;
2399
2399
  }
2400
2400
  ngOnInit() {
2401
2401
  this.setOptionsDateTime();
@@ -2559,11 +2559,11 @@ class TCloudUiRangeDateComponent {
2559
2559
  return false;
2560
2560
  }
2561
2561
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiRangeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2562
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiRangeDateComponent, isStandalone: true, selector: "tcloud-ui-range-date", inputs: { defaultValuePeriodStartStop: "defaultValuePeriodStartStop", required: "required", descriptionStart: "descriptionStart", descriptionStop: "descriptionStop" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4, CUSTOM_INPUT_VALIDATORS$3], ngImport: i0, template: "<table class=\"tcloud-ui-filters-range-date area-range-date\">\n <tr>\n\n <td>\n <div *ngIf=\"mode === 'select'\">\n <div class=\"description-period\">Per\u00EDodo</div>\n <select name=\"periodo\" class=\"tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\" >\n <option value=\"\"></option> \n <ng-container *ngFor=\"let item of options_date_time\">\n <option [value]=\"item.value\">{{ item.description }}</option>\n </ng-container>\n </select>\n </div>\n <div *ngIf=\"mode === 'datepickers'\">\n\n <table class=\"area-range-datepickers\">\n <tr>\n <td>\n <div class=\"description-start\">{{ descriptionStart }}</div>\n <tcloud-ui-datepicker-time \n #_input_start \n [(ngModel)]=\"result.start\" \n name=\"input_start\" \n (eventChange)=\"onChangeStartDateTime(_input_start)\">\n </tcloud-ui-datepicker-time>\n </td>\n <td>\n <div class=\"description-stop\">{{ descriptionStop }}</div>\n <tcloud-ui-datepicker-time \n #_input_stop\n [(ngModel)]=\"result.stop\" \n name=\"input_stop\" \n (eventChange)=\"onChangeStopDateTime(_input_stop)\">\n </tcloud-ui-datepicker-time>\n </td>\n </tr>\n </table>\n\n </div>\n </td>\n\n <td>\n <button class=\"btn-mode-range-date\" [class.active]=\"mode === 'select'\" (click)=\"toggle()\" type=\"button\">\n\n <i *ngIf=\"mode === 'select'\" class=\"far fa-calendar-alt\" title=\"Alterar para calend\u00E1rio\"></i>\n <i *ngIf=\"mode !== 'select'\" class=\"fas fa-calendar-week\" title=\"Selecionar per\u00EDodo\"></i>\n\n <!-- <div *ngIf=\"mode === 'select'\">Exibir<br>Calend\u00E1rio</div> -->\n <!-- <div *ngIf=\"mode !== 'select'\">Exibir<br>Per\u00EDodo</div> -->\n </button>\n </td>\n\n </tr>\n</table>", styles: [".area-range-date{height:40px;width:100%}.area-range-date tr td:first-child{width:calc(100% - 35px)}.area-range-date tr td:first-child select{color:#535353;border-radius:3px 0 0 3px!important}.area-range-date tr td:first-child .area-range-datepickers{width:100%}.area-range-date tr td:first-child .area-range-datepickers td{width:50%!important}.area-range-date tr td:last-child{width:35px}.area-range-date tr td:last-child .btn-mode-range-date{width:100%;text-align:center;border:1px solid #ccc;background-color:#fff;font-size:17px;line-height:1;cursor:pointer;color:#6c6c6c;height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:#403d3d}.active{background-color:#eee!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "minDate", "maxDate", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }] }); }
2562
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiRangeDateComponent, isStandalone: true, selector: "tcloud-ui-range-date", inputs: { defaultValuePeriodStartStop: "defaultValuePeriodStartStop", required: "required", descriptionStart: "descriptionStart", descriptionStop: "descriptionStop" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$3], ngImport: i0, template: "<table class=\"tcloud-ui-filters-range-date area-range-date\">\n <tr>\n\n <td>\n <div *ngIf=\"mode === 'select'\">\n <div class=\"description-period\">Per\u00EDodo</div>\n <select name=\"periodo\" class=\"tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\" >\n <option value=\"\"></option> \n <ng-container *ngFor=\"let item of options_date_time\">\n <option [value]=\"item.value\">{{ item.description }}</option>\n </ng-container>\n </select>\n </div>\n <div *ngIf=\"mode === 'datepickers'\">\n\n <table class=\"area-range-datepickers\">\n <tr>\n <td>\n <div class=\"description-start\">{{ descriptionStart }}</div>\n <tcloud-ui-datepicker-time \n #_input_start \n [(ngModel)]=\"result.start\" \n name=\"input_start\" \n (eventChange)=\"onChangeStartDateTime(_input_start)\">\n </tcloud-ui-datepicker-time>\n </td>\n <td>\n <div class=\"description-stop\">{{ descriptionStop }}</div>\n <tcloud-ui-datepicker-time \n #_input_stop\n [(ngModel)]=\"result.stop\" \n name=\"input_stop\" \n (eventChange)=\"onChangeStopDateTime(_input_stop)\">\n </tcloud-ui-datepicker-time>\n </td>\n </tr>\n </table>\n\n </div>\n </td>\n\n <td>\n <button class=\"btn-mode-range-date\" [class.active]=\"mode === 'select'\" (click)=\"toggle()\" type=\"button\">\n\n <i *ngIf=\"mode === 'select'\" class=\"far fa-calendar-alt\" title=\"Alterar para calend\u00E1rio\"></i>\n <i *ngIf=\"mode !== 'select'\" class=\"fas fa-calendar-week\" title=\"Selecionar per\u00EDodo\"></i>\n\n <!-- <div *ngIf=\"mode === 'select'\">Exibir<br>Calend\u00E1rio</div> -->\n <!-- <div *ngIf=\"mode !== 'select'\">Exibir<br>Per\u00EDodo</div> -->\n </button>\n </td>\n\n </tr>\n</table>", styles: [".area-range-date{height:40px;width:100%}.area-range-date tr td:first-child{width:calc(100% - 35px)}.area-range-date tr td:first-child select{color:#535353;border-radius:3px 0 0 3px!important}.area-range-date tr td:first-child .area-range-datepickers{width:100%}.area-range-date tr td:first-child .area-range-datepickers td{width:50%!important}.area-range-date tr td:last-child{width:35px}.area-range-date tr td:last-child .btn-mode-range-date{width:100%;text-align:center;border:1px solid #ccc;background-color:#fff;font-size:17px;line-height:1;cursor:pointer;color:#6c6c6c;height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:#403d3d}.active{background-color:#eee!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "minDate", "maxDate", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }] }); }
2563
2563
  }
2564
2564
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiRangeDateComponent, decorators: [{
2565
2565
  type: Component,
2566
- args: [{ selector: 'tcloud-ui-range-date', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4, CUSTOM_INPUT_VALIDATORS$3], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent], template: "<table class=\"tcloud-ui-filters-range-date area-range-date\">\n <tr>\n\n <td>\n <div *ngIf=\"mode === 'select'\">\n <div class=\"description-period\">Per\u00EDodo</div>\n <select name=\"periodo\" class=\"tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\" >\n <option value=\"\"></option> \n <ng-container *ngFor=\"let item of options_date_time\">\n <option [value]=\"item.value\">{{ item.description }}</option>\n </ng-container>\n </select>\n </div>\n <div *ngIf=\"mode === 'datepickers'\">\n\n <table class=\"area-range-datepickers\">\n <tr>\n <td>\n <div class=\"description-start\">{{ descriptionStart }}</div>\n <tcloud-ui-datepicker-time \n #_input_start \n [(ngModel)]=\"result.start\" \n name=\"input_start\" \n (eventChange)=\"onChangeStartDateTime(_input_start)\">\n </tcloud-ui-datepicker-time>\n </td>\n <td>\n <div class=\"description-stop\">{{ descriptionStop }}</div>\n <tcloud-ui-datepicker-time \n #_input_stop\n [(ngModel)]=\"result.stop\" \n name=\"input_stop\" \n (eventChange)=\"onChangeStopDateTime(_input_stop)\">\n </tcloud-ui-datepicker-time>\n </td>\n </tr>\n </table>\n\n </div>\n </td>\n\n <td>\n <button class=\"btn-mode-range-date\" [class.active]=\"mode === 'select'\" (click)=\"toggle()\" type=\"button\">\n\n <i *ngIf=\"mode === 'select'\" class=\"far fa-calendar-alt\" title=\"Alterar para calend\u00E1rio\"></i>\n <i *ngIf=\"mode !== 'select'\" class=\"fas fa-calendar-week\" title=\"Selecionar per\u00EDodo\"></i>\n\n <!-- <div *ngIf=\"mode === 'select'\">Exibir<br>Calend\u00E1rio</div> -->\n <!-- <div *ngIf=\"mode !== 'select'\">Exibir<br>Per\u00EDodo</div> -->\n </button>\n </td>\n\n </tr>\n</table>", styles: [".area-range-date{height:40px;width:100%}.area-range-date tr td:first-child{width:calc(100% - 35px)}.area-range-date tr td:first-child select{color:#535353;border-radius:3px 0 0 3px!important}.area-range-date tr td:first-child .area-range-datepickers{width:100%}.area-range-date tr td:first-child .area-range-datepickers td{width:50%!important}.area-range-date tr td:last-child{width:35px}.area-range-date tr td:last-child .btn-mode-range-date{width:100%;text-align:center;border:1px solid #ccc;background-color:#fff;font-size:17px;line-height:1;cursor:pointer;color:#6c6c6c;height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:#403d3d}.active{background-color:#eee!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\n"] }]
2566
+ args: [{ selector: 'tcloud-ui-range-date', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$3], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent], template: "<table class=\"tcloud-ui-filters-range-date area-range-date\">\n <tr>\n\n <td>\n <div *ngIf=\"mode === 'select'\">\n <div class=\"description-period\">Per\u00EDodo</div>\n <select name=\"periodo\" class=\"tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\" >\n <option value=\"\"></option> \n <ng-container *ngFor=\"let item of options_date_time\">\n <option [value]=\"item.value\">{{ item.description }}</option>\n </ng-container>\n </select>\n </div>\n <div *ngIf=\"mode === 'datepickers'\">\n\n <table class=\"area-range-datepickers\">\n <tr>\n <td>\n <div class=\"description-start\">{{ descriptionStart }}</div>\n <tcloud-ui-datepicker-time \n #_input_start \n [(ngModel)]=\"result.start\" \n name=\"input_start\" \n (eventChange)=\"onChangeStartDateTime(_input_start)\">\n </tcloud-ui-datepicker-time>\n </td>\n <td>\n <div class=\"description-stop\">{{ descriptionStop }}</div>\n <tcloud-ui-datepicker-time \n #_input_stop\n [(ngModel)]=\"result.stop\" \n name=\"input_stop\" \n (eventChange)=\"onChangeStopDateTime(_input_stop)\">\n </tcloud-ui-datepicker-time>\n </td>\n </tr>\n </table>\n\n </div>\n </td>\n\n <td>\n <button class=\"btn-mode-range-date\" [class.active]=\"mode === 'select'\" (click)=\"toggle()\" type=\"button\">\n\n <i *ngIf=\"mode === 'select'\" class=\"far fa-calendar-alt\" title=\"Alterar para calend\u00E1rio\"></i>\n <i *ngIf=\"mode !== 'select'\" class=\"fas fa-calendar-week\" title=\"Selecionar per\u00EDodo\"></i>\n\n <!-- <div *ngIf=\"mode === 'select'\">Exibir<br>Calend\u00E1rio</div> -->\n <!-- <div *ngIf=\"mode !== 'select'\">Exibir<br>Per\u00EDodo</div> -->\n </button>\n </td>\n\n </tr>\n</table>", styles: [".area-range-date{height:40px;width:100%}.area-range-date tr td:first-child{width:calc(100% - 35px)}.area-range-date tr td:first-child select{color:#535353;border-radius:3px 0 0 3px!important}.area-range-date tr td:first-child .area-range-datepickers{width:100%}.area-range-date tr td:first-child .area-range-datepickers td{width:50%!important}.area-range-date tr td:last-child{width:35px}.area-range-date tr td:last-child .btn-mode-range-date{width:100%;text-align:center;border:1px solid #ccc;background-color:#fff;font-size:17px;line-height:1;cursor:pointer;color:#6c6c6c;height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:#403d3d}.active{background-color:#eee!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\n"] }]
2567
2567
  }], ctorParameters: () => [], propDecorators: { onChange: [{
2568
2568
  type: Output
2569
2569
  }], defaultValuePeriodStartStop: [{
@@ -3974,12 +3974,12 @@ const CUSTOM_INPUT_VALIDATORS$2 = {
3974
3974
  useExisting: forwardRef(() => TCloudUiMultiInputComponent),
3975
3975
  multi: true
3976
3976
  };
3977
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3 = {
3977
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4 = {
3978
3978
  provide: NG_VALUE_ACCESSOR,
3979
3979
  useExisting: forwardRef(() => TCloudUiMultiInputComponent),
3980
3980
  multi: true
3981
3981
  };
3982
- const noop$3 = () => {
3982
+ const noop$4 = () => {
3983
3983
  };
3984
3984
  class TCloudUiMultiInputComponent {
3985
3985
  constructor() {
@@ -3993,8 +3993,8 @@ class TCloudUiMultiInputComponent {
3993
3993
  this.onChange = new EventEmitter();
3994
3994
  //Placeholders for the callbacks which are later providesd
3995
3995
  //by the Control Value Accessor
3996
- this.onTouchedCallback = noop$3;
3997
- this.onChangeCallback = noop$3;
3996
+ this.onTouchedCallback = noop$4;
3997
+ this.onChangeCallback = noop$4;
3998
3998
  }
3999
3999
  ngOnInit() {
4000
4000
  setTimeout(() => {
@@ -4094,11 +4094,11 @@ class TCloudUiMultiInputComponent {
4094
4094
  ngOnDestroy() {
4095
4095
  }
4096
4096
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4097
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiMultiInputComponent, isStandalone: true, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", maxWidthLabel: "maxWidthLabel", showInput: "showInput" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$2], ngImport: i0, template: "<div class=\"tcloud-ui-multi-input\">\n\n <table *ngIf=\"!showInput\">\n <tr>\n <td>\n <input\n class=\"tc-form-control\"\n (blur)=\"onChangeTouched()\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n type=\"text\"\n [(ngModel)]=\"input_value\"\n [disabled]=\"disabled || loading\"\n name=\"input_value\"\n [placeholder]=\"placeholder\">\n </td>\n\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\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
4097
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiMultiInputComponent, isStandalone: true, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", maxWidthLabel: "maxWidthLabel", showInput: "showInput" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4, CUSTOM_INPUT_VALIDATORS$2], ngImport: i0, template: "<div class=\"tcloud-ui-multi-input\">\n\n <table *ngIf=\"!showInput\">\n <tr>\n <td>\n <input\n class=\"tc-form-control\"\n (blur)=\"onChangeTouched()\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n type=\"text\"\n [(ngModel)]=\"input_value\"\n [disabled]=\"disabled || loading\"\n name=\"input_value\"\n [placeholder]=\"placeholder\">\n </td>\n\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\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
4098
4098
  }
4099
4099
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
4100
4100
  type: Component,
4101
- args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$2], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"tcloud-ui-multi-input\">\n\n <table *ngIf=\"!showInput\">\n <tr>\n <td>\n <input\n class=\"tc-form-control\"\n (blur)=\"onChangeTouched()\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n type=\"text\"\n [(ngModel)]=\"input_value\"\n [disabled]=\"disabled || loading\"\n name=\"input_value\"\n [placeholder]=\"placeholder\">\n </td>\n\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\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"] }]
4101
+ args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4, CUSTOM_INPUT_VALIDATORS$2], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"tcloud-ui-multi-input\">\n\n <table *ngIf=\"!showInput\">\n <tr>\n <td>\n <input\n class=\"tc-form-control\"\n (blur)=\"onChangeTouched()\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n type=\"text\"\n [(ngModel)]=\"input_value\"\n [disabled]=\"disabled || loading\"\n name=\"input_value\"\n [placeholder]=\"placeholder\">\n </td>\n\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\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"] }]
4102
4102
  }], ctorParameters: () => [], propDecorators: { tcList: [{
4103
4103
  type: Input
4104
4104
  }], placeholder: [{
@@ -4124,12 +4124,12 @@ const CUSTOM_INPUT_VALIDATORS$1 = {
4124
4124
  useExisting: forwardRef(() => TCloudUiMultiSelectComponent),
4125
4125
  multi: true
4126
4126
  };
4127
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 = {
4127
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3 = {
4128
4128
  provide: NG_VALUE_ACCESSOR,
4129
4129
  useExisting: forwardRef(() => TCloudUiMultiSelectComponent),
4130
4130
  multi: true
4131
4131
  };
4132
- const noop$2 = () => {
4132
+ const noop$3 = () => {
4133
4133
  };
4134
4134
  class TCloudUiMultiSelectComponent {
4135
4135
  constructor() {
@@ -4146,8 +4146,8 @@ class TCloudUiMultiSelectComponent {
4146
4146
  this.onChange = new EventEmitter();
4147
4147
  //Placeholders for the callbacks which are later providesd
4148
4148
  //by the Control Value Accessor
4149
- this.onTouchedCallback = noop$2;
4150
- this.onChangeCallback = noop$2;
4149
+ this.onTouchedCallback = noop$3;
4150
+ this.onChangeCallback = noop$3;
4151
4151
  }
4152
4152
  ngOnInit() {
4153
4153
  if (this.placeholder === this._PLACEHOLDER) {
@@ -4262,11 +4262,11 @@ class TCloudUiMultiSelectComponent {
4262
4262
  ngOnDestroy() {
4263
4263
  }
4264
4264
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4265
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiMultiSelectComponent, isStandalone: true, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", maxWidthLabel: "maxWidthLabel", showDescriptionInValue: "showDescriptionInValue", showInput: "showInput" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "\n <div class=\"tcloud-ui-multi-select\">\n <table *ngIf=\"!showInput\">\n <tr *ngIf=\"tcList\">\n <td>\n <select\n class=\"tc-form-control\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n #_select\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\n\n <option value=\"null\" disabled selected>{{ placeholder }}</option>\n\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\n </ng-container>\n </select>\n </td>\n <td>\n <button\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(_select.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=\"count_actives > 0 && (tcList && tcList.length > 0)\">\n <ng-container *ngFor=\"let item of tcList\">\n\n <ng-container *ngIf=\"item.active\">\n <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\" >\n <div class=\"box-value\" [title]=\"item.value\" *ngIf=\"!showDescriptionInValue\">\n {{ item.value }}\n </div>\n <div class=\"box-value\" [title]=\"item.description\" *ngIf=\"showDescriptionInValue\">\n {{ item.description }}\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);onChangeTouched()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </div>\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 30px 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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
4265
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiMultiSelectComponent, isStandalone: true, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", maxWidthLabel: "maxWidthLabel", showDescriptionInValue: "showDescriptionInValue", showInput: "showInput" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "\n <div class=\"tcloud-ui-multi-select\">\n <table *ngIf=\"!showInput\">\n <tr *ngIf=\"tcList\">\n <td>\n <select\n class=\"tc-form-control\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n #_select\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\n\n <option value=\"null\" disabled selected>{{ placeholder }}</option>\n\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\n </ng-container>\n </select>\n </td>\n <td>\n <button\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(_select.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=\"count_actives > 0 && (tcList && tcList.length > 0)\">\n <ng-container *ngFor=\"let item of tcList\">\n\n <ng-container *ngIf=\"item.active\">\n <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\" >\n <div class=\"box-value\" [title]=\"item.value\" *ngIf=\"!showDescriptionInValue\">\n {{ item.value }}\n </div>\n <div class=\"box-value\" [title]=\"item.description\" *ngIf=\"showDescriptionInValue\">\n {{ item.description }}\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);onChangeTouched()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </div>\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 30px 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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
4266
4266
  }
4267
4267
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiMultiSelectComponent, decorators: [{
4268
4268
  type: Component,
4269
- args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2, CUSTOM_INPUT_VALIDATORS$1], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, I18nTranslatePipe], template: "\n <div class=\"tcloud-ui-multi-select\">\n <table *ngIf=\"!showInput\">\n <tr *ngIf=\"tcList\">\n <td>\n <select\n class=\"tc-form-control\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n #_select\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\n\n <option value=\"null\" disabled selected>{{ placeholder }}</option>\n\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\n </ng-container>\n </select>\n </td>\n <td>\n <button\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(_select.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=\"count_actives > 0 && (tcList && tcList.length > 0)\">\n <ng-container *ngFor=\"let item of tcList\">\n\n <ng-container *ngIf=\"item.active\">\n <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\" >\n <div class=\"box-value\" [title]=\"item.value\" *ngIf=\"!showDescriptionInValue\">\n {{ item.value }}\n </div>\n <div class=\"box-value\" [title]=\"item.description\" *ngIf=\"showDescriptionInValue\">\n {{ item.description }}\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);onChangeTouched()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </div>\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 30px 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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"] }]
4269
+ args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, I18nTranslatePipe], template: "\n <div class=\"tcloud-ui-multi-select\">\n <table *ngIf=\"!showInput\">\n <tr *ngIf=\"tcList\">\n <td>\n <select\n class=\"tc-form-control\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n #_select\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\n\n <option value=\"null\" disabled selected>{{ placeholder }}</option>\n\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\n </ng-container>\n </select>\n </td>\n <td>\n <button\n [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(_select.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=\"count_actives > 0 && (tcList && tcList.length > 0)\">\n <ng-container *ngFor=\"let item of tcList\">\n\n <ng-container *ngIf=\"item.active\">\n <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\" >\n <div class=\"box-value\" [title]=\"item.value\" *ngIf=\"!showDescriptionInValue\">\n {{ item.value }}\n </div>\n <div class=\"box-value\" [title]=\"item.description\" *ngIf=\"showDescriptionInValue\">\n {{ item.description }}\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);onChangeTouched()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </div>\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 30px 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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"] }]
4270
4270
  }], ctorParameters: () => [], propDecorators: { tcList: [{
4271
4271
  type: Input
4272
4272
  }], placeholder: [{
@@ -4808,12 +4808,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
4808
4808
  type: Input
4809
4809
  }] } });
4810
4810
 
4811
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
4811
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 = {
4812
4812
  provide: NG_VALUE_ACCESSOR,
4813
4813
  useExisting: forwardRef(() => TCloudUiInputPasswordComponent),
4814
4814
  multi: true
4815
4815
  };
4816
- const noop$1 = () => {
4816
+ const noop$2 = () => {
4817
4817
  };
4818
4818
  class TCloudUiInputPasswordComponent {
4819
4819
  set ngModel(v) {
@@ -4833,8 +4833,8 @@ class TCloudUiInputPasswordComponent {
4833
4833
  this.isCopy = false;
4834
4834
  //Placeholders for the callbacks which are later providesd
4835
4835
  //by the Control Value Accessor
4836
- this.onTouchedCallback = noop$1;
4837
- this.onChangeCallback = noop$1;
4836
+ this.onTouchedCallback = noop$2;
4837
+ this.onChangeCallback = noop$2;
4838
4838
  }
4839
4839
  ngOnInit() {
4840
4840
  this.passwordRegex = this.getRegexValidation();
@@ -4920,11 +4920,11 @@ class TCloudUiInputPasswordComponent {
4920
4920
  this.onTouchedCallback = fn;
4921
4921
  }
4922
4922
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiInputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4923
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiInputPasswordComponent, isStandalone: true, selector: "tcloud-ui-input-password", inputs: { actionView: "actionView", actionCopy: "actionCopy", actionGeneratePassword: "actionGeneratePassword", numberOfCharacter: "numberOfCharacter", atLeastOneUppercaseLetter: "atLeastOneUppercaseLetter", atLeastOneLowercaseLetter: "atLeastOneLowercaseLetter", atLeastOneSpecialCharacter: "atLeastOneSpecialCharacter", ngModel: "ngModel" }, outputs: { ngModelChange: "ngModelChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], ngImport: i0, template: "<div class=\"tcloud-ui-input-password\">\n <table>\n <tr>\n <!-- input password -->\n <td>\n <form #_form=\"ngForm\">\n <ng-container *ngIf=\"passwordRegex\">\n <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\n <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\n </ng-container>\n </form>\n </td>\n\n <!-- action show hide -->\n <td *ngIf=\"actionView\">\n <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? ('inputPassword.show_password' | i18nTranslate : 'Visualizar Senha') : ('inputPassword.hide_password' | i18nTranslate : 'Esconder Senha')\">\n <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\n <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \n </button>\n </td>\n\n <!-- action generate pass -->\n <td *ngIf=\"actionGeneratePassword\">\n <button type=\"button\" title=\"{{ 'inputPassword.generate_password' | i18nTranslate : 'Gerar Senha'}}\" (click)=\"generatePassword()\">\n <i class=\"fa-solid fa-key\"></i>\n </button>\n </td>\n\n <!-- action copy pass -->\n <td *ngIf=\"actionCopy\">\n <button type=\"button\" title=\"{{ 'inputPassword.copy_password' | i18nTranslate : 'Copiar Senha'}}\" (click)=\"copyText()\">\n <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\n <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\n </button>\n </td>\n </tr>\n </table>\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
4923
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiInputPasswordComponent, isStandalone: true, selector: "tcloud-ui-input-password", inputs: { actionView: "actionView", actionCopy: "actionCopy", actionGeneratePassword: "actionGeneratePassword", numberOfCharacter: "numberOfCharacter", atLeastOneUppercaseLetter: "atLeastOneUppercaseLetter", atLeastOneLowercaseLetter: "atLeastOneLowercaseLetter", atLeastOneSpecialCharacter: "atLeastOneSpecialCharacter", ngModel: "ngModel" }, outputs: { ngModelChange: "ngModelChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2], ngImport: i0, template: "<div class=\"tcloud-ui-input-password\">\n <table>\n <tr>\n <!-- input password -->\n <td>\n <form #_form=\"ngForm\">\n <ng-container *ngIf=\"passwordRegex\">\n <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\n <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\n </ng-container>\n </form>\n </td>\n\n <!-- action show hide -->\n <td *ngIf=\"actionView\">\n <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? ('inputPassword.show_password' | i18nTranslate : 'Visualizar Senha') : ('inputPassword.hide_password' | i18nTranslate : 'Esconder Senha')\">\n <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\n <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \n </button>\n </td>\n\n <!-- action generate pass -->\n <td *ngIf=\"actionGeneratePassword\">\n <button type=\"button\" title=\"{{ 'inputPassword.generate_password' | i18nTranslate : 'Gerar Senha'}}\" (click)=\"generatePassword()\">\n <i class=\"fa-solid fa-key\"></i>\n </button>\n </td>\n\n <!-- action copy pass -->\n <td *ngIf=\"actionCopy\">\n <button type=\"button\" title=\"{{ 'inputPassword.copy_password' | i18nTranslate : 'Copiar Senha'}}\" (click)=\"copyText()\">\n <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\n <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\n </button>\n </td>\n </tr>\n </table>\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
4924
4924
  }
4925
4925
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiInputPasswordComponent, decorators: [{
4926
4926
  type: Component,
4927
- args: [{ selector: 'tcloud-ui-input-password', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], standalone: true, imports: [CommonModule, FormsModule, I18nTranslatePipe], template: "<div class=\"tcloud-ui-input-password\">\n <table>\n <tr>\n <!-- input password -->\n <td>\n <form #_form=\"ngForm\">\n <ng-container *ngIf=\"passwordRegex\">\n <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\n <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\n </ng-container>\n </form>\n </td>\n\n <!-- action show hide -->\n <td *ngIf=\"actionView\">\n <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? ('inputPassword.show_password' | i18nTranslate : 'Visualizar Senha') : ('inputPassword.hide_password' | i18nTranslate : 'Esconder Senha')\">\n <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\n <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \n </button>\n </td>\n\n <!-- action generate pass -->\n <td *ngIf=\"actionGeneratePassword\">\n <button type=\"button\" title=\"{{ 'inputPassword.generate_password' | i18nTranslate : 'Gerar Senha'}}\" (click)=\"generatePassword()\">\n <i class=\"fa-solid fa-key\"></i>\n </button>\n </td>\n\n <!-- action copy pass -->\n <td *ngIf=\"actionCopy\">\n <button type=\"button\" title=\"{{ 'inputPassword.copy_password' | i18nTranslate : 'Copiar Senha'}}\" (click)=\"copyText()\">\n <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\n <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\n </button>\n </td>\n </tr>\n </table>\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"] }]
4927
+ args: [{ selector: 'tcloud-ui-input-password', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2], standalone: true, imports: [CommonModule, FormsModule, I18nTranslatePipe], template: "<div class=\"tcloud-ui-input-password\">\n <table>\n <tr>\n <!-- input password -->\n <td>\n <form #_form=\"ngForm\">\n <ng-container *ngIf=\"passwordRegex\">\n <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\n <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\n </ng-container>\n </form>\n </td>\n\n <!-- action show hide -->\n <td *ngIf=\"actionView\">\n <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? ('inputPassword.show_password' | i18nTranslate : 'Visualizar Senha') : ('inputPassword.hide_password' | i18nTranslate : 'Esconder Senha')\">\n <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\n <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \n </button>\n </td>\n\n <!-- action generate pass -->\n <td *ngIf=\"actionGeneratePassword\">\n <button type=\"button\" title=\"{{ 'inputPassword.generate_password' | i18nTranslate : 'Gerar Senha'}}\" (click)=\"generatePassword()\">\n <i class=\"fa-solid fa-key\"></i>\n </button>\n </td>\n\n <!-- action copy pass -->\n <td *ngIf=\"actionCopy\">\n <button type=\"button\" title=\"{{ 'inputPassword.copy_password' | i18nTranslate : 'Copiar Senha'}}\" (click)=\"copyText()\">\n <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\n <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\n </button>\n </td>\n </tr>\n </table>\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"] }]
4928
4928
  }], ctorParameters: () => [], propDecorators: { actionView: [{
4929
4929
  type: Input
4930
4930
  }], actionCopy: [{
@@ -5133,12 +5133,12 @@ const CUSTOM_INPUT_VALIDATORS = {
5133
5133
  useExisting: forwardRef(() => TCloudUiMultiplesValuesComponent),
5134
5134
  multi: true
5135
5135
  };
5136
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
5136
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
5137
5137
  provide: NG_VALUE_ACCESSOR,
5138
5138
  useExisting: forwardRef(() => TCloudUiMultiplesValuesComponent),
5139
5139
  multi: true
5140
5140
  };
5141
- const noop = () => {
5141
+ const noop$1 = () => {
5142
5142
  };
5143
5143
  class TCloudUiMultiplesValuesComponent {
5144
5144
  set listItems(v) {
@@ -5174,8 +5174,8 @@ class TCloudUiMultiplesValuesComponent {
5174
5174
  this.placeholder_list = '';
5175
5175
  //Placeholders for the callbacks which are later providesd
5176
5176
  //by the Control Value Accessor
5177
- this.onTouchedCallback = noop;
5178
- this.onChangeCallback = noop;
5177
+ this.onTouchedCallback = noop$1;
5178
+ this.onChangeCallback = noop$1;
5179
5179
  }
5180
5180
  ngOnInit() {
5181
5181
  this.id = this.generateID();
@@ -5434,11 +5434,11 @@ class TCloudUiMultiplesValuesComponent {
5434
5434
  ngOnDestroy() {
5435
5435
  }
5436
5436
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5437
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiMultiplesValuesComponent, isStandalone: true, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", openValuesInChange: "openValuesInChange", useBtnAdd: "useBtnAdd", pattern: "pattern", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase", maxWidthLabel: "maxWidthLabel" }, outputs: { tcChange: "tcChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div *ngIf=\"show_component\" class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n <form #_formulario=\"ngForm\">\n\n <!-- {{ input_items }} -->\n\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n <ng-container *ngFor=\"let item of listItems\"> \n <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n </ng-container>\n </tcloud-ui-data-list>\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n <div class=\"input\">\n <input \n required\n [pattern]=\"pattern\"\n (keydown.enter)=\"toEnterKey(input_items)\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\" \n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n \n </div>\n </ng-container>\n </td>\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly> \n </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n </button>\n </td>\n \n </tr>\n </table> \n </td>\n <td style=\"width: 45px;\" *ngIf=\"useBtnAdd\">\n <table>\n <tr>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n\n </div>\n \n <!-- <pre>\n {{ items | json }}\n </pre> -->\n\n </form> \n\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n \n\n <div class=\"line-search\">\n <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\n <tr>\n \n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n \n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n\n <div class=\"area-options\" id=\"{{ id }}-options\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n \n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }} \n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n\n </ng-container>\n </div>\n\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:#fff}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--tc-gray-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
5437
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiMultiplesValuesComponent, isStandalone: true, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", openValuesInChange: "openValuesInChange", useBtnAdd: "useBtnAdd", pattern: "pattern", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase", maxWidthLabel: "maxWidthLabel" }, outputs: { tcChange: "tcChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div *ngIf=\"show_component\" class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n <form #_formulario=\"ngForm\">\n\n <!-- {{ input_items }} -->\n\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n <ng-container *ngFor=\"let item of listItems\"> \n <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n </ng-container>\n </tcloud-ui-data-list>\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n <div class=\"input\">\n <input \n required\n [pattern]=\"pattern\"\n (keydown.enter)=\"toEnterKey(input_items)\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\" \n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n \n </div>\n </ng-container>\n </td>\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly> \n </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n </button>\n </td>\n \n </tr>\n </table> \n </td>\n <td style=\"width: 45px;\" *ngIf=\"useBtnAdd\">\n <table>\n <tr>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n\n </div>\n \n <!-- <pre>\n {{ items | json }}\n </pre> -->\n\n </form> \n\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n \n\n <div class=\"line-search\">\n <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\n <tr>\n \n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n \n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n\n <div class=\"area-options\" id=\"{{ id }}-options\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n \n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }} \n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n\n </ng-container>\n </div>\n\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:#fff}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--tc-gray-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
5438
5438
  }
5439
5439
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
5440
5440
  type: Component,
5441
- args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, I18nTranslatePipe], template: "<div *ngIf=\"show_component\" class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n <form #_formulario=\"ngForm\">\n\n <!-- {{ input_items }} -->\n\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n <ng-container *ngFor=\"let item of listItems\"> \n <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n </ng-container>\n </tcloud-ui-data-list>\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n <div class=\"input\">\n <input \n required\n [pattern]=\"pattern\"\n (keydown.enter)=\"toEnterKey(input_items)\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\" \n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n \n </div>\n </ng-container>\n </td>\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly> \n </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n </button>\n </td>\n \n </tr>\n </table> \n </td>\n <td style=\"width: 45px;\" *ngIf=\"useBtnAdd\">\n <table>\n <tr>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n\n </div>\n \n <!-- <pre>\n {{ items | json }}\n </pre> -->\n\n </form> \n\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n \n\n <div class=\"line-search\">\n <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\n <tr>\n \n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n \n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n\n <div class=\"area-options\" id=\"{{ id }}-options\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n \n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }} \n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n\n </ng-container>\n </div>\n\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:#fff}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--tc-gray-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
5441
+ args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, I18nTranslatePipe], template: "<div *ngIf=\"show_component\" class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n <form #_formulario=\"ngForm\">\n\n <!-- {{ input_items }} -->\n\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n <ng-container *ngFor=\"let item of listItems\"> \n <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n </ng-container>\n </tcloud-ui-data-list>\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n <div class=\"input\">\n <input \n required\n [pattern]=\"pattern\"\n (keydown.enter)=\"toEnterKey(input_items)\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\" \n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n \n </div>\n </ng-container>\n </td>\n <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly> \n </div>\n </td>\n <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div> \n </td>\n <td class=\"action-input-arrow bc-r\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n </button>\n </td>\n \n </tr>\n </table> \n </td>\n <td style=\"width: 45px;\" *ngIf=\"useBtnAdd\">\n <table>\n <tr>\n <td class=\"action-input\" *ngIf=\"!disabled\">\n <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </ng-container>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n\n </div>\n \n <!-- <pre>\n {{ items | json }}\n </pre> -->\n\n </form> \n\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n \n\n <div class=\"line-search\">\n <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\n <tr>\n \n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" > \n </td>\n \n <td class=\"area-icon\">\n <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n </td>\n \n </tr>\n </table>\n </div>\n\n <div class=\"area-options\" id=\"{{ id }}-options\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n \n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }} \n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n\n </ng-container>\n </div>\n\n <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:#fff}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--tc-gray-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
5442
5442
  }], ctorParameters: () => [], propDecorators: { listItems: [{
5443
5443
  type: Input
5444
5444
  }], openValuesInChange: [{
@@ -7556,7 +7556,7 @@ class TCloudUiPaginationPipe {
7556
7556
  this._tcloudUiPaginationService.notifyCollectionChange(args.id);
7557
7557
  }
7558
7558
  this._previousLengths.set(args.id, currentLength);
7559
- const total = Math.ceil((collection?.length || 0) / args.itemsPerPage);
7559
+ const total = args?.totalPages || Math.ceil((collection?.length || 0) / args.itemsPerPage);
7560
7560
  this._tcloudUiPaginationService.set_total(args, total);
7561
7561
  if (!Array.isArray(collection) ||
7562
7562
  isNaN(args.currentPage) ||
@@ -8250,10 +8250,17 @@ var DropdownSize$1;
8250
8250
  DropdownSize["md"] = "md";
8251
8251
  DropdownSize["lg"] = "lg";
8252
8252
  })(DropdownSize$1 || (DropdownSize$1 = {}));
8253
+ const noop = () => { };
8254
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
8255
+ provide: NG_VALUE_ACCESSOR,
8256
+ useExisting: forwardRef(() => TCloudUiDropdownComponent),
8257
+ multi: true,
8258
+ };
8253
8259
  class TCloudUiDropdownComponent {
8254
8260
  onDocumentClick(event) {
8255
8261
  if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
8256
8262
  this.isOpen = false;
8263
+ this.onTouchedCallback();
8257
8264
  }
8258
8265
  }
8259
8266
  constructor(elementRef) {
@@ -8275,6 +8282,16 @@ class TCloudUiDropdownComponent {
8275
8282
  this.isDesktop = this._deviceService.isDesktop;
8276
8283
  this.isMobile = this._deviceService.isMobile;
8277
8284
  this.searchText = signal(''); // Texto de busca
8285
+ // Signal interno para desabilitar via ControlValueAccessor (ex: form.disable())
8286
+ // Mantém compatibilidade com o input `disabled` já existente
8287
+ this._disabledByForm = signal(false);
8288
+ // Computed que combina o input [disabled] externo e o estado do formulário.
8289
+ // Use isDisabled() no template em vez de disabled() para cobrir ambos os casos.
8290
+ this.isDisabled = computed(() => this.disabled() || this._disabledByForm());
8291
+ // Callbacks do ControlValueAccessor — inicializados como noop para evitar erros
8292
+ // quando o componente é usado fora de um formulário reativo/template-driven
8293
+ this.onChangeCallback = noop;
8294
+ this.onTouchedCallback = noop;
8278
8295
  // Opções filtradas baseadas na busca
8279
8296
  this.filteredOptions = computed(() => {
8280
8297
  const search = this.searchText().toLowerCase().trim();
@@ -8317,15 +8334,20 @@ class TCloudUiDropdownComponent {
8317
8334
  return;
8318
8335
  }
8319
8336
  this.isOpen = !this.isOpen;
8320
- // Limpa o texto de busca quando abrir o dropdown
8321
8337
  if (this.isOpen) {
8338
+ // Limpa o texto de busca quando abrir o dropdown
8322
8339
  this.searchText.set('');
8323
8340
  }
8341
+ else {
8342
+ // Marca como touched ao fechar (compatível com validadores do Angular)
8343
+ this.onTouchedCallback();
8344
+ }
8324
8345
  }
8325
8346
  selectOption(option) {
8326
8347
  this.selectedOption.set(option);
8327
8348
  this.value.set(option.value); // Atualiza o model com two-way binding
8328
8349
  this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
8350
+ this.onChangeCallback(option.value); // Notifica o formulário reativo/template-driven
8329
8351
  // Fechamento dd dropdown para mobile
8330
8352
  if (this.isMobile()) {
8331
8353
  this._deviceService.closeDropdownDevice();
@@ -8368,8 +8390,30 @@ class TCloudUiDropdownComponent {
8368
8390
  clearSearch() {
8369
8391
  this.searchText.set('');
8370
8392
  }
8393
+ // --- ControlValueAccessor interface ---
8394
+ // Permite usar o componente com formControl, formControlName e [(ngModel)]
8395
+ // Chamado pelo Angular ao definir o valor programaticamente (ex: form.patchValue, writeValue)
8396
+ // Não dispara onChangeCallback para não marcar o formulário como dirty
8397
+ writeValue(value) {
8398
+ if (value !== this.value()) {
8399
+ this.value.set(value ?? null);
8400
+ }
8401
+ }
8402
+ // Registra o callback que o Angular chama quando o valor muda pelo usuário
8403
+ registerOnChange(fn) {
8404
+ this.onChangeCallback = fn;
8405
+ }
8406
+ // Registra o callback que o Angular chama quando o componente perde o foco
8407
+ registerOnTouched(fn) {
8408
+ this.onTouchedCallback = fn;
8409
+ }
8410
+ // Chamado pelo Angular quando o estado disabled do formulário muda (form.disable() / form.enable())
8411
+ // Usa signal interno para não sobrescrever o input `disabled` externo
8412
+ setDisabledState(isDisabled) {
8413
+ this._disabledByForm.set(isDisabled);
8414
+ }
8371
8415
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
8372
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TCloudUiDropdownComponent, isStandalone: true, selector: "tcloud-ui-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"label()\"></b>\n }\n <span class=\"tcloud-ui-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n <!-- Campo de busca -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tcloud-ui-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n <div class=\"tcloud-ui-dropdown-menu-section\">\n <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n <!-- Campo de busca mobile -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search tcloud-ui-dropdown-search--mobile\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca mobile -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results tcloud-ui-dropdown-no-results--mobile\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-12) 0;margin-bottom:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{height:var(--size-40);font-size:var(--f-size-14);padding:var(--size-12) var(--size-40) var(--size-12) var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{left:var(--size-12);font-size:var(--f-size-14)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{right:var(--size-12);padding:var(--size-4)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-no-results--mobile{padding:var(--size-16) var(--size-12);font-size:var(--f-size-14);color:var(--c-neutral-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
8416
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TCloudUiDropdownComponent, isStandalone: true, selector: "tcloud-ui-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"isDisabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"isDisabled()\"\n [disabled]=\"isDisabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"label()\"></b>\n }\n <span class=\"tcloud-ui-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n <!-- Campo de busca -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tcloud-ui-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n <div class=\"tcloud-ui-dropdown-menu-section\">\n <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n <!-- Campo de busca mobile -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search tcloud-ui-dropdown-search--mobile\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca mobile -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results tcloud-ui-dropdown-no-results--mobile\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-12) 0;margin-bottom:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{height:var(--size-40);font-size:var(--f-size-14);padding:var(--size-12) var(--size-40) var(--size-12) var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{left:var(--size-12);font-size:var(--f-size-14)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{right:var(--size-12);padding:var(--size-4)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-no-results--mobile{padding:var(--size-16) var(--size-12);font-size:var(--f-size-14);color:var(--c-neutral-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
8373
8417
  }
8374
8418
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiDropdownComponent, decorators: [{
8375
8419
  type: Component,
@@ -8379,7 +8423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
8379
8423
  ReactiveFormsModule,
8380
8424
  TcRevTooltipDirective,
8381
8425
  TcRevIconButtonDirective
8382
- ], template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"label()\"></b>\n }\n <span class=\"tcloud-ui-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n <!-- Campo de busca -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tcloud-ui-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n <div class=\"tcloud-ui-dropdown-menu-section\">\n <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n <!-- Campo de busca mobile -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search tcloud-ui-dropdown-search--mobile\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca mobile -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results tcloud-ui-dropdown-no-results--mobile\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-12) 0;margin-bottom:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{height:var(--size-40);font-size:var(--f-size-14);padding:var(--size-12) var(--size-40) var(--size-12) var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{left:var(--size-12);font-size:var(--f-size-14)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{right:var(--size-12);padding:var(--size-4)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-no-results--mobile{padding:var(--size-16) var(--size-12);font-size:var(--f-size-14);color:var(--c-neutral-600)}\n"] }]
8426
+ ], providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"isDisabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"isDisabled()\"\n [disabled]=\"isDisabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"label()\"></b>\n }\n <span class=\"tcloud-ui-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n <!-- Campo de busca -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tcloud-ui-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n <div class=\"tcloud-ui-dropdown-menu-section\">\n <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n <!-- Campo de busca mobile -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search tcloud-ui-dropdown-search--mobile\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca mobile -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results tcloud-ui-dropdown-no-results--mobile\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-12) 0;margin-bottom:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{height:var(--size-40);font-size:var(--f-size-14);padding:var(--size-12) var(--size-40) var(--size-12) var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{left:var(--size-12);font-size:var(--f-size-14)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{right:var(--size-12);padding:var(--size-4)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-no-results--mobile{padding:var(--size-16) var(--size-12);font-size:var(--f-size-14);color:var(--c-neutral-600)}\n"] }]
8383
8427
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
8384
8428
  type: ViewChild,
8385
8429
  args: ['menuTemplate']
@@ -11265,5 +11309,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
11265
11309
  * Generated bundle index. Do not edit.
11266
11310
  */
11267
11311
 
11268
- export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
11312
+ export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
11269
11313
  //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map