@dev-tcloud/tcloud-ui 5.0.4 → 5.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -234,11 +234,11 @@ class TCloudUiTabMenuComponent {
|
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
236
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TCloudUiTabMenuComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
237
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TCloudUiTabMenuComponent, isStandalone: false, selector: "tcloud-ui-tab-menu", inputs: { registerInUrl: "registerInUrl", loading: "loading", active: "active", full: "full" }, outputs: { onChange: "onChange" }, providers: [TabMenuService], ngImport: i0, template: "<div class=\"tcloud-ui-tab-menu tc-tab-menu\" [class.loading]=\"loading\" [class.tcloud-ui-tab-block-full]=\"full\" >\n <ng-content></ng-content>\n</div>", styles: [".tc-tab-menu
|
|
237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TCloudUiTabMenuComponent, isStandalone: false, selector: "tcloud-ui-tab-menu", inputs: { registerInUrl: "registerInUrl", loading: "loading", active: "active", full: "full" }, outputs: { onChange: "onChange" }, providers: [TabMenuService], ngImport: i0, template: "<div class=\"tcloud-ui-tab-menu tc-tab-menu\" [class.loading]=\"loading\" [class.tcloud-ui-tab-block-full]=\"full\" >\n <ng-content></ng-content>\n</div>", styles: [".tc-tab-menu .fas{color:var(--tc-primary);margin:0}.tc-tab-menu{width:100%;overflow-x:hidden}.loading{opacity:.7;cursor:progress!important}\n"] }); }
|
|
238
238
|
}
|
|
239
239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TCloudUiTabMenuComponent, decorators: [{
|
|
240
240
|
type: Component,
|
|
241
|
-
args: [{ selector: 'tcloud-ui-tab-menu', providers: [TabMenuService], standalone: false, template: "<div class=\"tcloud-ui-tab-menu tc-tab-menu\" [class.loading]=\"loading\" [class.tcloud-ui-tab-block-full]=\"full\" >\n <ng-content></ng-content>\n</div>", styles: [".tc-tab-menu
|
|
241
|
+
args: [{ selector: 'tcloud-ui-tab-menu', providers: [TabMenuService], standalone: false, template: "<div class=\"tcloud-ui-tab-menu tc-tab-menu\" [class.loading]=\"loading\" [class.tcloud-ui-tab-block-full]=\"full\" >\n <ng-content></ng-content>\n</div>", styles: [".tc-tab-menu .fas{color:var(--tc-primary);margin:0}.tc-tab-menu{width:100%;overflow-x:hidden}.loading{opacity:.7;cursor:progress!important}\n"] }]
|
|
242
242
|
}], ctorParameters: () => [{ type: TabMenuService }], propDecorators: { registerInUrl: [{
|
|
243
243
|
type: Input
|
|
244
244
|
}], loading: [{
|
|
@@ -1585,14 +1585,14 @@ class TCloudUiDataListComponent {
|
|
|
1585
1585
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TCloudUiDataListComponent, isStandalone: false, 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: [
|
|
1586
1586
|
DataListService,
|
|
1587
1587
|
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7
|
|
1588
|
-
], 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 #_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{
|
|
1588
|
+
], 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 #_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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }] }); }
|
|
1589
1589
|
}
|
|
1590
1590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
|
|
1591
1591
|
type: Component,
|
|
1592
1592
|
args: [{ selector: 'tcloud-ui-data-list', providers: [
|
|
1593
1593
|
DataListService,
|
|
1594
1594
|
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7
|
|
1595
|
-
], standalone: false, 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 #_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{
|
|
1595
|
+
], standalone: false, 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 #_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"] }]
|
|
1596
1596
|
}], ctorParameters: () => [{ type: DataListService }, { type: i2.FormBuilder }], propDecorators: { placeholder: [{
|
|
1597
1597
|
type: Input
|
|
1598
1598
|
}], disabled: [{
|
|
@@ -6032,11 +6032,11 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
6032
6032
|
ngOnDestroy() {
|
|
6033
6033
|
}
|
|
6034
6034
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6035
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TCloudUiMultiplesValuesComponent, isStandalone: false, 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) ? 'registros' : '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{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid 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: "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: "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: "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"] }] }); }
|
|
6035
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TCloudUiMultiplesValuesComponent, isStandalone: false, 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) ? 'registros' : '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: "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: "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: "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"] }] }); }
|
|
6036
6036
|
}
|
|
6037
6037
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
|
|
6038
6038
|
type: Component,
|
|
6039
|
-
args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], standalone: false, 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) ? 'registros' : '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{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid 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"] }]
|
|
6039
|
+
args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], standalone: false, 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) ? 'registros' : '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"] }]
|
|
6040
6040
|
}], ctorParameters: () => [], propDecorators: { listItems: [{
|
|
6041
6041
|
type: Input
|
|
6042
6042
|
}], openValuesInChange: [{
|
|
@@ -6459,11 +6459,11 @@ class TCloudUiProgressBarComponent {
|
|
|
6459
6459
|
// console.log('new_status', this.new_status);
|
|
6460
6460
|
}
|
|
6461
6461
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TCloudUiProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TCloudUiProgressBarComponent, isStandalone: false, selector: "tcloud-ui-progress-bar", inputs: { limit: "limit", status: "status", mode: "mode", height: "height", useDefaultBackground: "useDefaultBackground", showValue: "showValue" }, ngImport: i0, template: "<div class=\"tc-ui-progress-bar tc-background-{{ progress_class }}\"> \n <div class=\"tc-progress-bar {{ height_class }}\" [class.use-background]=\"useDefaultBackground\" >\n\n <div *ngIf=\"!limit\" class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + status + '%'\"></div>\n <div *ngIf=\"limit\" class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + new_status + '%'\"></div>\n\n <label *ngIf=\"( height_class === 'height-normal' || height_class === 'height-fat' || height_class === 'height-very-fat' ) && showValue\" \n [class.fixed-left]=\"(+status >= 12)\" \n [style]=\"'left: '+ (70) +'px'\" \n class=\"indicative-value info-{{ progress_class }}\">{{ status }}%\n </label>\n </div>\n</div>\n<div *ngIf=\"limit && (+limit > 100)\" >\n <div [class.indicative-limit]=\"limit\" [style]=\"{'width': value_100+'%'}\">\n <label>100%</label>\n </div> \n</div>\n\n", styles: [".tc-background-progress-gradient-success{border:none!important}.tc-background-progress-gradient-success .tc-progress-bar{background:#2fea9b;background:linear-gradient(90deg,#def1d5,#cef3e4)}.tc-background-progress-gradient-warning{border:none!important}.tc-background-progress-gradient-warning .tc-progress-bar{background:#f7e3d0;background:linear-gradient(90deg,#f7e3d0,#f7d9d8)}.tc-background-progress-gradient-info{border:none!important}.tc-background-progress-gradient-info .tc-progress-bar{background:#2fea9b;background:linear-gradient(90deg,#def1d5,#cef3e4)}.tc-background-progress-gradient-danger{border:none!important}.tc-background-progress-gradient-danger .tc-progress-bar{background:#f4d0f7;background:linear-gradient(90deg,#f4d0f7,#eea7a5)}.tc-ui-progress-bar{border:1px solid #ccc;border-radius:9px}.tc-ui-progress-bar .height-slim{height:10px;border-radius:5px}.tc-ui-progress-bar .height-normal{height:15px;border-radius:8px}.tc-ui-progress-bar .height-normal .indicative-value{position:relative;top:-18.5px!important;z-index:1;font-size:12px!important;font-weight:400!important}.tc-ui-progress-bar .height-fat{height:20px;border-radius:10px}.tc-ui-progress-bar .height-fat .indicative-value{position:relative;top:-21px!important;z-index:1;font-size:13.5px!important;font-weight:400!important}.tc-ui-progress-bar .height-very-fat{height:24px;border-radius:10px}.tc-ui-progress-bar .height-very-fat .indicative-value{position:relative;top:-24px!important;z-index:1;font-size:15.5px!important;font-weight:400!important}.tc-ui-progress-bar .tc-progress-bar{
|
|
6462
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TCloudUiProgressBarComponent, isStandalone: false, selector: "tcloud-ui-progress-bar", inputs: { limit: "limit", status: "status", mode: "mode", height: "height", useDefaultBackground: "useDefaultBackground", showValue: "showValue" }, ngImport: i0, template: "<div class=\"tc-ui-progress-bar tc-background-{{ progress_class }}\"> \n <div class=\"tc-progress-bar {{ height_class }}\" [class.use-background]=\"useDefaultBackground\" >\n\n <div *ngIf=\"!limit\" class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + status + '%'\"></div>\n <div *ngIf=\"limit\" class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + new_status + '%'\"></div>\n\n <label *ngIf=\"( height_class === 'height-normal' || height_class === 'height-fat' || height_class === 'height-very-fat' ) && showValue\" \n [class.fixed-left]=\"(+status >= 12)\" \n [style]=\"'left: '+ (70) +'px'\" \n class=\"indicative-value info-{{ progress_class }}\">{{ status }}%\n </label>\n </div>\n</div>\n<div *ngIf=\"limit && (+limit > 100)\" >\n <div [class.indicative-limit]=\"limit\" [style]=\"{'width': value_100+'%'}\">\n <label>100%</label>\n </div> \n</div>\n\n", styles: [".tc-background-progress-gradient-success{border:none!important}.tc-background-progress-gradient-success .tc-progress-bar{background:#2fea9b;background:linear-gradient(90deg,#def1d5,#cef3e4)}.tc-background-progress-gradient-warning{border:none!important}.tc-background-progress-gradient-warning .tc-progress-bar{background:#f7e3d0;background:linear-gradient(90deg,#f7e3d0,#f7d9d8)}.tc-background-progress-gradient-info{border:none!important}.tc-background-progress-gradient-info .tc-progress-bar{background:#2fea9b;background:linear-gradient(90deg,#def1d5,#cef3e4)}.tc-background-progress-gradient-danger{border:none!important}.tc-background-progress-gradient-danger .tc-progress-bar{background:#f4d0f7;background:linear-gradient(90deg,#f4d0f7,#eea7a5)}.tc-ui-progress-bar{border:1px solid #ccc;border-radius:9px}.tc-ui-progress-bar .height-slim{height:10px;border-radius:5px}.tc-ui-progress-bar .height-normal{height:15px;border-radius:8px}.tc-ui-progress-bar .height-normal .indicative-value{position:relative;top:-18.5px!important;z-index:1;font-size:12px!important;font-weight:400!important}.tc-ui-progress-bar .height-fat{height:20px;border-radius:10px}.tc-ui-progress-bar .height-fat .indicative-value{position:relative;top:-21px!important;z-index:1;font-size:13.5px!important;font-weight:400!important}.tc-ui-progress-bar .height-very-fat{height:24px;border-radius:10px}.tc-ui-progress-bar .height-very-fat .indicative-value{position:relative;top:-24px!important;z-index:1;font-size:15.5px!important;font-weight:400!important}.tc-ui-progress-bar .tc-progress-bar.use-background{background-color:var(--tc-gray-200)}.tc-ui-progress-bar .tc-progress-bar{border:1px solid #fff;overflow:hidden}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status{transition:width 2s ease;position:relative;bottom:1px}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-primary{background-color:var(--tc-primary)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-danger{background-color:var(--red)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-warning{background-color:var(--orange)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-info{background-color:var(--azul)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-success{background-color:var(--green2)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gray{background-color:var(--tc-gray-500)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-success{background:#2fea9b;background:linear-gradient(90deg,#2fea9b,#7fdd53)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-warning{background:#ffbf1a;background:linear-gradient(90deg,0%,rgb(255,191,26) 0%,rgb(255,64,128) 100%)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-info{background:#2fea9b;background:linear-gradient(90deg,#2fea9b,#7fdd53)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-danger{background:#ea2f67;background:linear-gradient(90deg,0%,rgb(233,47,102) 0%,rgb(208,46,46) 100%)}label.indicative-value.info-progress-gradient-success,label.indicative-value.info-progress-success{color:var(--green2)}label.indicative-value.info-progress-gradient-anger,label.indicative-value.info-progress-danger{color:#d02e2e}label.indicative-value.info-progress-gradient-warning,label.indicative-value.info-progress-warning{color:#f7b50c}label.indicative-value{position:relative;top:-19.5px;z-index:1;font-size:12.5px;font-weight:500}label.indicative-value.fixed-left{left:16px!important;color:#fff!important}.indicative-limit{border-right:2px solid #000;line-height:0;height:30px;position:relative;top:-20px;text-align:right}.indicative-limit label{position:relative;top:30px;left:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
6463
6463
|
}
|
|
6464
6464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TCloudUiProgressBarComponent, decorators: [{
|
|
6465
6465
|
type: Component,
|
|
6466
|
-
args: [{ selector: 'tcloud-ui-progress-bar', standalone: false, template: "<div class=\"tc-ui-progress-bar tc-background-{{ progress_class }}\"> \n <div class=\"tc-progress-bar {{ height_class }}\" [class.use-background]=\"useDefaultBackground\" >\n\n <div *ngIf=\"!limit\" class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + status + '%'\"></div>\n <div *ngIf=\"limit\" class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + new_status + '%'\"></div>\n\n <label *ngIf=\"( height_class === 'height-normal' || height_class === 'height-fat' || height_class === 'height-very-fat' ) && showValue\" \n [class.fixed-left]=\"(+status >= 12)\" \n [style]=\"'left: '+ (70) +'px'\" \n class=\"indicative-value info-{{ progress_class }}\">{{ status }}%\n </label>\n </div>\n</div>\n<div *ngIf=\"limit && (+limit > 100)\" >\n <div [class.indicative-limit]=\"limit\" [style]=\"{'width': value_100+'%'}\">\n <label>100%</label>\n </div> \n</div>\n\n", styles: [".tc-background-progress-gradient-success{border:none!important}.tc-background-progress-gradient-success .tc-progress-bar{background:#2fea9b;background:linear-gradient(90deg,#def1d5,#cef3e4)}.tc-background-progress-gradient-warning{border:none!important}.tc-background-progress-gradient-warning .tc-progress-bar{background:#f7e3d0;background:linear-gradient(90deg,#f7e3d0,#f7d9d8)}.tc-background-progress-gradient-info{border:none!important}.tc-background-progress-gradient-info .tc-progress-bar{background:#2fea9b;background:linear-gradient(90deg,#def1d5,#cef3e4)}.tc-background-progress-gradient-danger{border:none!important}.tc-background-progress-gradient-danger .tc-progress-bar{background:#f4d0f7;background:linear-gradient(90deg,#f4d0f7,#eea7a5)}.tc-ui-progress-bar{border:1px solid #ccc;border-radius:9px}.tc-ui-progress-bar .height-slim{height:10px;border-radius:5px}.tc-ui-progress-bar .height-normal{height:15px;border-radius:8px}.tc-ui-progress-bar .height-normal .indicative-value{position:relative;top:-18.5px!important;z-index:1;font-size:12px!important;font-weight:400!important}.tc-ui-progress-bar .height-fat{height:20px;border-radius:10px}.tc-ui-progress-bar .height-fat .indicative-value{position:relative;top:-21px!important;z-index:1;font-size:13.5px!important;font-weight:400!important}.tc-ui-progress-bar .height-very-fat{height:24px;border-radius:10px}.tc-ui-progress-bar .height-very-fat .indicative-value{position:relative;top:-24px!important;z-index:1;font-size:15.5px!important;font-weight:400!important}.tc-ui-progress-bar .tc-progress-bar{
|
|
6466
|
+
args: [{ selector: 'tcloud-ui-progress-bar', standalone: false, template: "<div class=\"tc-ui-progress-bar tc-background-{{ progress_class }}\"> \n <div class=\"tc-progress-bar {{ height_class }}\" [class.use-background]=\"useDefaultBackground\" >\n\n <div *ngIf=\"!limit\" class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + status + '%'\"></div>\n <div *ngIf=\"limit\" class=\"tc-progress-bar-status {{ progress_class }} {{ height_class }}\" [style]=\"'width: ' + new_status + '%'\"></div>\n\n <label *ngIf=\"( height_class === 'height-normal' || height_class === 'height-fat' || height_class === 'height-very-fat' ) && showValue\" \n [class.fixed-left]=\"(+status >= 12)\" \n [style]=\"'left: '+ (70) +'px'\" \n class=\"indicative-value info-{{ progress_class }}\">{{ status }}%\n </label>\n </div>\n</div>\n<div *ngIf=\"limit && (+limit > 100)\" >\n <div [class.indicative-limit]=\"limit\" [style]=\"{'width': value_100+'%'}\">\n <label>100%</label>\n </div> \n</div>\n\n", styles: [".tc-background-progress-gradient-success{border:none!important}.tc-background-progress-gradient-success .tc-progress-bar{background:#2fea9b;background:linear-gradient(90deg,#def1d5,#cef3e4)}.tc-background-progress-gradient-warning{border:none!important}.tc-background-progress-gradient-warning .tc-progress-bar{background:#f7e3d0;background:linear-gradient(90deg,#f7e3d0,#f7d9d8)}.tc-background-progress-gradient-info{border:none!important}.tc-background-progress-gradient-info .tc-progress-bar{background:#2fea9b;background:linear-gradient(90deg,#def1d5,#cef3e4)}.tc-background-progress-gradient-danger{border:none!important}.tc-background-progress-gradient-danger .tc-progress-bar{background:#f4d0f7;background:linear-gradient(90deg,#f4d0f7,#eea7a5)}.tc-ui-progress-bar{border:1px solid #ccc;border-radius:9px}.tc-ui-progress-bar .height-slim{height:10px;border-radius:5px}.tc-ui-progress-bar .height-normal{height:15px;border-radius:8px}.tc-ui-progress-bar .height-normal .indicative-value{position:relative;top:-18.5px!important;z-index:1;font-size:12px!important;font-weight:400!important}.tc-ui-progress-bar .height-fat{height:20px;border-radius:10px}.tc-ui-progress-bar .height-fat .indicative-value{position:relative;top:-21px!important;z-index:1;font-size:13.5px!important;font-weight:400!important}.tc-ui-progress-bar .height-very-fat{height:24px;border-radius:10px}.tc-ui-progress-bar .height-very-fat .indicative-value{position:relative;top:-24px!important;z-index:1;font-size:15.5px!important;font-weight:400!important}.tc-ui-progress-bar .tc-progress-bar.use-background{background-color:var(--tc-gray-200)}.tc-ui-progress-bar .tc-progress-bar{border:1px solid #fff;overflow:hidden}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status{transition:width 2s ease;position:relative;bottom:1px}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-primary{background-color:var(--tc-primary)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-danger{background-color:var(--red)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-warning{background-color:var(--orange)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-info{background-color:var(--azul)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-success{background-color:var(--green2)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gray{background-color:var(--tc-gray-500)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-success{background:#2fea9b;background:linear-gradient(90deg,#2fea9b,#7fdd53)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-warning{background:#ffbf1a;background:linear-gradient(90deg,0%,rgb(255,191,26) 0%,rgb(255,64,128) 100%)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-info{background:#2fea9b;background:linear-gradient(90deg,#2fea9b,#7fdd53)}.tc-ui-progress-bar .tc-progress-bar .tc-progress-bar-status.progress-gradient-danger{background:#ea2f67;background:linear-gradient(90deg,0%,rgb(233,47,102) 0%,rgb(208,46,46) 100%)}label.indicative-value.info-progress-gradient-success,label.indicative-value.info-progress-success{color:var(--green2)}label.indicative-value.info-progress-gradient-anger,label.indicative-value.info-progress-danger{color:#d02e2e}label.indicative-value.info-progress-gradient-warning,label.indicative-value.info-progress-warning{color:#f7b50c}label.indicative-value{position:relative;top:-19.5px;z-index:1;font-size:12.5px;font-weight:500}label.indicative-value.fixed-left{left:16px!important;color:#fff!important}.indicative-limit{border-right:2px solid #000;line-height:0;height:30px;position:relative;top:-20px;text-align:right}.indicative-limit label{position:relative;top:30px;left:-3px}\n"] }]
|
|
6467
6467
|
}], ctorParameters: () => [], propDecorators: { limit: [{
|
|
6468
6468
|
type: Input
|
|
6469
6469
|
}], status: [{
|
package/package.json
CHANGED
|
@@ -1,5 +1,46 @@
|
|
|
1
|
-
:root
|
|
2
|
-
|
|
1
|
+
:root {
|
|
2
|
+
|
|
3
|
+
--black: #000;
|
|
4
|
+
--white: #fff;
|
|
5
|
+
--blue: #0897E9;
|
|
6
|
+
--dark: #363636;
|
|
7
|
+
--orange: #FEAC0E;
|
|
8
|
+
// --gray-100: #EEE;
|
|
9
|
+
--gray-light: #EEE;
|
|
10
|
+
--blue-500: #0ADBE3;
|
|
11
|
+
--purple: #6B48FF;
|
|
12
|
+
--red: red;
|
|
13
|
+
// =============================================
|
|
14
|
+
// Colors V1
|
|
15
|
+
// =============================================
|
|
16
|
+
--primary: #37B6C4;
|
|
17
|
+
--primary-700: #136E92;
|
|
18
|
+
--secondary: #484440;
|
|
19
|
+
--gray: #707070;
|
|
20
|
+
--gray-800: #8A817B;
|
|
21
|
+
--gray-400: #D5CCC3;
|
|
22
|
+
--gray-200: #F1F1F1;
|
|
23
|
+
--gray-100: #F8F9FA;
|
|
24
|
+
--warning: #ED9C2E;
|
|
25
|
+
--danger: #D93025;
|
|
26
|
+
--success :#1E8E3E;
|
|
27
|
+
--complete :#039BE5;
|
|
28
|
+
|
|
29
|
+
--verde: #37B6C4;
|
|
30
|
+
--cinza: #8A817B;
|
|
31
|
+
--cinza4: #F1F1F1;
|
|
32
|
+
|
|
33
|
+
--f-family: 'Open Sans', sans-serif;
|
|
34
|
+
|
|
35
|
+
// VARIÁVEIS LEGADO STANDARD
|
|
36
|
+
--tc-primary: #37b6c4;
|
|
37
|
+
--tc-primary-lighten: #5ab8c2;
|
|
38
|
+
--tc-primary2: #136e92;
|
|
39
|
+
--tc-complemt: #0ADBE3;
|
|
40
|
+
--tc-complemt-2: #136e92;
|
|
41
|
+
--tc-complemt-3: #136e92;
|
|
42
|
+
|
|
43
|
+
//CORES PRIMÁRIAS LEGADO STANDARD
|
|
3
44
|
--c-neutral-50: #FFFFFF;
|
|
4
45
|
--c-neutral-100: #FAFAFA;
|
|
5
46
|
--c-neutral-200: #EEEEEE;
|
|
@@ -10,11 +51,11 @@
|
|
|
10
51
|
--c-neutral-700: #495057;
|
|
11
52
|
--c-neutral-800: #363636;
|
|
12
53
|
--c-neutral-900: #000000;
|
|
13
|
-
--c-primary-300: #
|
|
14
|
-
--c-primary-400: #
|
|
15
|
-
--c-primary-500: #
|
|
16
|
-
--c-primary-600: #
|
|
17
|
-
--c-primary-700: #
|
|
54
|
+
--c-primary-300: #e3fcff;
|
|
55
|
+
--c-primary-400: #98e5ee;
|
|
56
|
+
--c-primary-500: #37B6C4;
|
|
57
|
+
--c-primary-600: #2592AB;
|
|
58
|
+
--c-primary-700: #136E92;
|
|
18
59
|
--c-danger-300: #FDE1D6;
|
|
19
60
|
--c-danger-400: #F48E85;
|
|
20
61
|
--c-danger-500: #DC3545;
|
|
@@ -28,12 +69,54 @@
|
|
|
28
69
|
--c-success-400: #A3E78C;
|
|
29
70
|
--c-success-500: #47B13D;
|
|
30
71
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
72
|
+
body.tc-prime {
|
|
73
|
+
// LEGADO PRIME
|
|
74
|
+
--tc-primary: #6B48FF;
|
|
75
|
+
--tc-primary-lighten: #896DFF;
|
|
76
|
+
--tc-complemt-3: #896DFF;
|
|
77
|
+
--tc-complemt: #896DFF;
|
|
78
|
+
--tc-complemt-2: #3A24B7;
|
|
79
|
+
--tc-primary2: #190D7A;
|
|
80
|
+
|
|
81
|
+
// LEGADO PRIME
|
|
82
|
+
--c-primary-300: #D3C8FF;
|
|
83
|
+
--c-primary-400: #896DFF;
|
|
84
|
+
--c-primary-500: #6B48FF;
|
|
85
|
+
--c-primary-600: #3A24B7;
|
|
86
|
+
--c-primary-700: #190D7A;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
body.tc-standard-modern {
|
|
90
|
+
--f-family: 'Nunito Sans', sans-serif;
|
|
91
|
+
|
|
92
|
+
--tc-primary: #0897E9;
|
|
93
|
+
--tc-primary-lighten: #75D8FF;
|
|
94
|
+
--tc-primary2: #0457A7;
|
|
95
|
+
--tc-complemt: #75D8FF;
|
|
96
|
+
--tc-complemt-2: #0457A7;
|
|
97
|
+
--tc-complemt-3: #0457A7;
|
|
98
|
+
|
|
99
|
+
--c-primary-300: #EAF9FF;
|
|
100
|
+
--c-primary-400: #75D8FF;
|
|
101
|
+
--c-primary-500: #0897E9;
|
|
102
|
+
--c-primary-600: #0457A7;
|
|
103
|
+
--c-primary-700: #012C6F;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
body.tc-prime-modern {
|
|
107
|
+
--f-family: 'Nunito Sans', sans-serif;
|
|
108
|
+
|
|
109
|
+
--tc-primary: #6B48FF;
|
|
110
|
+
--tc-primary-lighten: #896DFF;
|
|
111
|
+
--tc-complemt-3: #896DFF;
|
|
112
|
+
--tc-complemt: #896DFF;
|
|
113
|
+
--tc-complemt-2: #3A24B7;
|
|
114
|
+
--tc-primary2: #190D7A;
|
|
115
|
+
|
|
116
|
+
--c-primary-300: #D3C8FF;
|
|
117
|
+
--c-primary-400: #896DFF;
|
|
118
|
+
--c-primary-500: #6B48FF;
|
|
119
|
+
--c-primary-600: #3A24B7;
|
|
120
|
+
--c-primary-700: #190D7A;
|
|
121
|
+
}
|
|
39
122
|
}
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
|
|
66
66
|
$btn-by-colors:
|
|
67
67
|
("class": "tc-rev-btn--primary-filled", "b-color": var(--c-primary-500), "bg-color": var(--c-primary-500), "color": var(--c-neutral-50), "bg-hover": var(--c-primary-600)),
|
|
68
|
+
("class": "tc-rev-btn--success-filled", "b-color": var(--c-success-500), "bg-color": var(--c-success-500), "color": var(--c-neutral-50), "bg-hover": var(--c-success-500)),
|
|
68
69
|
("class": "tc-rev-btn--light-filled", "b-color": var(--c-neutral-50), "bg-color": var(--c-neutral-50), "color": var(--c-primary-500), "bg-hover": var(--c-neutral-50)),
|
|
69
70
|
("class": "tc-rev-btn--dark-filled", "b-color": var(--c-neutral-900), "bg-color": var(--c-neutral-900), "color": var(--c-neutral-50), "bg-hover": var(--c-neutral-600)),
|
|
70
71
|
("class": "tc-rev-btn--danger-filled", "b-color": var(--c-danger-500), "bg-color": var(--c-danger-500), "color": var(--c-neutral-50), "bg-hover": var(--c-danger-500));
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
height: var(--size-40);
|
|
12
12
|
transition: 200ms ease;
|
|
13
13
|
padding: 0 var(--size-16);
|
|
14
|
+
max-width: 100%;
|
|
14
15
|
|
|
15
16
|
&:hover, &:focus
|
|
16
17
|
{
|
|
@@ -211,6 +212,7 @@ input[type=checkbox].tc-rev-input-checkbox {
|
|
|
211
212
|
height: initial;
|
|
212
213
|
width: initial;
|
|
213
214
|
left: initial;
|
|
215
|
+
top: initial;
|
|
214
216
|
margin: initial;
|
|
215
217
|
border: initial;
|
|
216
218
|
}
|
|
@@ -228,6 +230,10 @@ input[type=checkbox].tc-rev-input-checkbox {
|
|
|
228
230
|
border-width: initial;
|
|
229
231
|
transform: initial;
|
|
230
232
|
}
|
|
233
|
+
|
|
234
|
+
&:checked:after {
|
|
235
|
+
border-color: initial;
|
|
236
|
+
}
|
|
231
237
|
}
|
|
232
238
|
|
|
233
239
|
input[type=checkbox].tc-rev-input-checkbox {
|
|
@@ -245,7 +251,7 @@ input[type=checkbox].tc-rev-input-checkbox {
|
|
|
245
251
|
display: inline-block;
|
|
246
252
|
vertical-align: middle;
|
|
247
253
|
|
|
248
|
-
|
|
254
|
+
&:before {
|
|
249
255
|
content: '';
|
|
250
256
|
display: block;
|
|
251
257
|
width: 100%;
|
|
@@ -259,7 +265,7 @@ input[type=checkbox].tc-rev-input-checkbox {
|
|
|
259
265
|
z-index: 1;
|
|
260
266
|
}
|
|
261
267
|
|
|
262
|
-
|
|
268
|
+
&:after {
|
|
263
269
|
content: '';
|
|
264
270
|
display: block;
|
|
265
271
|
position: absolute;
|
|
@@ -280,11 +286,11 @@ input[type=checkbox].tc-rev-input-checkbox {
|
|
|
280
286
|
background: var(--c-primary-500);
|
|
281
287
|
}
|
|
282
288
|
|
|
283
|
-
&:checked
|
|
289
|
+
&:checked:before {
|
|
284
290
|
background: var(--c-primary-500);
|
|
285
291
|
}
|
|
286
292
|
|
|
287
|
-
&:checked
|
|
293
|
+
&:checked:after {
|
|
288
294
|
background: #fff;
|
|
289
295
|
mask: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5.5L5 9L13 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
|
|
290
296
|
-webkit-mask: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5.5L5 9L13 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
|