@dev-tcloud/tcloud-ui 6.25.0-beta.2 → 6.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +32 -419
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/js/tcloud-ui-app.js +2 -2
- package/lib/tcloud-ui.module.d.ts +53 -54
- package/package.json +1 -1
- package/public-api.d.ts +0 -1
- package/scss/components/custom/table.scss +44 -55
- package/scss/tcloud/custom/forms.scss +0 -1
- package/scss/tcloud/themes/_dark.scss +68 -0
- package/scss/tcloud/themes/themes.scss +3 -0
- package/scss/tcloud-ui/styles/_claus-form.scss +16 -0
- package/docs/tcloud-ui-carousel.md +0 -159
- package/lib/_modules/tcloud-ui-carousel/tcloud-ui-carousel.component.d.ts +0 -134
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, EventEmitter, Input, Output, InjectionToken, Optional, Inject, inject, signal, Pipe, forwardRef, ViewChild, input, effect, Directive, ViewEncapsulation, SkipSelf, ChangeDetectionStrategy, HostListener, ChangeDetectorRef, computed, ApplicationRef, output, model,
|
|
2
|
+
import { Injectable, Component, EventEmitter, Input, Output, InjectionToken, Optional, Inject, inject, signal, Pipe, forwardRef, ViewChild, input, effect, Directive, ViewEncapsulation, SkipSelf, ChangeDetectionStrategy, HostListener, ChangeDetectorRef, computed, ApplicationRef, output, model, ContentChildren, viewChild, EnvironmentInjector, createComponent, ViewContainerRef, NgModule, makeEnvironmentProviders } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
|
|
5
5
|
import { Subject, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, map } from 'rxjs';
|
|
@@ -123,11 +123,11 @@ class TCloudUiAccordionTitleComponent {
|
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiAccordionTitleComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
126
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiAccordionTitleComponent, isStandalone: true, selector: "tcloud-ui-accordion-title", ngImport: i0, template: "<div class=\"tcloud-ui-accordion-title tc-accordion-title\">\n <table class=\"tc-accordion-table\">\n <tr>\n <td class=\"area-title\" (click)=\"toggle_title()\" >\n <ng-content></ng-content>\n </td>\n <td class=\"tc-accordion-actions\">\n <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n </button>\n </td>\n </tr>\n </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--
|
|
126
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiAccordionTitleComponent, isStandalone: true, selector: "tcloud-ui-accordion-title", ngImport: i0, template: "<div class=\"tcloud-ui-accordion-title tc-accordion-title\">\n <table class=\"tc-accordion-table\">\n <tr>\n <td class=\"area-title\" (click)=\"toggle_title()\" >\n <ng-content></ng-content>\n </td>\n <td class=\"tc-accordion-actions\">\n <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n </button>\n </td>\n </tr>\n </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--c-primary-500)}.area-title{width:100;cursor:pointer;color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
127
127
|
}
|
|
128
128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiAccordionTitleComponent, decorators: [{
|
|
129
129
|
type: Component,
|
|
130
|
-
args: [{ selector: 'tcloud-ui-accordion-title', imports: [CommonModule], template: "<div class=\"tcloud-ui-accordion-title tc-accordion-title\">\n <table class=\"tc-accordion-table\">\n <tr>\n <td class=\"area-title\" (click)=\"toggle_title()\" >\n <ng-content></ng-content>\n </td>\n <td class=\"tc-accordion-actions\">\n <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n </button>\n </td>\n </tr>\n </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--
|
|
130
|
+
args: [{ selector: 'tcloud-ui-accordion-title', imports: [CommonModule], template: "<div class=\"tcloud-ui-accordion-title tc-accordion-title\">\n <table class=\"tc-accordion-table\">\n <tr>\n <td class=\"area-title\" (click)=\"toggle_title()\" >\n <ng-content></ng-content>\n </td>\n <td class=\"tc-accordion-actions\">\n <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n </button>\n </td>\n </tr>\n </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--c-primary-500)}.area-title{width:100;cursor:pointer;color:var(--c-primary-500)}\n"] }]
|
|
131
131
|
}], ctorParameters: () => [{ type: TCloudUiAccordionService }] });
|
|
132
132
|
|
|
133
133
|
class TCloudUiAccordionComponent {
|
|
@@ -184,13 +184,13 @@ class TCloudUiAccordionComponent {
|
|
|
184
184
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiAccordionComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
185
185
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiAccordionComponent, isStandalone: true, selector: "tcloud-ui-accordion", inputs: { disabled: "disabled", show: "show", loading: "loading" }, outputs: { onAction: "onAction" }, providers: [
|
|
186
186
|
TCloudUiAccordionService
|
|
187
|
-
], ngImport: i0, template: "<div class=\"tcloud-ui-accordion tc-accordion bg-default\" [class.tc-accordion-disabled]=\"disabled\">\n <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid
|
|
187
|
+
], ngImport: i0, template: "<div class=\"tcloud-ui-accordion tc-accordion bg-default\" [class.tc-accordion-disabled]=\"disabled\">\n <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid var(--c-neutral-300);padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
188
188
|
}
|
|
189
189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiAccordionComponent, decorators: [{
|
|
190
190
|
type: Component,
|
|
191
191
|
args: [{ selector: 'tcloud-ui-accordion', providers: [
|
|
192
192
|
TCloudUiAccordionService
|
|
193
|
-
], imports: [CommonModule, TCloudUiAccordionBodyComponent, TCloudUiAccordionTitleComponent], template: "<div class=\"tcloud-ui-accordion tc-accordion bg-default\" [class.tc-accordion-disabled]=\"disabled\">\n <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid
|
|
193
|
+
], imports: [CommonModule, TCloudUiAccordionBodyComponent, TCloudUiAccordionTitleComponent], template: "<div class=\"tcloud-ui-accordion tc-accordion bg-default\" [class.tc-accordion-disabled]=\"disabled\">\n <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid var(--c-neutral-300);padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{opacity:.6}\n"] }]
|
|
194
194
|
}], ctorParameters: () => [{ type: TCloudUiAccordionService }], propDecorators: { disabled: [{
|
|
195
195
|
type: Input
|
|
196
196
|
}], show: [{
|
|
@@ -510,7 +510,7 @@ class TCloudUiChoiceIssuesComponent {
|
|
|
510
510
|
return '_' + Math.random().toString(36).substr(2, 9);
|
|
511
511
|
}
|
|
512
512
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiChoiceIssuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
513
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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(--
|
|
513
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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(--c-neutral-600)}.sub-titulo{color:var(--c-neutral-500)}.box{border:1px solid var(--c-neutral-300);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(--c-primary-500);color:#fff}.form-fieldset label{font-size:11px;background:var(--c-neutral-200);color:var(--c-neutral-700);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:var(--c-primary-300)!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" }] }); }
|
|
514
514
|
}
|
|
515
515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiChoiceIssuesComponent, decorators: [{
|
|
516
516
|
type: Component,
|
|
@@ -518,7 +518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
518
518
|
CommonModule,
|
|
519
519
|
FormsModule,
|
|
520
520
|
I18nTranslatePipe
|
|
521
|
-
], 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(--
|
|
521
|
+
], 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(--c-neutral-600)}.sub-titulo{color:var(--c-neutral-500)}.box{border:1px solid var(--c-neutral-300);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(--c-primary-500);color:#fff}.form-fieldset label{font-size:11px;background:var(--c-neutral-200);color:var(--c-neutral-700);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:var(--c-primary-300)!important}.choice-description{width:100%}.choice-action{width:100%;max-width:200px}\n"] }]
|
|
522
522
|
}], ctorParameters: () => [], propDecorators: { view: [{
|
|
523
523
|
type: Input
|
|
524
524
|
}], titulo: [{
|
|
@@ -620,11 +620,11 @@ class TCloudUiDataListOptionComponent {
|
|
|
620
620
|
}
|
|
621
621
|
}
|
|
622
622
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDataListOptionComponent, deps: [{ token: DataListService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
623
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiDataListOptionComponent, isStandalone: true, selector: "tcloud-ui-data-list-option", inputs: { disabled: "disabled", value: "value" }, outputs: { selected: "selected" }, ngImport: i0, template: "<button \n [disabled]=\"disabled\"\n [title]=\"select_options.description\"\n id=\"{{id}}\"\n [attr.data-description]=\"select_options.description\"\n [attr.data-actived-value]=\"actived_value\"\n class=\"tcloud-ui-data-list-option dropdown-item\" \n [class.null-value]=\"value === undefined || value === null || value === ''\"\n [class.active]=\"value === actived_value\" \n [class.option-disabled]=\"disabled\"\n type=\"button\" \n [value]=\"value\"\n (click)=\"setSelectedItem(value)\" >\n <ng-content></ng-content>\n</button>\n", styles: ["button{color
|
|
623
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiDataListOptionComponent, isStandalone: true, selector: "tcloud-ui-data-list-option", inputs: { disabled: "disabled", value: "value" }, outputs: { selected: "selected" }, ngImport: i0, template: "<button \n [disabled]=\"disabled\"\n [title]=\"select_options.description\"\n id=\"{{id}}\"\n [attr.data-description]=\"select_options.description\"\n [attr.data-actived-value]=\"actived_value\"\n class=\"tcloud-ui-data-list-option dropdown-item\" \n [class.null-value]=\"value === undefined || value === null || value === ''\"\n [class.active]=\"value === actived_value\" \n [class.option-disabled]=\"disabled\"\n type=\"button\" \n [value]=\"value\"\n (click)=\"setSelectedItem(value)\" >\n <ng-content></ng-content>\n</button>\n", styles: ["button{color:var(--c-neutral-600);width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:var(--c-primary-300);color:var(--c-neutral-700)}button.active{background-color:var(--c-primary-400);color:var(--c-neutral-700)}.null-value{height:35px}.option-disabled{background-color:var(--c-neutral-50)!important;color:var(--c-neutral-400)!important;cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
624
624
|
}
|
|
625
625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDataListOptionComponent, decorators: [{
|
|
626
626
|
type: Component,
|
|
627
|
-
args: [{ selector: 'tcloud-ui-data-list-option', imports: [CommonModule], template: "<button \n [disabled]=\"disabled\"\n [title]=\"select_options.description\"\n id=\"{{id}}\"\n [attr.data-description]=\"select_options.description\"\n [attr.data-actived-value]=\"actived_value\"\n class=\"tcloud-ui-data-list-option dropdown-item\" \n [class.null-value]=\"value === undefined || value === null || value === ''\"\n [class.active]=\"value === actived_value\" \n [class.option-disabled]=\"disabled\"\n type=\"button\" \n [value]=\"value\"\n (click)=\"setSelectedItem(value)\" >\n <ng-content></ng-content>\n</button>\n", styles: ["button{color
|
|
627
|
+
args: [{ selector: 'tcloud-ui-data-list-option', imports: [CommonModule], template: "<button \n [disabled]=\"disabled\"\n [title]=\"select_options.description\"\n id=\"{{id}}\"\n [attr.data-description]=\"select_options.description\"\n [attr.data-actived-value]=\"actived_value\"\n class=\"tcloud-ui-data-list-option dropdown-item\" \n [class.null-value]=\"value === undefined || value === null || value === ''\"\n [class.active]=\"value === actived_value\" \n [class.option-disabled]=\"disabled\"\n type=\"button\" \n [value]=\"value\"\n (click)=\"setSelectedItem(value)\" >\n <ng-content></ng-content>\n</button>\n", styles: ["button{color:var(--c-neutral-600);width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:var(--c-primary-300);color:var(--c-neutral-700)}button.active{background-color:var(--c-primary-400);color:var(--c-neutral-700)}.null-value{height:35px}.option-disabled{background-color:var(--c-neutral-50)!important;color:var(--c-neutral-400)!important;cursor:not-allowed!important}\n"] }]
|
|
628
628
|
}], ctorParameters: () => [{ type: DataListService }], propDecorators: { disabled: [{
|
|
629
629
|
type: Input
|
|
630
630
|
}], value: [{
|
|
@@ -979,14 +979,14 @@ class TCloudUiDataListComponent {
|
|
|
979
979
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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: [
|
|
980
980
|
DataListService,
|
|
981
981
|
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8
|
|
982
|
-
], 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
|
|
982
|
+
], 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:var(--c-neutral-400);text-transform:none!important}.in-border{border:1px solid var(--c-neutral-300)!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:var(--c-neutral-50);border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:var(--c-neutral-600);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 var(--c-neutral-300);background-color:var(--c-neutral-50);position:absolute;z-index:10}.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:var(--c-neutral-600)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);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(--c-neutral-300);padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:var(--c-neutral-200)!important;border:1px solid var(--c-neutral-300)!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:var(--c-neutral-400)!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"] }] }); }
|
|
983
983
|
}
|
|
984
984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
|
|
985
985
|
type: Component,
|
|
986
986
|
args: [{ selector: 'tcloud-ui-data-list', providers: [
|
|
987
987
|
DataListService,
|
|
988
988
|
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8
|
|
989
|
-
], 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
|
|
989
|
+
], 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:var(--c-neutral-400);text-transform:none!important}.in-border{border:1px solid var(--c-neutral-300)!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:var(--c-neutral-50);border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:var(--c-neutral-600);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 var(--c-neutral-300);background-color:var(--c-neutral-50);position:absolute;z-index:10}.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:var(--c-neutral-600)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);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(--c-neutral-300);padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:var(--c-neutral-200)!important;border:1px solid var(--c-neutral-300)!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:var(--c-neutral-400)!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"] }]
|
|
990
990
|
}], ctorParameters: () => [{ type: DataListService }, { type: i2.FormBuilder }], propDecorators: { placeholder: [{
|
|
991
991
|
type: Input
|
|
992
992
|
}], disabled: [{
|
|
@@ -2358,11 +2358,11 @@ class TCloudUiDatepickerTimeComponent {
|
|
|
2358
2358
|
this.onTouchedCallback = fn;
|
|
2359
2359
|
}
|
|
2360
2360
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDatepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2361
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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
|
|
2361
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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:var(--c-neutral-50);border:1px solid var(--c-neutral-300);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:var(--c-neutral-500);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:var(--c-neutral-600);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:var(--c-neutral-50);cursor:pointer;padding:0;color:var(--c-neutral-400);width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:var(--c-danger-500)!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:var(--c-neutral-500)}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:var(--c-neutral-50);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"] }] }); }
|
|
2362
2362
|
}
|
|
2363
2363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDatepickerTimeComponent, decorators: [{
|
|
2364
2364
|
type: Component,
|
|
2365
|
-
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
|
|
2365
|
+
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:var(--c-neutral-50);border:1px solid var(--c-neutral-300);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:var(--c-neutral-500);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:var(--c-neutral-600);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:var(--c-neutral-50);cursor:pointer;padding:0;color:var(--c-neutral-400);width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:var(--c-danger-500)!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:var(--c-neutral-500)}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:var(--c-neutral-50);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"] }]
|
|
2366
2366
|
}], propDecorators: { ngModel: [{
|
|
2367
2367
|
type: Input
|
|
2368
2368
|
}], ngModelChange: [{
|
|
@@ -2594,11 +2594,11 @@ class TCloudUiRangeDateComponent {
|
|
|
2594
2594
|
return false;
|
|
2595
2595
|
}
|
|
2596
2596
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiRangeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2597
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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
|
|
2597
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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:var(--c-neutral-700);background-color:var(--c-neutral-50);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 var(--c-neutral-300);background-color:var(--c-neutral-50);font-size:17px;line-height:1;cursor:pointer;color:var(--c-neutral-600);height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:var(--c-neutral-700)}.active{background-color:var(--c-neutral-200)!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"] }] }); }
|
|
2598
2598
|
}
|
|
2599
2599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiRangeDateComponent, decorators: [{
|
|
2600
2600
|
type: Component,
|
|
2601
|
-
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
|
|
2601
|
+
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:var(--c-neutral-700);background-color:var(--c-neutral-50);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 var(--c-neutral-300);background-color:var(--c-neutral-50);font-size:17px;line-height:1;cursor:pointer;color:var(--c-neutral-600);height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:var(--c-neutral-700)}.active{background-color:var(--c-neutral-200)!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\n"] }]
|
|
2602
2602
|
}], ctorParameters: () => [], propDecorators: { onChange: [{
|
|
2603
2603
|
type: Output
|
|
2604
2604
|
}], defaultValuePeriodStartStop: [{
|
|
@@ -3142,11 +3142,11 @@ class TCloudUiFiltersComponent {
|
|
|
3142
3142
|
this.result.emit(data);
|
|
3143
3143
|
}
|
|
3144
3144
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }, { token: TCloudUiLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3145
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiFiltersComponent, isStandalone: true, selector: "tcloud-ui-filters", inputs: { border: "border", data: "data", filters: "filters", submitText: "submitText", btnSubmitClass: "btnSubmitClass", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive", useRangeDate: "useRangeDate", useFilterAccept: "useFilterAccept" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, providers: [DatePipe], viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter {{layout}}\" [class.tc-rev-filters]=\"layout === 'modern'\" [class.tcloud-ui-filters]=\"layout === 'classic'\" [class.no-border]=\"!border\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n <ng-container *ngIf=\"item.type === 'date'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }} \n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"date\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"datetime-local\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'date-local'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker\n #_input\n name=\"input_{{i+1}}\"\n [modeInput]=\"true\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n </tcloud-ui-datepicker>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n <!-- PERIOD RANGE DATE -->\n <ng-container *ngIf=\"item.id === 'start'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )\" class=\"fas fa-filter icon-filter\"></i> </div>\n <tcloud-ui-range-date\n #_range_date ngModel name=\"input_{{i+1}}\"\n [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n [descriptionStart]=\"descriptionStart\"\n [descriptionStop]=\"descriptionStop\"\n required\n (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n </tcloud-ui-range-date>\n </div>\n </ng-container>\n <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">\n <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">\n </ng-container>\n\n <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker-time\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n (eventChange)=\"searchIn(item, _input)\" >\n </tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local' && item.type !== 'datetime' && item.type !== 'date'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"{{ (item.type === 'number') ? 'number' : (item.type) ? item.type : 'text' }}\"\n class=\"tc-form-control\"\n (keyup)=\"searchIn(item, $event)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <select\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n (change)=\"searchIn(item, $event)\">\n <ng-container *ngIf=\"typeof item?.selectFirstOptionHidden === 'undefined' || !item?.selectFirstOptionHidden\">\n <option [ngValue]=\"\"></option>\n </ng-container> \n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n\n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis\" title=\"{{ item.description }}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"area-input-checkbox\">\n <div class=\"tc-form-control\" tcloudForm>\n <label>\n <span>{{ item.placeholder }}</span>\n <input\n tcloudForm\n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"checkbox\"\n (change)=\"searchIn(item, _input.checked)\">\n </label>\n </div>\n </div>\n </div>\n\n </ng-container>\n\n\n </ng-container>\n\n <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n <pre>start_stop: {{ start_stop }}</pre>\n <pre>start_stop_width: {{ start_stop_width }}</pre>\n <pre>start_stop_und: {{ start_stop_und }}</pre>\n-->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--tc-primary)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.area-input-checkbox div.tc-form-control{height:40px}.m-description{margin-bottom:3px}input{color:#535353}input[type=text],input[type=number],select{height:40px!important}.type-hidden{display:none;width:0px!important}.box-type-global_vars{display:none!important;width:0px!important}.tc-title-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-border{border:none!important}.tc-rev-filters select,.tc-rev-filters input[type=text],.tc-rev-filters input[type=number],.tc-rev-filters input[type=email] input[type=password],.tc-rev-filters input[type=date]{background-color:#fff;width:100%!important}.tc-rev-filters input[type=checkbox]{position:inherit;cursor:pointer;margin:0!important}.tc-rev-filters .area-input-checkbox label span{position:relative;bottom:14px;left:-5px}\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.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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TCloudUiRangeDateComponent, selector: "tcloud-ui-range-date", inputs: ["defaultValuePeriodStartStop", "required", "descriptionStart", "descriptionStop"], outputs: ["onChange"] }, { 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: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "minDate", "maxDate", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }, { kind: "directive", type: TCloudUiFormDirective, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
|
|
3145
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiFiltersComponent, isStandalone: true, selector: "tcloud-ui-filters", inputs: { border: "border", data: "data", filters: "filters", submitText: "submitText", btnSubmitClass: "btnSubmitClass", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive", useRangeDate: "useRangeDate", useFilterAccept: "useFilterAccept" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, providers: [DatePipe], viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter {{layout}}\" [class.tc-rev-filters]=\"layout === 'modern'\" [class.tcloud-ui-filters]=\"layout === 'classic'\" [class.no-border]=\"!border\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n <ng-container *ngIf=\"item.type === 'date'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }} \n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"date\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"datetime-local\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'date-local'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker\n #_input\n name=\"input_{{i+1}}\"\n [modeInput]=\"true\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n </tcloud-ui-datepicker>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n <!-- PERIOD RANGE DATE -->\n <ng-container *ngIf=\"item.id === 'start'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )\" class=\"fas fa-filter icon-filter\"></i> </div>\n <tcloud-ui-range-date\n #_range_date ngModel name=\"input_{{i+1}}\"\n [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n [descriptionStart]=\"descriptionStart\"\n [descriptionStop]=\"descriptionStop\"\n required\n (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n </tcloud-ui-range-date>\n </div>\n </ng-container>\n <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">\n <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">\n </ng-container>\n\n <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker-time\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n (eventChange)=\"searchIn(item, _input)\" >\n </tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local' && item.type !== 'datetime' && item.type !== 'date'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"{{ (item.type === 'number') ? 'number' : (item.type) ? item.type : 'text' }}\"\n class=\"tc-form-control\"\n (keyup)=\"searchIn(item, $event)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <select\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n (change)=\"searchIn(item, $event)\">\n <ng-container *ngIf=\"typeof item?.selectFirstOptionHidden === 'undefined' || !item?.selectFirstOptionHidden\">\n <option [ngValue]=\"\"></option>\n </ng-container> \n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n\n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis\" title=\"{{ item.description }}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"area-input-checkbox\">\n <div class=\"tc-form-control\" tcloudForm>\n <label>\n <span>{{ item.placeholder }}</span>\n <input\n tcloudForm\n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"checkbox\"\n (change)=\"searchIn(item, _input.checked)\">\n </label>\n </div>\n </div>\n </div>\n\n </ng-container>\n\n\n </ng-container>\n\n <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n <pre>start_stop: {{ start_stop }}</pre>\n <pre>start_stop_width: {{ start_stop_width }}</pre>\n <pre>start_stop_und: {{ start_stop_und }}</pre>\n-->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid var(--c-neutral-200);border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:var(--c-neutral-50);border:none;cursor:pointer;color:var(--c-neutral-400)}.to-hide{display:none}.icon-filter{color:var(--c-neutral-400)}.to-active{color:var(--c-primary-500)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:var(--c-neutral-500)}.area-input-checkbox div.tc-form-control{height:40px}.m-description{margin-bottom:3px}input{color:var(--c-neutral-700)}input[type=text],input[type=number],input[type=date],select{height:40px!important;background-color:var(--c-neutral-50);color:var(--c-neutral-700)}.type-hidden{display:none;width:0px!important}.box-type-global_vars{display:none!important;width:0px!important}.tc-title-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-border{border:none!important}.tc-rev-filters select,.tc-rev-filters input[type=text],.tc-rev-filters input[type=number],.tc-rev-filters input[type=email] input[type=password],.tc-rev-filters input[type=date]{background-color:var(--c-neutral-50);width:100%!important}.tc-rev-filters input[type=checkbox]{position:inherit;cursor:pointer;margin:0!important}.tc-rev-filters .area-input-checkbox label span{position:relative;bottom:14px;left:-5px}\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.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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TCloudUiRangeDateComponent, selector: "tcloud-ui-range-date", inputs: ["defaultValuePeriodStartStop", "required", "descriptionStart", "descriptionStop"], outputs: ["onChange"] }, { 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: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "minDate", "maxDate", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }, { kind: "directive", type: TCloudUiFormDirective, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
|
|
3146
3146
|
}
|
|
3147
3147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
|
|
3148
3148
|
type: Component,
|
|
3149
|
-
args: [{ selector: 'tcloud-ui-filters', standalone: true, imports: [CommonModule, FormsModule, TCloudUiRangeDateComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiFormDirective], providers: [DatePipe], template: "<div *ngIf=\"show_filters\" class=\"area-filter {{layout}}\" [class.tc-rev-filters]=\"layout === 'modern'\" [class.tcloud-ui-filters]=\"layout === 'classic'\" [class.no-border]=\"!border\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n <ng-container *ngIf=\"item.type === 'date'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }} \n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"date\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"datetime-local\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'date-local'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker\n #_input\n name=\"input_{{i+1}}\"\n [modeInput]=\"true\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n </tcloud-ui-datepicker>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n <!-- PERIOD RANGE DATE -->\n <ng-container *ngIf=\"item.id === 'start'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )\" class=\"fas fa-filter icon-filter\"></i> </div>\n <tcloud-ui-range-date\n #_range_date ngModel name=\"input_{{i+1}}\"\n [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n [descriptionStart]=\"descriptionStart\"\n [descriptionStop]=\"descriptionStop\"\n required\n (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n </tcloud-ui-range-date>\n </div>\n </ng-container>\n <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">\n <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">\n </ng-container>\n\n <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker-time\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n (eventChange)=\"searchIn(item, _input)\" >\n </tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local' && item.type !== 'datetime' && item.type !== 'date'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"{{ (item.type === 'number') ? 'number' : (item.type) ? item.type : 'text' }}\"\n class=\"tc-form-control\"\n (keyup)=\"searchIn(item, $event)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <select\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n (change)=\"searchIn(item, $event)\">\n <ng-container *ngIf=\"typeof item?.selectFirstOptionHidden === 'undefined' || !item?.selectFirstOptionHidden\">\n <option [ngValue]=\"\"></option>\n </ng-container> \n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n\n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis\" title=\"{{ item.description }}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"area-input-checkbox\">\n <div class=\"tc-form-control\" tcloudForm>\n <label>\n <span>{{ item.placeholder }}</span>\n <input\n tcloudForm\n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"checkbox\"\n (change)=\"searchIn(item, _input.checked)\">\n </label>\n </div>\n </div>\n </div>\n\n </ng-container>\n\n\n </ng-container>\n\n <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n <pre>start_stop: {{ start_stop }}</pre>\n <pre>start_stop_width: {{ start_stop_width }}</pre>\n <pre>start_stop_und: {{ start_stop_und }}</pre>\n-->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--tc-primary)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.area-input-checkbox div.tc-form-control{height:40px}.m-description{margin-bottom:3px}input{color:#535353}input[type=text],input[type=number],select{height:40px!important}.type-hidden{display:none;width:0px!important}.box-type-global_vars{display:none!important;width:0px!important}.tc-title-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-border{border:none!important}.tc-rev-filters select,.tc-rev-filters input[type=text],.tc-rev-filters input[type=number],.tc-rev-filters input[type=email] input[type=password],.tc-rev-filters input[type=date]{background-color:#fff;width:100%!important}.tc-rev-filters input[type=checkbox]{position:inherit;cursor:pointer;margin:0!important}.tc-rev-filters .area-input-checkbox label span{position:relative;bottom:14px;left:-5px}\n"] }]
|
|
3149
|
+
args: [{ selector: 'tcloud-ui-filters', standalone: true, imports: [CommonModule, FormsModule, TCloudUiRangeDateComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiFormDirective], providers: [DatePipe], template: "<div *ngIf=\"show_filters\" class=\"area-filter {{layout}}\" [class.tc-rev-filters]=\"layout === 'modern'\" [class.tcloud-ui-filters]=\"layout === 'classic'\" [class.no-border]=\"!border\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n <ng-container *ngIf=\"item.type === 'date'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }} \n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"date\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"datetime-local\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'date-local'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker\n #_input\n name=\"input_{{i+1}}\"\n [modeInput]=\"true\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n </tcloud-ui-datepicker>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n <!-- PERIOD RANGE DATE -->\n <ng-container *ngIf=\"item.id === 'start'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )\" class=\"fas fa-filter icon-filter\"></i> </div>\n <tcloud-ui-range-date\n #_range_date ngModel name=\"input_{{i+1}}\"\n [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n [descriptionStart]=\"descriptionStart\"\n [descriptionStop]=\"descriptionStop\"\n required\n (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n </tcloud-ui-range-date>\n </div>\n </ng-container>\n <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">\n <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">\n </ng-container>\n\n <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker-time\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n (eventChange)=\"searchIn(item, _input)\" >\n </tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local' && item.type !== 'datetime' && item.type !== 'date'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"{{ (item.type === 'number') ? 'number' : (item.type) ? item.type : 'text' }}\"\n class=\"tc-form-control\"\n (keyup)=\"searchIn(item, $event)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n <i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n </div>\n <div class=\"box-type-{{item.type}}\">\n <select\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n (change)=\"searchIn(item, $event)\">\n <ng-container *ngIf=\"typeof item?.selectFirstOptionHidden === 'undefined' || !item?.selectFirstOptionHidden\">\n <option [ngValue]=\"\"></option>\n </ng-container> \n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n\n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis\" title=\"{{ item.description }}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div class=\"area-input-checkbox\">\n <div class=\"tc-form-control\" tcloudForm>\n <label>\n <span>{{ item.placeholder }}</span>\n <input\n tcloudForm\n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"checkbox\"\n (change)=\"searchIn(item, _input.checked)\">\n </label>\n </div>\n </div>\n </div>\n\n </ng-container>\n\n\n </ng-container>\n\n <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n <pre>start_stop: {{ start_stop }}</pre>\n <pre>start_stop_width: {{ start_stop_width }}</pre>\n <pre>start_stop_und: {{ start_stop_und }}</pre>\n-->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid var(--c-neutral-200);border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:var(--c-neutral-50);border:none;cursor:pointer;color:var(--c-neutral-400)}.to-hide{display:none}.icon-filter{color:var(--c-neutral-400)}.to-active{color:var(--c-primary-500)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:var(--c-neutral-500)}.area-input-checkbox div.tc-form-control{height:40px}.m-description{margin-bottom:3px}input{color:var(--c-neutral-700)}input[type=text],input[type=number],input[type=date],select{height:40px!important;background-color:var(--c-neutral-50);color:var(--c-neutral-700)}.type-hidden{display:none;width:0px!important}.box-type-global_vars{display:none!important;width:0px!important}.tc-title-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-border{border:none!important}.tc-rev-filters select,.tc-rev-filters input[type=text],.tc-rev-filters input[type=number],.tc-rev-filters input[type=email] input[type=password],.tc-rev-filters input[type=date]{background-color:var(--c-neutral-50);width:100%!important}.tc-rev-filters input[type=checkbox]{position:inherit;cursor:pointer;margin:0!important}.tc-rev-filters .area-input-checkbox label span{position:relative;bottom:14px;left:-5px}\n"] }]
|
|
3150
3150
|
}], ctorParameters: () => [{ type: i1.DatePipe }, { type: TCloudUiLayoutService }], propDecorators: { _formulario: [{
|
|
3151
3151
|
type: ViewChild,
|
|
3152
3152
|
args: ['_formulario']
|
|
@@ -3774,7 +3774,7 @@ class TCloudUiModalComponent {
|
|
|
3774
3774
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TCloudUiModalComponent, isStandalone: true, selector: "tcloud-ui-modal", inputs: { confirm: "confirm", confirmText: "confirmText", confirmInput: "confirmInput", autoClose: "autoClose", title: "title", maxWidth: "maxWidth", position: "position", sticky: "sticky", window: "window", open: "open", loading: "loading" }, outputs: { openChange: "openChange", toConfirm: "toConfirm", toCancel: "toCancel", toAction: "toAction" }, providers: [
|
|
3775
3775
|
TcloudModalService,
|
|
3776
3776
|
TCloudUiLayoutService
|
|
3777
|
-
], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n\n @if( layout === 'classic'){\n <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n }@else{\n <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n }\n\n </div>\n\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n <ng-content></ng-content>\n\n </div>\n </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid
|
|
3777
|
+
], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n\n @if( layout === 'classic'){\n <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n }@else{\n <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n }\n\n </div>\n\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n <ng-content></ng-content>\n\n </div>\n </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid var(--c-neutral-300);position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);padding:12px;border-radius:8px;margin:auto;width:100%;transition:max-width .3s ease-out}@media (prefers-reduced-motion: reduce){.tc-modal{transition:none}}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--c-neutral-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:var(--c-neutral-500)!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
3778
3778
|
trigger('fade', [
|
|
3779
3779
|
transition('void => *', [
|
|
3780
3780
|
style({ opacity: 0, transform: '{{enterTransform}}' }),
|
|
@@ -3801,7 +3801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
3801
3801
|
animate('0.3s ease-out', style({ opacity: 0, transform: '{{leaveTransform}}' }))
|
|
3802
3802
|
], { params: { leaveTransform: 'translateY(-38%)' } })
|
|
3803
3803
|
])
|
|
3804
|
-
], standalone: true, imports: [CommonModule], template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n\n @if( layout === 'classic'){\n <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n }@else{\n <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n }\n\n </div>\n\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n <ng-content></ng-content>\n\n </div>\n </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid
|
|
3804
|
+
], standalone: true, imports: [CommonModule], template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n <div class=\"tc-modal tc-modal-shadow\" [style.max-width.px]=\"maxWidth\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n\n @if( layout === 'classic'){\n <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n }@else{\n <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n }\n\n </div>\n\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n <ng-content></ng-content>\n\n </div>\n </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid var(--c-neutral-300);position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);padding:12px;border-radius:8px;margin:auto;width:100%;transition:max-width .3s ease-out}@media (prefers-reduced-motion: reduce){.tc-modal{transition:none}}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--c-neutral-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:var(--c-neutral-500)!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"] }]
|
|
3805
3805
|
}], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { confirm: [{
|
|
3806
3806
|
type: Input
|
|
3807
3807
|
}], confirmText: [{
|
|
@@ -3863,11 +3863,11 @@ class TCloudUiModalHeaderComponent {
|
|
|
3863
3863
|
this._tcloudModalService.toMode(this.mode);
|
|
3864
3864
|
}
|
|
3865
3865
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiModalHeaderComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3866
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiModalHeaderComponent, isStandalone: true, selector: "tcloud-ui-modal-header", inputs: { mode: "mode", title: "title" }, ngImport: i0, template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\n <h4 [class.text-neutral-700]=\"mode === 'colorless'\" *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n <ng-content></ng-content>\n <hr>\n</div>\n", styles: ["h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.tc-modal-header{padding:12px;color:#fff;margin:-12px -12px 15px;border-radius:7px 7px 0 0}hr{display:none}.tc-mode-success{background
|
|
3866
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiModalHeaderComponent, isStandalone: true, selector: "tcloud-ui-modal-header", inputs: { mode: "mode", title: "title" }, ngImport: i0, template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\n <h4 [class.text-neutral-700]=\"mode === 'colorless'\" *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n <ng-content></ng-content>\n <hr>\n</div>\n", styles: ["h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.tc-modal-header{padding:12px;color:#fff;margin:-12px -12px 15px;border-radius:7px 7px 0 0}hr{display:none}.tc-mode-success{background:var(--c-success-500);color:#fff}.tc-mode-info{background:var(--c-primary-500);color:#fff}.tc-mode-danger{background:var(--c-danger-500);color:#fff}.tc-mode-warning{background:var(--c-alert-500);color:#fff}.tc-mode-colorless{color:var(--c-neutral-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
3867
3867
|
}
|
|
3868
3868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiModalHeaderComponent, decorators: [{
|
|
3869
3869
|
type: Component,
|
|
3870
|
-
args: [{ selector: 'tcloud-ui-modal-header', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\n <h4 [class.text-neutral-700]=\"mode === 'colorless'\" *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n <ng-content></ng-content>\n <hr>\n</div>\n", styles: ["h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.tc-modal-header{padding:12px;color:#fff;margin:-12px -12px 15px;border-radius:7px 7px 0 0}hr{display:none}.tc-mode-success{background
|
|
3870
|
+
args: [{ selector: 'tcloud-ui-modal-header', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\n <h4 [class.text-neutral-700]=\"mode === 'colorless'\" *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n <ng-content></ng-content>\n <hr>\n</div>\n", styles: ["h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.tc-modal-header{padding:12px;color:#fff;margin:-12px -12px 15px;border-radius:7px 7px 0 0}hr{display:none}.tc-mode-success{background:var(--c-success-500);color:#fff}.tc-mode-info{background:var(--c-primary-500);color:#fff}.tc-mode-danger{background:var(--c-danger-500);color:#fff}.tc-mode-warning{background:var(--c-alert-500);color:#fff}.tc-mode-colorless{color:var(--c-neutral-600)}\n"] }]
|
|
3871
3871
|
}], ctorParameters: () => [{ type: TcloudModalService }], propDecorators: { mode: [{
|
|
3872
3872
|
type: Input
|
|
3873
3873
|
}], title: [{
|
|
@@ -3986,11 +3986,11 @@ class TCloudUiModalFooterComponent {
|
|
|
3986
3986
|
}
|
|
3987
3987
|
}
|
|
3988
3988
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiModalFooterComponent, deps: [{ token: TCloudUiLayoutService }, { token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3989
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiModalFooterComponent, isStandalone: true, selector: "tcloud-ui-modal-footer", inputs: { actions: "actions", btnCloseText: "btnCloseText", btnCancelText: "btnCancelText", btnConfirmText: "btnConfirmText" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText && param_confirm.confirmInput\">\n <p>{{ type_the_word }} <strong>"{{ param_confirm.confirmText }}"</strong> {{ to_confirm }}.</p>\n \n <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n <input \n tcloudForm\n [disabled]=\"loading\"\n placeholder=\"{{ param_confirm.confirmText }}\"\n name=\"txt_value\" \n [(ngModel)]=\"txt_value\" \n type=\"text\" \n class=\"tc-form-confirm tc-form-control\" \n required \n [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n </form>\n\n </div>\n \n <hr>\n\n <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n <ng-container *ngIf=\"actions\">\n <!-- {{ param_confirm | json }} -->\n <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n <button [disabled]=\"(((txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()) || loading) && param_confirm.confirmInput\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" tcloudButton=\"filled\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n </ng-container>\n </div>\n</div>\n", styles: [".actions-footer{text-align:right;height:42px}.ng-valid.ng-touched.different-text{border-color
|
|
3989
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiModalFooterComponent, isStandalone: true, selector: "tcloud-ui-modal-footer", inputs: { actions: "actions", btnCloseText: "btnCloseText", btnCancelText: "btnCancelText", btnConfirmText: "btnConfirmText" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText && param_confirm.confirmInput\">\n <p>{{ type_the_word }} <strong>"{{ param_confirm.confirmText }}"</strong> {{ to_confirm }}.</p>\n \n <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n <input \n tcloudForm\n [disabled]=\"loading\"\n placeholder=\"{{ param_confirm.confirmText }}\"\n name=\"txt_value\" \n [(ngModel)]=\"txt_value\" \n type=\"text\" \n class=\"tc-form-confirm tc-form-control\" \n required \n [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n </form>\n\n </div>\n \n <hr>\n\n <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n <ng-container *ngIf=\"actions\">\n <!-- {{ param_confirm | json }} -->\n <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n <button [disabled]=\"(((txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()) || loading) && param_confirm.confirmInput\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" tcloudButton=\"filled\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n </ng-container>\n </div>\n</div>\n", styles: [".actions-footer{text-align:right;height:42px}.ng-valid.ng-touched.different-text{border-color:var(--c-alert-500)}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}.margin-l-5{margin-left:5px}.tc-form-confirm{max-width:240px}\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.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: "directive", type: TCloudUiButtonDirective, selector: "[tcloudButton]", inputs: ["color", "size", "fullWidth", "tcloudButton"] }, { kind: "directive", type: TCloudUiFormDirective, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
|
|
3990
3990
|
}
|
|
3991
3991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiModalFooterComponent, decorators: [{
|
|
3992
3992
|
type: Component,
|
|
3993
|
-
args: [{ selector: 'tcloud-ui-modal-footer', standalone: true, imports: [CommonModule, FormsModule, TCloudUiButtonDirective, TCloudUiFormDirective], template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText && param_confirm.confirmInput\">\n <p>{{ type_the_word }} <strong>"{{ param_confirm.confirmText }}"</strong> {{ to_confirm }}.</p>\n \n <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n <input \n tcloudForm\n [disabled]=\"loading\"\n placeholder=\"{{ param_confirm.confirmText }}\"\n name=\"txt_value\" \n [(ngModel)]=\"txt_value\" \n type=\"text\" \n class=\"tc-form-confirm tc-form-control\" \n required \n [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n </form>\n\n </div>\n \n <hr>\n\n <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n <ng-container *ngIf=\"actions\">\n <!-- {{ param_confirm | json }} -->\n <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n <button [disabled]=\"(((txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()) || loading) && param_confirm.confirmInput\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" tcloudButton=\"filled\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n </ng-container>\n </div>\n</div>\n", styles: [".actions-footer{text-align:right;height:42px}.ng-valid.ng-touched.different-text{border-color
|
|
3993
|
+
args: [{ selector: 'tcloud-ui-modal-footer', standalone: true, imports: [CommonModule, FormsModule, TCloudUiButtonDirective, TCloudUiFormDirective], template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText && param_confirm.confirmInput\">\n <p>{{ type_the_word }} <strong>"{{ param_confirm.confirmText }}"</strong> {{ to_confirm }}.</p>\n \n <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n <input \n tcloudForm\n [disabled]=\"loading\"\n placeholder=\"{{ param_confirm.confirmText }}\"\n name=\"txt_value\" \n [(ngModel)]=\"txt_value\" \n type=\"text\" \n class=\"tc-form-confirm tc-form-control\" \n required \n [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n </form>\n\n </div>\n \n <hr>\n\n <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n <ng-container *ngIf=\"actions\">\n <!-- {{ param_confirm | json }} -->\n <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n <button [disabled]=\"(((txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()) || loading) && param_confirm.confirmInput\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" tcloudButton=\"filled\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n </ng-container>\n </div>\n</div>\n", styles: [".actions-footer{text-align:right;height:42px}.ng-valid.ng-touched.different-text{border-color:var(--c-alert-500)}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}.margin-l-5{margin-left:5px}.tc-form-confirm{max-width:240px}\n"] }]
|
|
3994
3994
|
}], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { actions: [{
|
|
3995
3995
|
type: Input
|
|
3996
3996
|
}], btnCloseText: [{
|
|
@@ -5473,11 +5473,11 @@ class TCloudUiMultiplesValuesComponent {
|
|
|
5473
5473
|
ngOnDestroy() {
|
|
5474
5474
|
}
|
|
5475
5475
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5476
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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:10;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: "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" }] }); }
|
|
5476
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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:var(--c-neutral-400);text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:var(--c-neutral-50);border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:var(--c-neutral-50);border-left:1px solid var(--c-neutral-300)}.bc-r{background-color:var(--c-neutral-50);border-right:1px solid var(--c-neutral-300)}.box-input-data-list{background-color:var(--c-neutral-50);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:var(--c-neutral-50)}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--c-neutral-300);border-bottom:1px solid var(--c-neutral-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:var(--c-neutral-50)}.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:var(--c-neutral-500)}.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(--c-primary-500)!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:var(--c-neutral-200);border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;background-color:var(--c-neutral-50);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(--c-primary-500);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(--c-danger-500)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--c-neutral-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--c-neutral-300);position:absolute;z-index:10;background-color:var(--c-neutral-100)}.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:var(--c-neutral-500)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);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(--c-neutral-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:var(--c-danger-500);cursor:pointer}.btn-remove-all button:hover{color:var(--c-danger-400)!important}.info-no-value{color:var(--c-danger-500)}.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" }] }); }
|
|
5477
5477
|
}
|
|
5478
5478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
|
|
5479
5479
|
type: Component,
|
|
5480
|
-
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:10;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"] }]
|
|
5480
|
+
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:var(--c-neutral-400);text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:var(--c-neutral-50);border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:var(--c-neutral-50);border-left:1px solid var(--c-neutral-300)}.bc-r{background-color:var(--c-neutral-50);border-right:1px solid var(--c-neutral-300)}.box-input-data-list{background-color:var(--c-neutral-50);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:var(--c-neutral-50)}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--c-neutral-300);border-bottom:1px solid var(--c-neutral-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:var(--c-neutral-50)}.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:var(--c-neutral-500)}.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(--c-primary-500)!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:var(--c-neutral-200);border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;background-color:var(--c-neutral-50);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(--c-primary-500);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(--c-danger-500)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--c-neutral-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--c-neutral-300);position:absolute;z-index:10;background-color:var(--c-neutral-100)}.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:var(--c-neutral-500)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);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(--c-neutral-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:var(--c-danger-500);cursor:pointer}.btn-remove-all button:hover{color:var(--c-danger-400)!important}.info-no-value{color:var(--c-danger-500)}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
|
|
5481
5481
|
}], ctorParameters: () => [], propDecorators: { listItems: [{
|
|
5482
5482
|
type: Input
|
|
5483
5483
|
}], openValuesInChange: [{
|
|
@@ -6036,11 +6036,11 @@ class TCloudUiAlertBannerComponent {
|
|
|
6036
6036
|
this.linkClicked.emit();
|
|
6037
6037
|
}
|
|
6038
6038
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiAlertBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiAlertBannerComponent, isStandalone: true, selector: "tcloud-ui-alert-banner", inputs: { alertType: "alertType", message: "message", content: "content", linkText: "linkText", linkUrl: "linkUrl" }, outputs: { linkClicked: "linkClicked" }, ngImport: i0, template: "<div class=\"tcloud-ui-alert-banner\" [ngClass]=\"alertType\">\n <div class=\"alert-icon\">\n <div class=\"fa-light fa-circle-exclamation\"></div>\n </div>\n <div class=\"alert-content\">\n <div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n <p *ngIf=\"message\">\n {{ message }} \n <a *ngIf=\"linkText\" (click)=\"handleLinkClick()\" class=\"alert-link\">{{ linkText }}</a>\n </p>\n </div>\n</div>\n", styles: [".tcloud-ui-alert-banner{display:flex;align-items:center;padding:16px;border-radius:8px;width:100%}.tcloud-ui-alert-banner.warning{background-color:var(--c-alert-300);border-left:50px solid var(--c-alert-500)}.tcloud-ui-alert-banner.danger{background-color:var(--c-danger-300);border-left:50px solid var(--c-danger-500)}.tcloud-ui-alert-banner.info{background-color:var(--c-info-300);border-left:50px solid var(--c-info-500)}.tcloud-ui-alert-banner.success{background-color:var(--c-success-300);border-left:50px solid var(--c-success-500)}.tcloud-ui-alert-banner .alert-icon{display:flex;align-items:center;justify-content:center;margin-right:16px}.tcloud-ui-alert-banner .alert-icon .fa-circle-exclamation{width:24px;height:24px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;font-size:18px;margin-left:-80px}.warning .fa-circle-exclamation{background-color:transparent;color:var(--c-alert-
|
|
6039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiAlertBannerComponent, isStandalone: true, selector: "tcloud-ui-alert-banner", inputs: { alertType: "alertType", message: "message", content: "content", linkText: "linkText", linkUrl: "linkUrl" }, outputs: { linkClicked: "linkClicked" }, ngImport: i0, template: "<div class=\"tcloud-ui-alert-banner\" [ngClass]=\"alertType\">\n <div class=\"alert-icon\">\n <div class=\"fa-light fa-circle-exclamation\"></div>\n </div>\n <div class=\"alert-content\">\n <div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n <p *ngIf=\"message\">\n {{ message }} \n <a *ngIf=\"linkText\" (click)=\"handleLinkClick()\" class=\"alert-link\">{{ linkText }}</a>\n </p>\n </div>\n</div>\n", styles: [".tcloud-ui-alert-banner{display:flex;align-items:center;padding:16px;border-radius:8px;width:100%}.tcloud-ui-alert-banner.warning{background-color:var(--c-alert-300);border-left:50px solid var(--c-alert-500)}.tcloud-ui-alert-banner.danger{background-color:var(--c-danger-300);border-left:50px solid var(--c-danger-500)}.tcloud-ui-alert-banner.info{background-color:var(--c-info-300);border-left:50px solid var(--c-info-500)}.tcloud-ui-alert-banner.success{background-color:var(--c-success-300);border-left:50px solid var(--c-success-500)}.tcloud-ui-alert-banner .alert-icon{display:flex;align-items:center;justify-content:center;margin-right:16px}.tcloud-ui-alert-banner .alert-icon .fa-circle-exclamation{width:24px;height:24px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;font-size:18px;margin-left:-80px}.warning .fa-circle-exclamation{background-color:transparent;color:var(--c-alert-300)}.danger .fa-circle-exclamation{background-color:transparent;color:var(--c-danger-300)}.info .fa-circle-exclamation{background-color:transparent;color:var(--c-info-300)}.success .fa-circle-exclamation{background-color:transparent;color:var(--c-success-300)}.alert-content{flex:1;color:var(--c-neutral-700)}.alert-content p{margin:0;font-size:16px;font-weight:400;line-height:1.5;color:var(--c-neutral-700);font-family:var(--font-family)}.alert-content .alert-link{color:inherit;text-decoration:underline;font-weight:600;font-size:16px;color:var(--c-neutral-700)}.alert-content .alert-link:hover{text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
6040
6040
|
}
|
|
6041
6041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiAlertBannerComponent, decorators: [{
|
|
6042
6042
|
type: Component,
|
|
6043
|
-
args: [{ selector: 'tcloud-ui-alert-banner', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-alert-banner\" [ngClass]=\"alertType\">\n <div class=\"alert-icon\">\n <div class=\"fa-light fa-circle-exclamation\"></div>\n </div>\n <div class=\"alert-content\">\n <div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n <p *ngIf=\"message\">\n {{ message }} \n <a *ngIf=\"linkText\" (click)=\"handleLinkClick()\" class=\"alert-link\">{{ linkText }}</a>\n </p>\n </div>\n</div>\n", styles: [".tcloud-ui-alert-banner{display:flex;align-items:center;padding:16px;border-radius:8px;width:100%}.tcloud-ui-alert-banner.warning{background-color:var(--c-alert-300);border-left:50px solid var(--c-alert-500)}.tcloud-ui-alert-banner.danger{background-color:var(--c-danger-300);border-left:50px solid var(--c-danger-500)}.tcloud-ui-alert-banner.info{background-color:var(--c-info-300);border-left:50px solid var(--c-info-500)}.tcloud-ui-alert-banner.success{background-color:var(--c-success-300);border-left:50px solid var(--c-success-500)}.tcloud-ui-alert-banner .alert-icon{display:flex;align-items:center;justify-content:center;margin-right:16px}.tcloud-ui-alert-banner .alert-icon .fa-circle-exclamation{width:24px;height:24px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;font-size:18px;margin-left:-80px}.warning .fa-circle-exclamation{background-color:transparent;color:var(--c-alert-
|
|
6043
|
+
args: [{ selector: 'tcloud-ui-alert-banner', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-alert-banner\" [ngClass]=\"alertType\">\n <div class=\"alert-icon\">\n <div class=\"fa-light fa-circle-exclamation\"></div>\n </div>\n <div class=\"alert-content\">\n <div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n <p *ngIf=\"message\">\n {{ message }} \n <a *ngIf=\"linkText\" (click)=\"handleLinkClick()\" class=\"alert-link\">{{ linkText }}</a>\n </p>\n </div>\n</div>\n", styles: [".tcloud-ui-alert-banner{display:flex;align-items:center;padding:16px;border-radius:8px;width:100%}.tcloud-ui-alert-banner.warning{background-color:var(--c-alert-300);border-left:50px solid var(--c-alert-500)}.tcloud-ui-alert-banner.danger{background-color:var(--c-danger-300);border-left:50px solid var(--c-danger-500)}.tcloud-ui-alert-banner.info{background-color:var(--c-info-300);border-left:50px solid var(--c-info-500)}.tcloud-ui-alert-banner.success{background-color:var(--c-success-300);border-left:50px solid var(--c-success-500)}.tcloud-ui-alert-banner .alert-icon{display:flex;align-items:center;justify-content:center;margin-right:16px}.tcloud-ui-alert-banner .alert-icon .fa-circle-exclamation{width:24px;height:24px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;font-size:18px;margin-left:-80px}.warning .fa-circle-exclamation{background-color:transparent;color:var(--c-alert-300)}.danger .fa-circle-exclamation{background-color:transparent;color:var(--c-danger-300)}.info .fa-circle-exclamation{background-color:transparent;color:var(--c-info-300)}.success .fa-circle-exclamation{background-color:transparent;color:var(--c-success-300)}.alert-content{flex:1;color:var(--c-neutral-700)}.alert-content p{margin:0;font-size:16px;font-weight:400;line-height:1.5;color:var(--c-neutral-700);font-family:var(--font-family)}.alert-content .alert-link{color:inherit;text-decoration:underline;font-weight:600;font-size:16px;color:var(--c-neutral-700)}.alert-content .alert-link:hover{text-decoration:none}\n"] }]
|
|
6044
6044
|
}], ctorParameters: () => [], propDecorators: { alertType: [{
|
|
6045
6045
|
type: Input
|
|
6046
6046
|
}], message: [{
|
|
@@ -8504,389 +8504,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
8504
8504
|
type: Input
|
|
8505
8505
|
}] } });
|
|
8506
8506
|
|
|
8507
|
-
class TCloudUiCarouselComponent {
|
|
8508
|
-
get carouselSpeed() {
|
|
8509
|
-
return `${this.speed}ms`;
|
|
8510
|
-
}
|
|
8511
|
-
get carouselGap() {
|
|
8512
|
-
return this.gap;
|
|
8513
|
-
}
|
|
8514
|
-
get hideCarouselScrollbar() {
|
|
8515
|
-
return this.hideScrollbar;
|
|
8516
|
-
}
|
|
8517
|
-
get useCarouselSnap() {
|
|
8518
|
-
return this.snap && this.currentEffect === 'slide';
|
|
8519
|
-
}
|
|
8520
|
-
get useFadeEffect() {
|
|
8521
|
-
return this.currentEffect === 'fade';
|
|
8522
|
-
}
|
|
8523
|
-
get useSlideEffect() {
|
|
8524
|
-
return this.currentEffect === 'slide';
|
|
8525
|
-
}
|
|
8526
|
-
get currentEffect() {
|
|
8527
|
-
return this.effect === 'fade' ? 'fade' : 'slide';
|
|
8528
|
-
}
|
|
8529
|
-
get showCarouselControls() {
|
|
8530
|
-
//return this.showControls && this.navigation;
|
|
8531
|
-
return this.navigation;
|
|
8532
|
-
}
|
|
8533
|
-
get showCarouselIndicators() {
|
|
8534
|
-
//return this.showIndicators || this.pagination;
|
|
8535
|
-
return this.pagination;
|
|
8536
|
-
}
|
|
8537
|
-
constructor(changeDetectorRef, ngZone) {
|
|
8538
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
8539
|
-
this.ngZone = ngZone;
|
|
8540
|
-
/**
|
|
8541
|
-
* Texto acessível usado para identificar a região do carrossel.
|
|
8542
|
-
* Esperado: string curta e descritiva para leitores de tela.
|
|
8543
|
-
*/
|
|
8544
|
-
this.ariaLabel = 'Carrossel';
|
|
8545
|
-
/**
|
|
8546
|
-
* Define a posição dos botões de navegação.
|
|
8547
|
-
* Esperado: 'inside' para botões sobre o conteúdo ou 'outside' para uso futuro fora da área visual.
|
|
8548
|
-
*/
|
|
8549
|
-
this.controlsPosition = 'inside';
|
|
8550
|
-
/**
|
|
8551
|
-
* Espaçamento horizontal entre os slides.
|
|
8552
|
-
* Esperado: qualquer valor CSS válido, como '0', '8px' ou 'var(--size-16)'.
|
|
8553
|
-
*/
|
|
8554
|
-
this.gap = '0';
|
|
8555
|
-
/**
|
|
8556
|
-
* Ocultar Scrollbar horizontal do carrossel.
|
|
8557
|
-
* Esperado: true para esconder a barra de rolagem ou false para exibi-la.
|
|
8558
|
-
*/
|
|
8559
|
-
this.hideScrollbar = true;
|
|
8560
|
-
/**
|
|
8561
|
-
* Quantidade de deslocamento usada ao avançar ou voltar no efeito slide.
|
|
8562
|
-
* Esperado: 'page' para mover uma largura completa do carrossel ou um número em pixels.
|
|
8563
|
-
*/
|
|
8564
|
-
//@Input() scrollAmount: 'page' | number = 'page';
|
|
8565
|
-
/**
|
|
8566
|
-
* Comportamento nativo do scroll quando o carrossel navega entre slides.
|
|
8567
|
-
* Esperado: 'smooth', 'auto' ou 'instant', conforme suporte do navegador.
|
|
8568
|
-
*/
|
|
8569
|
-
this.scrollBehavior = 'smooth';
|
|
8570
|
-
// @Input() showControls: boolean = true;
|
|
8571
|
-
// @Input() showIndicators: boolean = true;
|
|
8572
|
-
/**
|
|
8573
|
-
* Encaixar o scroll no início de cada slide.
|
|
8574
|
-
* Esperado: true para evitar parar entre dois slides ou false para permitir rolagem livre.
|
|
8575
|
-
*/
|
|
8576
|
-
this.snap = true;
|
|
8577
|
-
/**
|
|
8578
|
-
* Tempo de espera entre uma troca automática de slide e outra.
|
|
8579
|
-
* Esperado: número em milissegundos; use 0 para desativar autoplay.
|
|
8580
|
-
* Exemplo: autoplay-delay="8000".
|
|
8581
|
-
*/
|
|
8582
|
-
this.autoplayDelay = 0;
|
|
8583
|
-
/**
|
|
8584
|
-
* Define se o autoplay deve parar quando o usuário interagir com o carrossel.
|
|
8585
|
-
* Esperado: true para parar ao clicar/navegar ou false para continuar após interação.
|
|
8586
|
-
* Exemplo: autoplay-disable-on-interaction="false".
|
|
8587
|
-
*/
|
|
8588
|
-
this.autoplayDisableOnInteraction = true;
|
|
8589
|
-
/**
|
|
8590
|
-
* Tipo de transição visual entre os slides.
|
|
8591
|
-
* Esperado: 'slide' para rolagem horizontal ou 'fade' para transição por opacidade.
|
|
8592
|
-
*/
|
|
8593
|
-
this.effect = 'slide';
|
|
8594
|
-
/**
|
|
8595
|
-
* Permitir navegação circular entre os slides.
|
|
8596
|
-
* Esperado: true para voltar do último slide ao primeiro ou false para travar nas extremidades.
|
|
8597
|
-
*/
|
|
8598
|
-
this.loop = false;
|
|
8599
|
-
/**
|
|
8600
|
-
* Exibir indicadores de paginação sobre a imagem.
|
|
8601
|
-
* Esperado: true para mostrar os dots ou false para ocultá-los.
|
|
8602
|
-
*/
|
|
8603
|
-
this.pagination = false;
|
|
8604
|
-
/**
|
|
8605
|
-
* Permitir clique nos indicadores de paginação.
|
|
8606
|
-
* Esperado: true para navegar ao clicar nos dots ou false para deixá-los apenas informativos.
|
|
8607
|
-
* Exemplo: pagination-clickable="true".
|
|
8608
|
-
*/
|
|
8609
|
-
this.paginationClickable = true;
|
|
8610
|
-
/**
|
|
8611
|
-
* Exibir botões de navegação anterior e próximo sobre a imagem.
|
|
8612
|
-
* Esperado: true para mostrar as setas ou false para ocultá-las.
|
|
8613
|
-
*/
|
|
8614
|
-
this.navigation = true;
|
|
8615
|
-
/**
|
|
8616
|
-
* Duração da animação de troca de slide.
|
|
8617
|
-
* Esperado: número em milissegundos.
|
|
8618
|
-
* Exemplo: speed="1000".
|
|
8619
|
-
*/
|
|
8620
|
-
this.speed = 300;
|
|
8621
|
-
this.activeIndexChange = new EventEmitter();
|
|
8622
|
-
this.activeIndex = 0;
|
|
8623
|
-
this.canScrollNext = false;
|
|
8624
|
-
this.canScrollPrev = false;
|
|
8625
|
-
this.isOverflowed = false;
|
|
8626
|
-
this.pages = [0];
|
|
8627
|
-
this.autoplayTimeout = null;
|
|
8628
|
-
this.scrollAnimationRaf = null;
|
|
8629
|
-
this.scrollRaf = null;
|
|
8630
|
-
this.stateRaf = null;
|
|
8631
|
-
this.handleScroll = () => {
|
|
8632
|
-
if (this.scrollRaf !== null) {
|
|
8633
|
-
return;
|
|
8634
|
-
}
|
|
8635
|
-
this.scrollRaf = requestAnimationFrame(() => {
|
|
8636
|
-
this.scrollRaf = null;
|
|
8637
|
-
this.updateState();
|
|
8638
|
-
});
|
|
8639
|
-
};
|
|
8640
|
-
}
|
|
8641
|
-
ngAfterViewInit() {
|
|
8642
|
-
this.ngZone.runOutsideAngular(() => {
|
|
8643
|
-
const el = this.carouselTrack.nativeElement;
|
|
8644
|
-
el.addEventListener('scroll', this.handleScroll, { passive: true });
|
|
8645
|
-
if (typeof ResizeObserver !== 'undefined') {
|
|
8646
|
-
this.resizeObserver = new ResizeObserver(() => this.scheduleStateUpdate());
|
|
8647
|
-
this.resizeObserver.observe(el);
|
|
8648
|
-
}
|
|
8649
|
-
this.scheduleStateUpdate();
|
|
8650
|
-
this.scheduleAutoplay();
|
|
8651
|
-
});
|
|
8652
|
-
}
|
|
8653
|
-
ngOnDestroy() {
|
|
8654
|
-
const el = this.carouselTrack?.nativeElement;
|
|
8655
|
-
el?.removeEventListener('scroll', this.handleScroll);
|
|
8656
|
-
this.resizeObserver?.disconnect();
|
|
8657
|
-
if (this.scrollRaf !== null) {
|
|
8658
|
-
cancelAnimationFrame(this.scrollRaf);
|
|
8659
|
-
}
|
|
8660
|
-
if (this.stateRaf !== null) {
|
|
8661
|
-
cancelAnimationFrame(this.stateRaf);
|
|
8662
|
-
}
|
|
8663
|
-
if (this.scrollAnimationRaf !== null) {
|
|
8664
|
-
cancelAnimationFrame(this.scrollAnimationRaf);
|
|
8665
|
-
}
|
|
8666
|
-
this.clearAutoplay();
|
|
8667
|
-
}
|
|
8668
|
-
next() {
|
|
8669
|
-
this.handleInteraction();
|
|
8670
|
-
this.goToIndex(this.activeIndex + 1);
|
|
8671
|
-
}
|
|
8672
|
-
previous() {
|
|
8673
|
-
this.handleInteraction();
|
|
8674
|
-
this.goToIndex(this.activeIndex - 1);
|
|
8675
|
-
}
|
|
8676
|
-
scrollToIndex(index) {
|
|
8677
|
-
if (!this.paginationClickable)
|
|
8678
|
-
return;
|
|
8679
|
-
this.handleInteraction();
|
|
8680
|
-
this.goToIndex(index);
|
|
8681
|
-
}
|
|
8682
|
-
goToIndex(index, isAutoplay = false) {
|
|
8683
|
-
const el = this.carouselTrack?.nativeElement;
|
|
8684
|
-
if (!el)
|
|
8685
|
-
return;
|
|
8686
|
-
const targetIndex = this.normalizeIndex(index);
|
|
8687
|
-
const slides = this.getSlides();
|
|
8688
|
-
if (this.currentEffect === 'fade') {
|
|
8689
|
-
this.setActiveIndex(targetIndex);
|
|
8690
|
-
if (isAutoplay) {
|
|
8691
|
-
this.scheduleAutoplay();
|
|
8692
|
-
}
|
|
8693
|
-
return;
|
|
8694
|
-
}
|
|
8695
|
-
const targetSlide = slides[targetIndex];
|
|
8696
|
-
const targetLeft = targetSlide ? targetSlide.offsetLeft : targetIndex * el.clientWidth;
|
|
8697
|
-
this.animateScrollTo(targetLeft);
|
|
8698
|
-
if (isAutoplay) {
|
|
8699
|
-
this.scheduleAutoplay();
|
|
8700
|
-
}
|
|
8701
|
-
}
|
|
8702
|
-
handleInteraction() {
|
|
8703
|
-
if (this.autoplayDisableOnInteraction) {
|
|
8704
|
-
this.clearAutoplay();
|
|
8705
|
-
return;
|
|
8706
|
-
}
|
|
8707
|
-
this.scheduleAutoplay();
|
|
8708
|
-
}
|
|
8709
|
-
scheduleStateUpdate() {
|
|
8710
|
-
if (this.stateRaf !== null) {
|
|
8711
|
-
return;
|
|
8712
|
-
}
|
|
8713
|
-
this.stateRaf = requestAnimationFrame(() => {
|
|
8714
|
-
this.stateRaf = null;
|
|
8715
|
-
this.updateState();
|
|
8716
|
-
});
|
|
8717
|
-
}
|
|
8718
|
-
scheduleAutoplay() {
|
|
8719
|
-
this.clearAutoplay();
|
|
8720
|
-
if (!this.autoplayDelay || this.autoplayDelay <= 0) {
|
|
8721
|
-
return;
|
|
8722
|
-
}
|
|
8723
|
-
this.autoplayTimeout = setTimeout(() => {
|
|
8724
|
-
this.ngZone.runOutsideAngular(() => {
|
|
8725
|
-
this.goToIndex(this.activeIndex + 1, true);
|
|
8726
|
-
});
|
|
8727
|
-
}, this.autoplayDelay);
|
|
8728
|
-
}
|
|
8729
|
-
clearAutoplay() {
|
|
8730
|
-
if (this.autoplayTimeout === null) {
|
|
8731
|
-
return;
|
|
8732
|
-
}
|
|
8733
|
-
clearTimeout(this.autoplayTimeout);
|
|
8734
|
-
this.autoplayTimeout = null;
|
|
8735
|
-
}
|
|
8736
|
-
updateState() {
|
|
8737
|
-
const el = this.carouselTrack?.nativeElement;
|
|
8738
|
-
if (!el)
|
|
8739
|
-
return;
|
|
8740
|
-
const slides = this.getSlides();
|
|
8741
|
-
const pagesLength = Math.max(1, slides.length);
|
|
8742
|
-
const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);
|
|
8743
|
-
const activeIndex = this.currentEffect === 'fade'
|
|
8744
|
-
? this.activeIndex
|
|
8745
|
-
: this.getClosestSlideIndex(slides, el.scrollLeft);
|
|
8746
|
-
this.ngZone.run(() => {
|
|
8747
|
-
this.activeIndex = Math.min(activeIndex, Math.max(0, pagesLength - 1));
|
|
8748
|
-
this.canScrollPrev = this.loop || this.activeIndex > 0 || el.scrollLeft > 1;
|
|
8749
|
-
this.canScrollNext = this.loop || this.activeIndex < pagesLength - 1 || el.scrollLeft < maxScrollLeft - 1;
|
|
8750
|
-
this.isOverflowed = pagesLength > 1 || maxScrollLeft > 1;
|
|
8751
|
-
this.pages = Array.from({ length: pagesLength }, (_, index) => index);
|
|
8752
|
-
this.updateSlidesState();
|
|
8753
|
-
this.changeDetectorRef.markForCheck();
|
|
8754
|
-
});
|
|
8755
|
-
}
|
|
8756
|
-
setActiveIndex(index) {
|
|
8757
|
-
const previousActiveIndex = this.activeIndex;
|
|
8758
|
-
this.activeIndex = this.normalizeIndex(index);
|
|
8759
|
-
this.canScrollPrev = this.loop || this.activeIndex > 0;
|
|
8760
|
-
this.canScrollNext = this.loop || this.activeIndex < this.pages.length - 1;
|
|
8761
|
-
this.updateSlidesState();
|
|
8762
|
-
if (previousActiveIndex !== this.activeIndex) {
|
|
8763
|
-
this.activeIndexChange.emit(this.activeIndex);
|
|
8764
|
-
}
|
|
8765
|
-
this.changeDetectorRef.markForCheck();
|
|
8766
|
-
}
|
|
8767
|
-
normalizeIndex(index) {
|
|
8768
|
-
const slidesLength = this.getSlides().length;
|
|
8769
|
-
if (slidesLength === 0)
|
|
8770
|
-
return 0;
|
|
8771
|
-
if (this.loop) {
|
|
8772
|
-
return (index + slidesLength) % slidesLength;
|
|
8773
|
-
}
|
|
8774
|
-
return Math.min(Math.max(index, 0), slidesLength - 1);
|
|
8775
|
-
}
|
|
8776
|
-
getSlides() {
|
|
8777
|
-
const el = this.carouselTrack?.nativeElement;
|
|
8778
|
-
if (!el)
|
|
8779
|
-
return [];
|
|
8780
|
-
return Array.from(el.children);
|
|
8781
|
-
}
|
|
8782
|
-
getClosestSlideIndex(slides, scrollLeft) {
|
|
8783
|
-
if (!slides.length)
|
|
8784
|
-
return 0;
|
|
8785
|
-
return slides.reduce((closestIndex, slide, index) => {
|
|
8786
|
-
const currentDistance = Math.abs(slide.offsetLeft - scrollLeft);
|
|
8787
|
-
const closestDistance = Math.abs(slides[closestIndex].offsetLeft - scrollLeft);
|
|
8788
|
-
return currentDistance < closestDistance ? index : closestIndex;
|
|
8789
|
-
}, 0);
|
|
8790
|
-
}
|
|
8791
|
-
updateSlidesState() {
|
|
8792
|
-
this.getSlides().forEach((slide, index) => {
|
|
8793
|
-
slide.classList.toggle('tc-carousel-item-active', index === this.activeIndex);
|
|
8794
|
-
slide.classList.toggle('tc-carousel-item-hidden', index !== this.activeIndex);
|
|
8795
|
-
});
|
|
8796
|
-
}
|
|
8797
|
-
animateScrollTo(left) {
|
|
8798
|
-
const el = this.carouselTrack?.nativeElement;
|
|
8799
|
-
if (!el)
|
|
8800
|
-
return;
|
|
8801
|
-
if (this.scrollAnimationRaf !== null) {
|
|
8802
|
-
cancelAnimationFrame(this.scrollAnimationRaf);
|
|
8803
|
-
}
|
|
8804
|
-
if (this.scrollBehavior !== 'smooth' || this.speed <= 0) {
|
|
8805
|
-
el.scrollTo({ left, behavior: this.scrollBehavior });
|
|
8806
|
-
return;
|
|
8807
|
-
}
|
|
8808
|
-
const startLeft = el.scrollLeft;
|
|
8809
|
-
const distance = left - startLeft;
|
|
8810
|
-
const startTime = performance.now();
|
|
8811
|
-
const animate = (currentTime) => {
|
|
8812
|
-
const progress = Math.min((currentTime - startTime) / this.speed, 1);
|
|
8813
|
-
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
|
8814
|
-
el.scrollLeft = startLeft + distance * easeProgress;
|
|
8815
|
-
if (progress < 1) {
|
|
8816
|
-
this.scrollAnimationRaf = requestAnimationFrame(animate);
|
|
8817
|
-
return;
|
|
8818
|
-
}
|
|
8819
|
-
this.scrollAnimationRaf = null;
|
|
8820
|
-
this.updateState();
|
|
8821
|
-
};
|
|
8822
|
-
this.scrollAnimationRaf = requestAnimationFrame(animate);
|
|
8823
|
-
}
|
|
8824
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", type: TCloudUiCarouselComponent, isStandalone: true, selector: "tcloud-ui-carousel", inputs: { ariaLabel: "ariaLabel", controlsPosition: "controlsPosition", gap: "gap", hideScrollbar: "hideScrollbar", scrollBehavior: "scrollBehavior", snap: "snap", autoplayDelay: ["autoplay-delay", "autoplayDelay", numberAttribute], autoplayDisableOnInteraction: ["autoplay-disable-on-interaction", "autoplayDisableOnInteraction", booleanAttribute], effect: "effect", loop: ["loop", "loop", booleanAttribute], pagination: ["pagination", "pagination", booleanAttribute], paginationClickable: ["pagination-clickable", "paginationClickable", booleanAttribute], navigation: ["navigation", "navigation", booleanAttribute], speed: ["speed", "speed", numberAttribute] }, outputs: { activeIndexChange: "activeIndexChange" }, host: { properties: { "style.--tc-carousel-speed": "this.carouselSpeed", "style.--tc-carousel-gap": "this.carouselGap", "class.tc-carousel-hide-scrollbar": "this.hideCarouselScrollbar", "class.tc-carousel-snap": "this.useCarouselSnap", "class.tc-carousel-fade": "this.useFadeEffect", "class.tc-carousel-slide": "this.useSlideEffect" } }, viewQueries: [{ propertyName: "carouselTrack", first: true, predicate: ["carouselTrack"], descendants: true }], ngImport: i0, template: "<div\n class=\"tcloud-ui-carousel\"\n [class.controls-outside]=\"controlsPosition === 'outside'\"\n [class.overflowed]=\"showCarouselControls && isOverflowed\">\n <button\n *ngIf=\"showCarouselControls && isOverflowed\"\n class=\"tcloud-ui-carousel-control previous\"\n type=\"button\"\n [disabled]=\"!canScrollPrev\"\n (click)=\"previous()\"\n aria-label=\"Anterior\">\n <i class=\"fa-solid fa-angle-left\"></i>\n </button>\n <div\n #carouselTrack\n class=\"tcloud-ui-carousel-track\"\n tabindex=\"0\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel\">\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"showCarouselControls && isOverflowed\"\n class=\"tcloud-ui-carousel-control next\"\n type=\"button\"\n [disabled]=\"!canScrollNext\"\n (click)=\"next()\"\n aria-label=\"Pr\u00F3ximo\">\n <i class=\"fa-solid fa-angle-right\"></i>\n </button>\n\n\n <div\n *ngIf=\"showCarouselIndicators && pages.length > 1\"\n class=\"tcloud-ui-carousel-indicators\">\n <button\n *ngFor=\"let page of pages; let index = index\"\n class=\"tcloud-ui-carousel-indicator\"\n type=\"button\"\n [disabled]=\"!paginationClickable\"\n [attr.aria-label]=\"'Ir para item ' + (index + 1)\"\n [class.active]=\"index === activeIndex\"\n (click)=\"scrollToIndex(page)\">\n </button>\n</div>\n</div>\n\n<!-- <div\n *ngIf=\"showCarouselIndicators && pages.length > 1\"\n class=\"tcloud-ui-carousel-indicators\">\n <button\n *ngFor=\"let page of pages; let index = index\"\n class=\"tcloud-ui-carousel-indicator\"\n type=\"button\"\n [disabled]=\"!paginationClickable\"\n [attr.aria-label]=\"'Ir para item ' + (index + 1)\"\n [class.active]=\"index === activeIndex\"\n (click)=\"scrollToIndex(page)\">\n </button>\n</div> -->\n", styles: ["tcloud-ui-carousel{display:block;width:100%}tcloud-ui-carousel .tcloud-ui-carousel{align-items:center;display:block;gap:var(--size-8);overflow:hidden;position:relative;width:100%}tcloud-ui-carousel .tcloud-ui-carousel.overflowed{display:block}tcloud-ui-carousel .tcloud-ui-carousel .tcloud-ui-carousel-control{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background-color:transparent;border:none;font-size:xx-large;color:var(--tc-primary)}tcloud-ui-carousel .tcloud-ui-carousel .tcloud-ui-carousel-control.previous{left:var(--size-4)}tcloud-ui-carousel .tcloud-ui-carousel .tcloud-ui-carousel-control.next{right:var(--size-4)}tcloud-ui-carousel .tcloud-ui-carousel-track{display:flex;gap:var(--tc-carousel-gap);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-gutter:stable;width:100%}tcloud-ui-carousel .tcloud-ui-carousel-track:focus{outline:none}tcloud-ui-carousel .tcloud-ui-carousel-track:focus-visible{outline:var(--bor-size-2) solid var(--c-primary-500);outline-offset:var(--size-2)}tcloud-ui-carousel .tcloud-ui-carousel-track>*{box-sizing:border-box;display:block;flex:0 0 100%;max-width:100%;min-width:100%;width:100%}tcloud-ui-carousel .tcloud-ui-carousel-track>img{height:auto;object-fit:cover}tcloud-ui-carousel.tc-carousel-fade .tcloud-ui-carousel-track{display:block;overflow:hidden;position:relative}tcloud-ui-carousel.tc-carousel-fade .tcloud-ui-carousel-track>*{inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--tc-carousel-speed) ease;z-index:0}tcloud-ui-carousel.tc-carousel-fade .tcloud-ui-carousel-track>*.tc-carousel-item-active{opacity:1;pointer-events:auto;position:relative;z-index:1}tcloud-ui-carousel.tc-carousel-fade .tcloud-ui-carousel-track>*:first-child{opacity:1;pointer-events:auto;position:relative;z-index:1}tcloud-ui-carousel.tc-carousel-fade .tcloud-ui-carousel-track>*:first-child:not(.tc-carousel-item-active):has(~.tc-carousel-item-active){opacity:0;pointer-events:none;position:absolute;z-index:0}tcloud-ui-carousel.tc-carousel-snap .tcloud-ui-carousel-track{scroll-snap-type:x proximity}tcloud-ui-carousel.tc-carousel-snap .tcloud-ui-carousel-track>*{scroll-snap-align:start}tcloud-ui-carousel.tc-carousel-hide-scrollbar .tcloud-ui-carousel-track{-ms-overflow-style:none;scrollbar-width:none}tcloud-ui-carousel.tc-carousel-hide-scrollbar .tcloud-ui-carousel-track::-webkit-scrollbar{display:none}tcloud-ui-carousel .tcloud-ui-carousel-control{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:flex;font-size:var(--f-size-14);height:var(--size-40);justify-content:center;padding:0;transition:all .2s ease;width:var(--size-40)}tcloud-ui-carousel .tcloud-ui-carousel-control:hover:not(:disabled){background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500)}tcloud-ui-carousel .tcloud-ui-carousel-control:focus{outline:none}tcloud-ui-carousel .tcloud-ui-carousel-control:focus-visible:not(:disabled){outline:var(--bor-size-2) solid var(--c-primary-500);outline-offset:var(--size-2)}tcloud-ui-carousel .tcloud-ui-carousel-control:disabled{border-color:var(--c-neutral-200);color:var(--c-neutral-400);cursor:not-allowed}tcloud-ui-carousel .tcloud-ui-carousel-indicators{align-items:center;bottom:var(--size-12);display:flex;gap:var(--size-8);justify-content:center;left:50%;position:absolute;transform:translate(-50%);z-index:2}tcloud-ui-carousel .tcloud-ui-carousel-indicator{background-color:var(--c-neutral-300);border:0;border-radius:var(--bor-radius-16);cursor:pointer;height:var(--size-14);padding:0;transition:all .2s ease;width:var(--size-14)}tcloud-ui-carousel .tcloud-ui-carousel-indicator.active{background-color:var(--c-primary-500)}tcloud-ui-carousel .tcloud-ui-carousel-indicator:disabled{cursor:default}@media (max-width: 480px){tcloud-ui-carousel .tcloud-ui-carousel{display:block}tcloud-ui-carousel .tcloud-ui-carousel.overflowed{display:block}tcloud-ui-carousel .tcloud-ui-carousel-control{height:var(--size-32);width:var(--size-32)}tcloud-ui-carousel .tcloud-ui-carousel-control.previous{left:var(--size-8)}tcloud-ui-carousel .tcloud-ui-carousel-control.next{right:var(--size-8)}tcloud-ui-carousel .tcloud-ui-carousel-track{width:100%}tcloud-ui-carousel .tcloud-ui-carousel-indicators{bottom:var(--size-8)}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8826
|
-
}
|
|
8827
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiCarouselComponent, decorators: [{
|
|
8828
|
-
type: Component,
|
|
8829
|
-
args: [{ selector: 'tcloud-ui-carousel', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"tcloud-ui-carousel\"\n [class.controls-outside]=\"controlsPosition === 'outside'\"\n [class.overflowed]=\"showCarouselControls && isOverflowed\">\n <button\n *ngIf=\"showCarouselControls && isOverflowed\"\n class=\"tcloud-ui-carousel-control previous\"\n type=\"button\"\n [disabled]=\"!canScrollPrev\"\n (click)=\"previous()\"\n aria-label=\"Anterior\">\n <i class=\"fa-solid fa-angle-left\"></i>\n </button>\n <div\n #carouselTrack\n class=\"tcloud-ui-carousel-track\"\n tabindex=\"0\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel\">\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"showCarouselControls && isOverflowed\"\n class=\"tcloud-ui-carousel-control next\"\n type=\"button\"\n [disabled]=\"!canScrollNext\"\n (click)=\"next()\"\n aria-label=\"Pr\u00F3ximo\">\n <i class=\"fa-solid fa-angle-right\"></i>\n </button>\n\n\n <div\n *ngIf=\"showCarouselIndicators && pages.length > 1\"\n class=\"tcloud-ui-carousel-indicators\">\n <button\n *ngFor=\"let page of pages; let index = index\"\n class=\"tcloud-ui-carousel-indicator\"\n type=\"button\"\n [disabled]=\"!paginationClickable\"\n [attr.aria-label]=\"'Ir para item ' + (index + 1)\"\n [class.active]=\"index === activeIndex\"\n (click)=\"scrollToIndex(page)\">\n </button>\n</div>\n</div>\n\n<!-- <div\n *ngIf=\"showCarouselIndicators && pages.length > 1\"\n class=\"tcloud-ui-carousel-indicators\">\n <button\n *ngFor=\"let page of pages; let index = index\"\n class=\"tcloud-ui-carousel-indicator\"\n type=\"button\"\n [disabled]=\"!paginationClickable\"\n [attr.aria-label]=\"'Ir para item ' + (index + 1)\"\n [class.active]=\"index === activeIndex\"\n (click)=\"scrollToIndex(page)\">\n </button>\n</div> -->\n", styles: ["tcloud-ui-carousel{display:block;width:100%}tcloud-ui-carousel .tcloud-ui-carousel{align-items:center;display:block;gap:var(--size-8);overflow:hidden;position:relative;width:100%}tcloud-ui-carousel .tcloud-ui-carousel.overflowed{display:block}tcloud-ui-carousel .tcloud-ui-carousel .tcloud-ui-carousel-control{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background-color:transparent;border:none;font-size:xx-large;color:var(--tc-primary)}tcloud-ui-carousel .tcloud-ui-carousel .tcloud-ui-carousel-control.previous{left:var(--size-4)}tcloud-ui-carousel .tcloud-ui-carousel .tcloud-ui-carousel-control.next{right:var(--size-4)}tcloud-ui-carousel .tcloud-ui-carousel-track{display:flex;gap:var(--tc-carousel-gap);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-gutter:stable;width:100%}tcloud-ui-carousel .tcloud-ui-carousel-track:focus{outline:none}tcloud-ui-carousel .tcloud-ui-carousel-track:focus-visible{outline:var(--bor-size-2) solid var(--c-primary-500);outline-offset:var(--size-2)}tcloud-ui-carousel .tcloud-ui-carousel-track>*{box-sizing:border-box;display:block;flex:0 0 100%;max-width:100%;min-width:100%;width:100%}tcloud-ui-carousel .tcloud-ui-carousel-track>img{height:auto;object-fit:cover}tcloud-ui-carousel.tc-carousel-fade .tcloud-ui-carousel-track{display:block;overflow:hidden;position:relative}tcloud-ui-carousel.tc-carousel-fade .tcloud-ui-carousel-track>*{inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--tc-carousel-speed) ease;z-index:0}tcloud-ui-carousel.tc-carousel-fade .tcloud-ui-carousel-track>*.tc-carousel-item-active{opacity:1;pointer-events:auto;position:relative;z-index:1}tcloud-ui-carousel.tc-carousel-fade .tcloud-ui-carousel-track>*:first-child{opacity:1;pointer-events:auto;position:relative;z-index:1}tcloud-ui-carousel.tc-carousel-fade .tcloud-ui-carousel-track>*:first-child:not(.tc-carousel-item-active):has(~.tc-carousel-item-active){opacity:0;pointer-events:none;position:absolute;z-index:0}tcloud-ui-carousel.tc-carousel-snap .tcloud-ui-carousel-track{scroll-snap-type:x proximity}tcloud-ui-carousel.tc-carousel-snap .tcloud-ui-carousel-track>*{scroll-snap-align:start}tcloud-ui-carousel.tc-carousel-hide-scrollbar .tcloud-ui-carousel-track{-ms-overflow-style:none;scrollbar-width:none}tcloud-ui-carousel.tc-carousel-hide-scrollbar .tcloud-ui-carousel-track::-webkit-scrollbar{display:none}tcloud-ui-carousel .tcloud-ui-carousel-control{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:flex;font-size:var(--f-size-14);height:var(--size-40);justify-content:center;padding:0;transition:all .2s ease;width:var(--size-40)}tcloud-ui-carousel .tcloud-ui-carousel-control:hover:not(:disabled){background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500)}tcloud-ui-carousel .tcloud-ui-carousel-control:focus{outline:none}tcloud-ui-carousel .tcloud-ui-carousel-control:focus-visible:not(:disabled){outline:var(--bor-size-2) solid var(--c-primary-500);outline-offset:var(--size-2)}tcloud-ui-carousel .tcloud-ui-carousel-control:disabled{border-color:var(--c-neutral-200);color:var(--c-neutral-400);cursor:not-allowed}tcloud-ui-carousel .tcloud-ui-carousel-indicators{align-items:center;bottom:var(--size-12);display:flex;gap:var(--size-8);justify-content:center;left:50%;position:absolute;transform:translate(-50%);z-index:2}tcloud-ui-carousel .tcloud-ui-carousel-indicator{background-color:var(--c-neutral-300);border:0;border-radius:var(--bor-radius-16);cursor:pointer;height:var(--size-14);padding:0;transition:all .2s ease;width:var(--size-14)}tcloud-ui-carousel .tcloud-ui-carousel-indicator.active{background-color:var(--c-primary-500)}tcloud-ui-carousel .tcloud-ui-carousel-indicator:disabled{cursor:default}@media (max-width: 480px){tcloud-ui-carousel .tcloud-ui-carousel{display:block}tcloud-ui-carousel .tcloud-ui-carousel.overflowed{display:block}tcloud-ui-carousel .tcloud-ui-carousel-control{height:var(--size-32);width:var(--size-32)}tcloud-ui-carousel .tcloud-ui-carousel-control.previous{left:var(--size-8)}tcloud-ui-carousel .tcloud-ui-carousel-control.next{right:var(--size-8)}tcloud-ui-carousel .tcloud-ui-carousel-track{width:100%}tcloud-ui-carousel .tcloud-ui-carousel-indicators{bottom:var(--size-8)}}\n"] }]
|
|
8830
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { carouselTrack: [{
|
|
8831
|
-
type: ViewChild,
|
|
8832
|
-
args: ['carouselTrack']
|
|
8833
|
-
}], ariaLabel: [{
|
|
8834
|
-
type: Input
|
|
8835
|
-
}], controlsPosition: [{
|
|
8836
|
-
type: Input
|
|
8837
|
-
}], gap: [{
|
|
8838
|
-
type: Input
|
|
8839
|
-
}], hideScrollbar: [{
|
|
8840
|
-
type: Input
|
|
8841
|
-
}], scrollBehavior: [{
|
|
8842
|
-
type: Input
|
|
8843
|
-
}], snap: [{
|
|
8844
|
-
type: Input
|
|
8845
|
-
}], autoplayDelay: [{
|
|
8846
|
-
type: Input,
|
|
8847
|
-
args: [{ alias: 'autoplay-delay', transform: numberAttribute }]
|
|
8848
|
-
}], autoplayDisableOnInteraction: [{
|
|
8849
|
-
type: Input,
|
|
8850
|
-
args: [{ alias: 'autoplay-disable-on-interaction', transform: booleanAttribute }]
|
|
8851
|
-
}], effect: [{
|
|
8852
|
-
type: Input
|
|
8853
|
-
}], loop: [{
|
|
8854
|
-
type: Input,
|
|
8855
|
-
args: [{ transform: booleanAttribute }]
|
|
8856
|
-
}], pagination: [{
|
|
8857
|
-
type: Input,
|
|
8858
|
-
args: [{ transform: booleanAttribute }]
|
|
8859
|
-
}], paginationClickable: [{
|
|
8860
|
-
type: Input,
|
|
8861
|
-
args: [{ alias: 'pagination-clickable', transform: booleanAttribute }]
|
|
8862
|
-
}], navigation: [{
|
|
8863
|
-
type: Input,
|
|
8864
|
-
args: [{ transform: booleanAttribute }]
|
|
8865
|
-
}], speed: [{
|
|
8866
|
-
type: Input,
|
|
8867
|
-
args: [{ transform: numberAttribute }]
|
|
8868
|
-
}], activeIndexChange: [{
|
|
8869
|
-
type: Output
|
|
8870
|
-
}], carouselSpeed: [{
|
|
8871
|
-
type: HostBinding,
|
|
8872
|
-
args: ['style.--tc-carousel-speed']
|
|
8873
|
-
}], carouselGap: [{
|
|
8874
|
-
type: HostBinding,
|
|
8875
|
-
args: ['style.--tc-carousel-gap']
|
|
8876
|
-
}], hideCarouselScrollbar: [{
|
|
8877
|
-
type: HostBinding,
|
|
8878
|
-
args: ['class.tc-carousel-hide-scrollbar']
|
|
8879
|
-
}], useCarouselSnap: [{
|
|
8880
|
-
type: HostBinding,
|
|
8881
|
-
args: ['class.tc-carousel-snap']
|
|
8882
|
-
}], useFadeEffect: [{
|
|
8883
|
-
type: HostBinding,
|
|
8884
|
-
args: ['class.tc-carousel-fade']
|
|
8885
|
-
}], useSlideEffect: [{
|
|
8886
|
-
type: HostBinding,
|
|
8887
|
-
args: ['class.tc-carousel-slide']
|
|
8888
|
-
}] } });
|
|
8889
|
-
|
|
8890
8507
|
/**
|
|
8891
8508
|
* Verifica se um elemento de texto está elipsado (texto cortado com ...)
|
|
8892
8509
|
* @param element - O elemento HTML que contém o texto
|
|
@@ -9271,7 +8888,7 @@ class TCloudUiDropdownComponent {
|
|
|
9271
8888
|
this._disabledByForm.set(isDisabled);
|
|
9272
8889
|
}
|
|
9273
8890
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9274
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 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: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
|
|
8891
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 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);border:1px solid var(--c-neutral-300);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: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
|
|
9275
8892
|
}
|
|
9276
8893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDropdownComponent, decorators: [{
|
|
9277
8894
|
type: Component,
|
|
@@ -9281,7 +8898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
9281
8898
|
ReactiveFormsModule,
|
|
9282
8899
|
TcRevTooltipDirective,
|
|
9283
8900
|
TcRevIconButtonDirective
|
|
9284
|
-
], 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 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"] }]
|
|
8901
|
+
], 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 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);border:1px solid var(--c-neutral-300);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"] }]
|
|
9285
8902
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
|
|
9286
8903
|
type: ViewChild,
|
|
9287
8904
|
args: ['menuTemplate']
|
|
@@ -9991,7 +9608,7 @@ class TCloudUiDialogComponent {
|
|
|
9991
9608
|
return this;
|
|
9992
9609
|
}
|
|
9993
9610
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9994
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TCloudUiDialogComponent, isStandalone: true, selector: "tcloud-ui-dialog", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (data?.inputConfirmationText)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:3000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--
|
|
9611
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TCloudUiDialogComponent, isStandalone: true, selector: "tcloud-ui-dialog", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (data?.inputConfirmationText)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:3000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--c-neutral-50);color:var(--c-neutral-700)}.container-dialog .container-header{display:flex;justify-content:space-between;align-items:center}.container-dialog .container-header .tc-title{font-size:18px;font-weight:700}.container-dialog .container-header .container-close-button{width:40px;height:40px;border-radius:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-neutral-600);border:1px solid var(--c-neutral-300)}.container-dialog .container-input-confirmation{display:grid;gap:8px}.container-dialog .container-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.container-dialog .container-footer button{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }, { kind: "component", type: TcRevSmallLoadingComponent, selector: "tc-rev-small-loading", inputs: ["width", "marginTop", "marginBottom", "marginRight", "marginLeft"] }], animations: [
|
|
9995
9612
|
trigger('fade', [
|
|
9996
9613
|
state('visible', style({ opacity: 1 })),
|
|
9997
9614
|
state('hide', style({ opacity: 0, top: '-38%' })),
|
|
@@ -10015,7 +9632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
10015
9632
|
]),
|
|
10016
9633
|
transition('visible => hide', animate('0.3s ease-out'))
|
|
10017
9634
|
])
|
|
10018
|
-
], standalone: true, imports: [CommonModule, ReactiveFormsModule, I18nTranslatePipe, TCloudUiLoadingComponent, TcRevSmallLoadingComponent], template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (data?.inputConfirmationText)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:3000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--
|
|
9635
|
+
], standalone: true, imports: [CommonModule, ReactiveFormsModule, I18nTranslatePipe, TCloudUiLoadingComponent, TcRevSmallLoadingComponent], template: "<div class=\"background-modal\" (click)=\"onBackdropClick()\"></div>\n\n@let disabled = data.disable || data.loading;\n<div class=\"container-dialog\" [@fade]=\"animation\">\n\n <!-- Header -->\n <div class=\"container-header\">\n\n <!-- Title -->\n <h4 class=\"tc-title tcloud-ui-modal-header tc-modal-header\">{{ data.title }}</h4>\n\n <!-- Close button -->\n <div class=\"container-close-button\" (click)=\" disabled ? null : close()\">\n <i class=\"fas fa-times\"></i>\n </div>\n </div>\n\n <!-- Message -->\n <div [innerHTML]=\"data.message\"></div>\n\n <!-- Input confirmation -->\n @if (data?.inputConfirmationText)\n {\n <div class=\"container-input-confirmation\">\n <input\n tcloudForm\n class=\"tc-form-confirm tc-form-control\"\n [formControl]=\"inputConfirmationControl\"\n [placeholder]=\"inputConfirmationErrorMessage()\"\n (keyup.enter)=\"confirm()\"\n />\n\n @if (inputConfirmationControl.touched && inputConfirmationControl.invalid)\n {\n <p class=\"text-danger\">{{ inputConfirmationErrorMessage() }}</p>\n }\n </div>\n }\n\n <!-- Loading -->\n @if (data.loading)\n {\n <tc-rev-small-loading />\n }\n\n <!-- Footer -->\n <div class=\"container-footer\">\n\n <!-- Cancelar -->\n <button\n class=\"tc-btn tc-btn-outline-primary\"\n [disabled]=\"disabled\"\n (click)=\"close()\">{{ data.buttonCancelText || ('dialogConfirmation.cancel' | i18nTranslate: 'Cancelar') }}\n </button>\n\n <!-- Confirmar -->\n <button\n class=\"tc-btn tc-btn-primary\"\n [disabled]=\"disabled\"\n (click)=\"confirm()\">{{ textConfirmation | titlecase }}\n </button>\n </div>\n</div>\n", styles: [".background-modal{position:fixed;z-index:3000;width:100%;height:100%;background-color:#00000080;top:0;left:0}.container-dialog{position:fixed;top:15%;left:calc(50% - 300px);width:500px;z-index:30001;border-radius:8px;padding:24px;box-sizing:border-box;display:grid;gap:24px;background-color:var(--c-neutral-50);color:var(--c-neutral-700)}.container-dialog .container-header{display:flex;justify-content:space-between;align-items:center}.container-dialog .container-header .tc-title{font-size:18px;font-weight:700}.container-dialog .container-header .container-close-button{width:40px;height:40px;border-radius:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-neutral-600);border:1px solid var(--c-neutral-300)}.container-dialog .container-input-confirmation{display:grid;gap:8px}.container-dialog .container-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.container-dialog .container-footer button{width:100%}\n"] }]
|
|
10019
9636
|
}], propDecorators: { onKeydownHandler: [{
|
|
10020
9637
|
type: HostListener,
|
|
10021
9638
|
args: ['document:keydown.escape', ['$event']]
|
|
@@ -10293,7 +9910,6 @@ const COMPONENTS = [
|
|
|
10293
9910
|
TCloudUiCardTitleComponent,
|
|
10294
9911
|
TCloudUiCardAccordionComponent,
|
|
10295
9912
|
TCloudUiCalendarComponent,
|
|
10296
|
-
TCloudUiCarouselComponent,
|
|
10297
9913
|
TCloudUiDropdownComponent,
|
|
10298
9914
|
TCloudUiDropdownMultiComponent,
|
|
10299
9915
|
TCloudUiDialogComponent,
|
|
@@ -10429,7 +10045,6 @@ class TCloudUiModule {
|
|
|
10429
10045
|
TCloudUiCardTitleComponent,
|
|
10430
10046
|
TCloudUiCardAccordionComponent,
|
|
10431
10047
|
TCloudUiCalendarComponent,
|
|
10432
|
-
TCloudUiCarouselComponent,
|
|
10433
10048
|
TCloudUiDropdownComponent,
|
|
10434
10049
|
TCloudUiDropdownMultiComponent,
|
|
10435
10050
|
TCloudUiDialogComponent,
|
|
@@ -10527,7 +10142,6 @@ class TCloudUiModule {
|
|
|
10527
10142
|
TCloudUiCardTitleComponent,
|
|
10528
10143
|
TCloudUiCardAccordionComponent,
|
|
10529
10144
|
TCloudUiCalendarComponent,
|
|
10530
|
-
TCloudUiCarouselComponent,
|
|
10531
10145
|
TCloudUiDropdownComponent,
|
|
10532
10146
|
TCloudUiDropdownMultiComponent,
|
|
10533
10147
|
TCloudUiDialogComponent,
|
|
@@ -10626,7 +10240,6 @@ class TCloudUiModule {
|
|
|
10626
10240
|
TCloudUiCardComponent,
|
|
10627
10241
|
TCloudUiCardAccordionComponent,
|
|
10628
10242
|
TCloudUiCalendarComponent,
|
|
10629
|
-
TCloudUiCarouselComponent,
|
|
10630
10243
|
TCloudUiDropdownComponent,
|
|
10631
10244
|
TCloudUiDropdownMultiComponent,
|
|
10632
10245
|
TCloudUiDialogComponent,
|
|
@@ -12672,5 +12285,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
12672
12285
|
* Generated bundle index. Do not edit.
|
|
12673
12286
|
*/
|
|
12674
12287
|
|
|
12675
|
-
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$1 as MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus$1 as 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,
|
|
12288
|
+
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$1 as MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus$1 as 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, TCloudUiDialogComponent, TCloudUiDialogEventsEnum, TCloudUiDialogHostComponent, TCloudUiDialogModel, TCloudUiDialogService, TCloudUiDialogStatusEnum, TCloudUiDialogTextConfirmationEnum, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiDropdownMultiLevelComponent, TCloudUiEditorComponent, TCloudUiEditorDiffComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMarkReadmeComponent, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiProgressStatusBarComponent, 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 };
|
|
12676
12289
|
//# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map
|