@dev-tcloud/tcloud-ui 5.3.2 → 5.3.4
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 +133 -101
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/revitalizacao/components/tc-rev-dropdown/tc-rev-dropdown.component.d.ts +6 -0
- package/lib/revitalizacao/components/tc-rev-search-input/tc-rev-search-input.component.d.ts +5 -2
- package/package.json +1 -1
|
@@ -7247,34 +7247,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7247
7247
|
|
|
7248
7248
|
class TcRevSearchInputComponent {
|
|
7249
7249
|
constructor() {
|
|
7250
|
+
this.searchTextChange = new EventEmitter();
|
|
7250
7251
|
this.searchTextForm = new FormControl('');
|
|
7251
7252
|
this.placeholder = input('');
|
|
7252
|
-
this.searchText = model('');
|
|
7253
7253
|
this.onSearch = output();
|
|
7254
7254
|
}
|
|
7255
|
+
ngOnChanges(_simpleChanges) {
|
|
7256
|
+
if (_simpleChanges['searchText']) {
|
|
7257
|
+
this.searchTextForm.setValue(this.searchText);
|
|
7258
|
+
}
|
|
7259
|
+
}
|
|
7255
7260
|
ngOnInit() {
|
|
7256
7261
|
// Inicializa o FormControl com o valor do model
|
|
7257
|
-
this.searchTextForm.setValue(this.searchText
|
|
7258
|
-
// Escuta mudanças no model e atualiza o FormControl
|
|
7259
|
-
this.searchText.subscribe((newValue) => {
|
|
7260
|
-
if (this.searchTextForm.value !== newValue) {
|
|
7261
|
-
this.searchTextForm.setValue(newValue, { emitEvent: false });
|
|
7262
|
-
}
|
|
7263
|
-
});
|
|
7262
|
+
this.searchTextForm.setValue(this.searchText);
|
|
7264
7263
|
this.searchTextForm.valueChanges
|
|
7265
7264
|
.pipe(debounceTime(500), distinctUntilChanged(), map((text) => text?.toLowerCase() || ''))
|
|
7266
7265
|
.subscribe((text) => {
|
|
7267
|
-
this.
|
|
7266
|
+
this.searchTextChange.emit(text);
|
|
7268
7267
|
this.onSearch.emit(text);
|
|
7269
7268
|
});
|
|
7270
7269
|
}
|
|
7271
7270
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevSearchInputComponent, isStandalone: true, selector: "tc-rev-search-input", inputs: {
|
|
7271
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevSearchInputComponent, isStandalone: true, selector: "tc-rev-search-input", inputs: { searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTextChange: "searchTextChange", onSearch: "onSearch" }, usesOnChanges: true, ngImport: i0, template: "<form class=\"tc-rev-search-input-container\">\n <input\n type=\"text\"\n class=\"tc-rev-search-input-control\"\n [formControl]=\"this.searchTextForm\"\n [placeholder]=\"this.placeholder()\" />\n\n <button class=\"tc-rev-search-input-btn\">\n <i class=\"fa-light fa-magnifying-glass\"></i>\n </button>\n</form>\n\n\n", styles: [":host{display:block}.tc-rev-search-input-container{position:relative;max-height:var(--size-40);min-height:var(--size-40);height:var(--size-40);min-width:7.5rem}.tc-rev-search-input-container .tc-rev-search-input-control{border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);display:inline-block;font-family:var(--f-family);font-size:var(--f-size-14);line-height:var(--l-height-20);outline:none;height:var(--size-40);transition:.2s ease;padding:0 var(--size-16);position:absolute;top:0;left:0;padding-right:var(--size-44);width:100%;z-index:1}.tc-rev-search-input-container .tc-rev-search-input-control:hover,.tc-rev-search-input-container .tc-rev-search-input-control:focus{border-color:var(--c-primary-500)}.tc-rev-search-input-container .tc-rev-search-input-btn{cursor:pointer;display:block;position:absolute;right:4px;top:4px;z-index:2;background-color:var(--c-primary-500);border-radius:var(--bor-radius-rounded);border:none;width:var(--size-32);height:var(--size-32);color:var(--c-neutral-50);font-size:var(--f-size-16)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
7273
7272
|
}
|
|
7274
7273
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevSearchInputComponent, decorators: [{
|
|
7275
7274
|
type: Component,
|
|
7276
7275
|
args: [{ selector: 'tc-rev-search-input', imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<form class=\"tc-rev-search-input-container\">\n <input\n type=\"text\"\n class=\"tc-rev-search-input-control\"\n [formControl]=\"this.searchTextForm\"\n [placeholder]=\"this.placeholder()\" />\n\n <button class=\"tc-rev-search-input-btn\">\n <i class=\"fa-light fa-magnifying-glass\"></i>\n </button>\n</form>\n\n\n", styles: [":host{display:block}.tc-rev-search-input-container{position:relative;max-height:var(--size-40);min-height:var(--size-40);height:var(--size-40);min-width:7.5rem}.tc-rev-search-input-container .tc-rev-search-input-control{border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);display:inline-block;font-family:var(--f-family);font-size:var(--f-size-14);line-height:var(--l-height-20);outline:none;height:var(--size-40);transition:.2s ease;padding:0 var(--size-16);position:absolute;top:0;left:0;padding-right:var(--size-44);width:100%;z-index:1}.tc-rev-search-input-container .tc-rev-search-input-control:hover,.tc-rev-search-input-container .tc-rev-search-input-control:focus{border-color:var(--c-primary-500)}.tc-rev-search-input-container .tc-rev-search-input-btn{cursor:pointer;display:block;position:absolute;right:4px;top:4px;z-index:2;background-color:var(--c-primary-500);border-radius:var(--bor-radius-rounded);border:none;width:var(--size-32);height:var(--size-32);color:var(--c-neutral-50);font-size:var(--f-size-16)}\n"] }]
|
|
7277
|
-
}]
|
|
7276
|
+
}], propDecorators: { searchText: [{
|
|
7277
|
+
type: Input
|
|
7278
|
+
}], searchTextChange: [{
|
|
7279
|
+
type: Output
|
|
7280
|
+
}] } });
|
|
7278
7281
|
|
|
7279
7282
|
var DropdownGroupedSize;
|
|
7280
7283
|
(function (DropdownGroupedSize) {
|
|
@@ -7308,7 +7311,7 @@ class TcRevDropdownGroupedComponent {
|
|
|
7308
7311
|
}
|
|
7309
7312
|
ngOnChanges(_simpleChanges) {
|
|
7310
7313
|
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
7311
|
-
if (_simpleChanges['initialValue'] || _simpleChanges['options']) {
|
|
7314
|
+
if (_simpleChanges['initialValue'] || _simpleChanges['options'] || _simpleChanges['value']) {
|
|
7312
7315
|
const valueToUse = this.value() || this.initialValue();
|
|
7313
7316
|
this.selectedOption.set(this.options().find(option => option.value === valueToUse) || null);
|
|
7314
7317
|
}
|
|
@@ -7389,7 +7392,7 @@ class TcRevDropdownGroupedComponent {
|
|
|
7389
7392
|
return this.getFilteredOptions().length > 0;
|
|
7390
7393
|
}
|
|
7391
7394
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownGroupedComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7392
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevDropdownGroupedComponent, isStandalone: true, selector: "tc-rev-dropdown-grouped", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown-grouped\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [style.width]=\"this.width()\">\n @if (label()) {\n <b>{{label()}}</b>\n }\n {{ selectedOption() ? selectedOption()?.displayValue : placeholder() }}\n <i class=\"fa-light fa-chevron-down mar-l-a\" [class.rotate]=\"isOpen\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen\"\n class=\"tc-rev-dropdown-menu\"\n [style.width]=\"this.width()\">\n <!-- Input de busca -->\n @if (showSearch()) {\n <div class=\"tc-rev-dropdown-search\">\n <tc-rev-search-input (onSearch)=\"onSearchChange($event)\" [placeholder]=\"this.searchPlaceholder()\" />\n </div>\n <!-- <div class=\"tc-rev-dropdown-search\">\n <i class=\"fa-light fa-magnifying-glass search-icon\"></i>\n <input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchChange($event)\"\n class=\"search-input\">\n @if (searchTerm()) {\n <button\n type=\"button\"\n class=\"clear-search\"\n (click)=\"clearSearch()\"\n title=\"Limpar busca\">\n <i class=\"fa-light fa-xmark\"></i>\n </button>\n }\n </div> -->\n }\n\n <!-- Lista de op\u00E7\u00F5es agrupadas -->\n @if (hasResults()) {\n <ul class=\"tc-rev-dropdown-options\">\n @for (group of getGroupedOptions(); track group.groupName) {\n <li class=\"tc-rev-dropdown-group\">\n <div class=\"tc-rev-dropdown-group-header\">\n {{ group.groupName }}\n </div>\n <ul class=\"tc-rev-dropdown-group-options\">\n @for (option of group.options; track option?.value) {\n <li\n class=\"tc-rev-dropdown-menu-item\"\n (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\">\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </li>\n }\n </ul>\n } @else {\n <div class=\"tc-rev-dropdown-no-results f-family\">\n <i class=\"fa-light fa-magnifying-glass\"></i>\n <span>Nenhum resultado encontrado</span>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-grouped{position:relative;display:inline-block}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle{background-color:transparent;border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--size-4);font-family:var(--f-family);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);min-width:5rem}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i.rotate{transform:rotate(-180deg)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i{transition:transform .2s ease}.tc-rev-dropdown-grouped .tc-rev-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);max-height:20rem;overflow:hidden;width:100%;min-width:10rem;z-index:1000;display:flex;flex-direction:column}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search{position:relative;padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);background-color:var(--c-neutral-50)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-icon{position:absolute;left:var(--size-20);top:50%;transform:translateY(-50%);color:var(--c-neutral-500);font-size:var(--f-size-14)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input{width:100%;height:var(--size-40);padding:var(--size-8) var(--size-12) var(--size-8) var(--size-36);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);outline:none;transition:border-color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input::placeholder{color:var(--c-neutral-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search{position:absolute;right:var(--size-20);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-4);border-radius:var(--bor-radius-4);transition:color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search:hover{color:var(--c-neutral-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-12);font-weight:var(--f-weight-600);line-height:var(--l-height-16);padding:var(--size-8);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-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-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%}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-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)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled:hover{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--size-24);color:var(--c-neutral-500);text-align:center}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results i{font-size:var(--f-size-24);margin-bottom:var(--size-8);opacity:.5}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results span{font-size:var(--f-size-12);line-height:var(--l-height-16)}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle:hover{border-color:var(--c-neutral-300)}\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: "component", type: TcRevSearchInputComponent, selector: "tc-rev-search-input", inputs: ["placeholder", "searchText"], outputs: ["searchTextChange", "onSearch"] }] }); }
|
|
7395
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevDropdownGroupedComponent, isStandalone: true, selector: "tc-rev-dropdown-grouped", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown-grouped\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [style.width]=\"this.width()\">\n @if (label()) {\n <b>{{label()}}</b>\n }\n {{ selectedOption() ? selectedOption()?.displayValue : placeholder() }}\n <i class=\"fa-light fa-chevron-down mar-l-a\" [class.rotate]=\"isOpen\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen\"\n class=\"tc-rev-dropdown-menu\"\n [style.width]=\"this.width()\">\n <!-- Input de busca -->\n @if (showSearch()) {\n <div class=\"tc-rev-dropdown-search\">\n <tc-rev-search-input (onSearch)=\"onSearchChange($event)\" [placeholder]=\"this.searchPlaceholder()\" />\n </div>\n <!-- <div class=\"tc-rev-dropdown-search\">\n <i class=\"fa-light fa-magnifying-glass search-icon\"></i>\n <input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchChange($event)\"\n class=\"search-input\">\n @if (searchTerm()) {\n <button\n type=\"button\"\n class=\"clear-search\"\n (click)=\"clearSearch()\"\n title=\"Limpar busca\">\n <i class=\"fa-light fa-xmark\"></i>\n </button>\n }\n </div> -->\n }\n\n <!-- Lista de op\u00E7\u00F5es agrupadas -->\n @if (hasResults()) {\n <ul class=\"tc-rev-dropdown-options\">\n @for (group of getGroupedOptions(); track group.groupName) {\n <li class=\"tc-rev-dropdown-group\">\n <div class=\"tc-rev-dropdown-group-header\">\n {{ group.groupName }}\n </div>\n <ul class=\"tc-rev-dropdown-group-options\">\n @for (option of group.options; track option?.value) {\n <li\n class=\"tc-rev-dropdown-menu-item\"\n (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\">\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </li>\n }\n </ul>\n } @else {\n <div class=\"tc-rev-dropdown-no-results f-family\">\n <i class=\"fa-light fa-magnifying-glass\"></i>\n <span>Nenhum resultado encontrado</span>\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-grouped{position:relative;display:inline-block}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle{background-color:transparent;border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--size-4);font-family:var(--f-family);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);min-width:5rem}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i.rotate{transform:rotate(-180deg)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i{transition:transform .2s ease}.tc-rev-dropdown-grouped .tc-rev-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);max-height:20rem;overflow:hidden;width:100%;min-width:10rem;z-index:1000;display:flex;flex-direction:column}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search{position:relative;padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);background-color:var(--c-neutral-50)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-icon{position:absolute;left:var(--size-20);top:50%;transform:translateY(-50%);color:var(--c-neutral-500);font-size:var(--f-size-14)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input{width:100%;height:var(--size-40);padding:var(--size-8) var(--size-12) var(--size-8) var(--size-36);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);outline:none;transition:border-color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input::placeholder{color:var(--c-neutral-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search{position:absolute;right:var(--size-20);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-4);border-radius:var(--bor-radius-4);transition:color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search:hover{color:var(--c-neutral-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-12);font-weight:var(--f-weight-600);line-height:var(--l-height-16);padding:var(--size-8);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-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-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%}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-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)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled:hover{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--size-24);color:var(--c-neutral-500);text-align:center}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results i{font-size:var(--f-size-24);margin-bottom:var(--size-8);opacity:.5}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results span{font-size:var(--f-size-12);line-height:var(--l-height-16)}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle:hover{border-color:var(--c-neutral-300)}\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: "component", type: TcRevSearchInputComponent, selector: "tc-rev-search-input", inputs: ["searchText", "placeholder"], outputs: ["searchTextChange", "onSearch"] }] }); }
|
|
7393
7396
|
}
|
|
7394
7397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownGroupedComponent, decorators: [{
|
|
7395
7398
|
type: Component,
|
|
@@ -7525,7 +7528,7 @@ class TcRevDropdownMultiComponent {
|
|
|
7525
7528
|
}
|
|
7526
7529
|
ngOnChanges(_simpleChanges) {
|
|
7527
7530
|
// Atualiza as opções selecionadas quando os valores pré-selecionados mudam
|
|
7528
|
-
if (_simpleChanges['initialValues'] || _simpleChanges['options']) {
|
|
7531
|
+
if (_simpleChanges['initialValues'] || _simpleChanges['options'] || _simpleChanges['values']) {
|
|
7529
7532
|
const valuesToUse = this.values().length > 0 ? this.values() : this.initialValues();
|
|
7530
7533
|
const selected = this.options().filter(option => valuesToUse.includes(option.value));
|
|
7531
7534
|
this.selectedOptions.set(selected);
|
|
@@ -7648,6 +7651,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7648
7651
|
args: ['document:click', ['$event']]
|
|
7649
7652
|
}] } });
|
|
7650
7653
|
|
|
7654
|
+
/**
|
|
7655
|
+
* Verifica se um elemento de texto está elipsado (texto cortado com ...)
|
|
7656
|
+
* @param element - O elemento HTML que contém o texto
|
|
7657
|
+
* @returns true se o texto estiver elipsado, false caso contrário
|
|
7658
|
+
*/
|
|
7659
|
+
function isElementTextEllipsed(element) {
|
|
7660
|
+
if (!element)
|
|
7661
|
+
return false;
|
|
7662
|
+
// Verifica se o scrollWidth é maior que o clientWidth
|
|
7663
|
+
// Isso indica que o texto está sendo cortado
|
|
7664
|
+
return element.scrollWidth > element.clientWidth;
|
|
7665
|
+
}
|
|
7666
|
+
/**
|
|
7667
|
+
* Verifica se um texto específico estaria elipsado baseado no texto fornecido
|
|
7668
|
+
* @param text - O texto a ser verificado
|
|
7669
|
+
* @param containerWidth - Largura do container (opcional, usa o padrão se não informado)
|
|
7670
|
+
* @returns true se o texto seria elipsado
|
|
7671
|
+
*/
|
|
7672
|
+
function isTextEllipsed(text, containerWidth) {
|
|
7673
|
+
if (!text)
|
|
7674
|
+
return false;
|
|
7675
|
+
// Cria um elemento temporário para medir o texto
|
|
7676
|
+
const tempElement = document.createElement('span');
|
|
7677
|
+
tempElement.style.visibility = 'hidden';
|
|
7678
|
+
tempElement.style.position = 'absolute';
|
|
7679
|
+
tempElement.style.whiteSpace = 'nowrap';
|
|
7680
|
+
tempElement.style.fontSize = '1rem'; // f-md
|
|
7681
|
+
tempElement.style.fontWeight = '500'; // f-weight-500
|
|
7682
|
+
tempElement.style.fontFamily = getComputedStyle(document.body).fontFamily;
|
|
7683
|
+
tempElement.textContent = text;
|
|
7684
|
+
document.body.appendChild(tempElement);
|
|
7685
|
+
const textWidth = tempElement.scrollWidth;
|
|
7686
|
+
// Calcula a largura máxima disponível: largura do container menos espaço do botão e margins
|
|
7687
|
+
const maxWidth = containerWidth || 150; // ~150px considerando o botão de 24px + margens
|
|
7688
|
+
document.body.removeChild(tempElement);
|
|
7689
|
+
return textWidth > maxWidth;
|
|
7690
|
+
}
|
|
7691
|
+
// export class EllipsedTextHelper
|
|
7692
|
+
// {
|
|
7693
|
+
// public static isEllipsed(id: string): boolean
|
|
7694
|
+
// {
|
|
7695
|
+
// const element = document.querySelector<any>(`#${id}`);
|
|
7696
|
+
// return element ? (element.offsetWidth < element.scrollWidth) : false;
|
|
7697
|
+
// }
|
|
7698
|
+
// /**
|
|
7699
|
+
// *
|
|
7700
|
+
// * @param _textField - Stands for the text you want to compare
|
|
7701
|
+
// * @param _fontProperties - Text CSS properties (font-size & font-family)
|
|
7702
|
+
// * @param _divId - divId you want to compare
|
|
7703
|
+
// * @param _isEllipsed - is it Ellipsed? (optional)
|
|
7704
|
+
// */
|
|
7705
|
+
// public static calculate( _textField: string, _fontProperties: string, _divId: string, _isEllipsed: boolean = false, _whiteSpaceNoWrap = true): boolean
|
|
7706
|
+
// {
|
|
7707
|
+
// if (_isEllipsed)
|
|
7708
|
+
// {
|
|
7709
|
+
// return true;
|
|
7710
|
+
// }
|
|
7711
|
+
// const textDiv = document.getElementById(_divId);
|
|
7712
|
+
// if (textDiv)
|
|
7713
|
+
// {
|
|
7714
|
+
// const widthText = this.textWidthCalc(_textField, _fontProperties, _whiteSpaceNoWrap);
|
|
7715
|
+
// return widthText > textDiv.clientWidth;
|
|
7716
|
+
// }
|
|
7717
|
+
// return false
|
|
7718
|
+
// }
|
|
7719
|
+
// public static textWidthCalc(_text: string, _fontProperties: string, _whiteSpaceNoWrap: boolean): number
|
|
7720
|
+
// {
|
|
7721
|
+
// let tag = document.createElement('div');
|
|
7722
|
+
// tag.style.position = 'absolute';
|
|
7723
|
+
// tag.style.left = '-99in';
|
|
7724
|
+
// tag.style.font = _fontProperties;
|
|
7725
|
+
// tag.innerHTML = _text;
|
|
7726
|
+
// if (_whiteSpaceNoWrap)
|
|
7727
|
+
// {
|
|
7728
|
+
// tag.style.whiteSpace = 'nowrap';
|
|
7729
|
+
// }
|
|
7730
|
+
// document.body.appendChild(tag);
|
|
7731
|
+
// const result = tag.clientWidth;
|
|
7732
|
+
// document.body.removeChild(tag);
|
|
7733
|
+
// return result;
|
|
7734
|
+
// }
|
|
7735
|
+
// }
|
|
7736
|
+
|
|
7651
7737
|
var DropdownSize;
|
|
7652
7738
|
(function (DropdownSize) {
|
|
7653
7739
|
DropdownSize["sm"] = "sm";
|
|
@@ -7668,7 +7754,7 @@ class TcRevDropdownComponent {
|
|
|
7668
7754
|
this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
|
|
7669
7755
|
this.value = model(null); // Two-way binding para o valor selecionado
|
|
7670
7756
|
this.size = input(DropdownSize.sm);
|
|
7671
|
-
this.width = input(''); // Largura do dropdown
|
|
7757
|
+
this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
|
|
7672
7758
|
this.optionSelected = output(); // Emissor para o valor selecionado
|
|
7673
7759
|
this.selectedOption = signal(null); // Opção selecionada
|
|
7674
7760
|
this.isOpen = false; // Controla se o dropdown está aberto
|
|
@@ -7676,7 +7762,7 @@ class TcRevDropdownComponent {
|
|
|
7676
7762
|
}
|
|
7677
7763
|
ngOnChanges(_simpleChanges) {
|
|
7678
7764
|
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
7679
|
-
if (_simpleChanges['initialValue'] || _simpleChanges['options']) {
|
|
7765
|
+
if (_simpleChanges['initialValue'] || _simpleChanges['options'] || _simpleChanges['value']) {
|
|
7680
7766
|
const valueToUse = this.value() || this.initialValue();
|
|
7681
7767
|
this.selectedOption.set(this.options().find(option => option.value === valueToUse) || null);
|
|
7682
7768
|
}
|
|
@@ -7707,8 +7793,36 @@ class TcRevDropdownComponent {
|
|
|
7707
7793
|
this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
|
|
7708
7794
|
this.isOpen = false; // Fecha o dropdown
|
|
7709
7795
|
}
|
|
7796
|
+
/**
|
|
7797
|
+
* Verifica se o texto de uma opção na lista está elipsado
|
|
7798
|
+
* @param text - Texto a ser verificado
|
|
7799
|
+
* @returns true se o texto estiver elipsado
|
|
7800
|
+
*/
|
|
7801
|
+
isOptionEllipsed(text) {
|
|
7802
|
+
if (!text)
|
|
7803
|
+
return false;
|
|
7804
|
+
// Calcula a largura disponível para o texto nas opções da lista
|
|
7805
|
+
const menuElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown-menu');
|
|
7806
|
+
if (!menuElement) {
|
|
7807
|
+
// Se o menu não está aberto, usa a largura do dropdown
|
|
7808
|
+
const dropdownElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown');
|
|
7809
|
+
if (!dropdownElement)
|
|
7810
|
+
return false;
|
|
7811
|
+
const dropdownWidth = dropdownElement.clientWidth;
|
|
7812
|
+
const padding = 16; // 8px de cada lado do botão
|
|
7813
|
+
const iconSpace = 24; // Espaço do ícone de check quando selecionado
|
|
7814
|
+
const availableWidth = Math.max(50, dropdownWidth - padding - iconSpace);
|
|
7815
|
+
return isTextEllipsed(text, availableWidth);
|
|
7816
|
+
}
|
|
7817
|
+
// Largura do menu menos padding do item (16px total) e espaço do ícone de check (24px)
|
|
7818
|
+
const menuWidth = menuElement.clientWidth;
|
|
7819
|
+
const padding = 16; // 8px de cada lado do botão do item
|
|
7820
|
+
const iconSpace = 24; // Espaço do ícone de check quando selecionado
|
|
7821
|
+
const availableWidth = Math.max(50, menuWidth - padding - iconSpace);
|
|
7822
|
+
return isTextEllipsed(text, availableWidth);
|
|
7823
|
+
}
|
|
7710
7824
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7711
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevDropdownComponent, isStandalone: true, selector: "tc-rev-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 } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"
|
|
7825
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevDropdownComponent, isStandalone: true, selector: "tc-rev-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 } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\">\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"tc-rev-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\n *ngIf=\"isOpen\" class=\"tc-rev-dropdown-menu\">\n @for (option of options(); track option?.value)\n {\n <li\n class=\"tc-rev-dropdown-menu-item\"\n (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\">\n <span\n class=\"tc-rev-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [TCtooltip]=\"isOptionEllipsed(option.displayValue) ? option.displayValue : ''\"\n TCdirection=\"top\">\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:transparent;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%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-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}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-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%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-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)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-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}\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: "ngmodule", type: TCloudUiDirectiveModule }, { kind: "directive", type: TCloudUiTooltipDirective, selector: "[TCtooltip]", inputs: ["tooltipMode", "TCtooltip", "TCdirection"] }] }); }
|
|
7712
7826
|
}
|
|
7713
7827
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
|
|
7714
7828
|
type: Component,
|
|
@@ -7716,7 +7830,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7716
7830
|
CommonModule,
|
|
7717
7831
|
FormsModule,
|
|
7718
7832
|
ReactiveFormsModule,
|
|
7719
|
-
|
|
7833
|
+
TCloudUiDirectiveModule
|
|
7834
|
+
], template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\">\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"tc-rev-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\n *ngIf=\"isOpen\" class=\"tc-rev-dropdown-menu\">\n @for (option of options(); track option?.value)\n {\n <li\n class=\"tc-rev-dropdown-menu-item\"\n (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\">\n <span\n class=\"tc-rev-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [TCtooltip]=\"isOptionEllipsed(option.displayValue) ? option.displayValue : ''\"\n TCdirection=\"top\">\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:transparent;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%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-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}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-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%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-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)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-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}\n"] }]
|
|
7720
7835
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
7721
7836
|
type: HostListener,
|
|
7722
7837
|
args: ['document:click', ['$event']]
|
|
@@ -7948,89 +8063,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7948
8063
|
type: Input
|
|
7949
8064
|
}] } });
|
|
7950
8065
|
|
|
7951
|
-
/**
|
|
7952
|
-
* Verifica se um elemento de texto está elipsado (texto cortado com ...)
|
|
7953
|
-
* @param element - O elemento HTML que contém o texto
|
|
7954
|
-
* @returns true se o texto estiver elipsado, false caso contrário
|
|
7955
|
-
*/
|
|
7956
|
-
function isElementTextEllipsed(element) {
|
|
7957
|
-
if (!element)
|
|
7958
|
-
return false;
|
|
7959
|
-
// Verifica se o scrollWidth é maior que o clientWidth
|
|
7960
|
-
// Isso indica que o texto está sendo cortado
|
|
7961
|
-
return element.scrollWidth > element.clientWidth;
|
|
7962
|
-
}
|
|
7963
|
-
/**
|
|
7964
|
-
* Verifica se um texto específico estaria elipsado baseado no texto fornecido
|
|
7965
|
-
* @param text - O texto a ser verificado
|
|
7966
|
-
* @param containerWidth - Largura do container (opcional, usa o padrão se não informado)
|
|
7967
|
-
* @returns true se o texto seria elipsado
|
|
7968
|
-
*/
|
|
7969
|
-
function isTextEllipsed(text, containerWidth) {
|
|
7970
|
-
if (!text)
|
|
7971
|
-
return false;
|
|
7972
|
-
// Cria um elemento temporário para medir o texto
|
|
7973
|
-
const tempElement = document.createElement('span');
|
|
7974
|
-
tempElement.style.visibility = 'hidden';
|
|
7975
|
-
tempElement.style.position = 'absolute';
|
|
7976
|
-
tempElement.style.whiteSpace = 'nowrap';
|
|
7977
|
-
tempElement.style.fontSize = '1rem'; // f-md
|
|
7978
|
-
tempElement.style.fontWeight = '500'; // f-weight-500
|
|
7979
|
-
tempElement.style.fontFamily = getComputedStyle(document.body).fontFamily;
|
|
7980
|
-
tempElement.textContent = text;
|
|
7981
|
-
document.body.appendChild(tempElement);
|
|
7982
|
-
const textWidth = tempElement.scrollWidth;
|
|
7983
|
-
// Calcula a largura máxima disponível: largura do container menos espaço do botão e margins
|
|
7984
|
-
const maxWidth = containerWidth || 150; // ~150px considerando o botão de 24px + margens
|
|
7985
|
-
document.body.removeChild(tempElement);
|
|
7986
|
-
return textWidth > maxWidth;
|
|
7987
|
-
}
|
|
7988
|
-
// export class EllipsedTextHelper
|
|
7989
|
-
// {
|
|
7990
|
-
// public static isEllipsed(id: string): boolean
|
|
7991
|
-
// {
|
|
7992
|
-
// const element = document.querySelector<any>(`#${id}`);
|
|
7993
|
-
// return element ? (element.offsetWidth < element.scrollWidth) : false;
|
|
7994
|
-
// }
|
|
7995
|
-
// /**
|
|
7996
|
-
// *
|
|
7997
|
-
// * @param _textField - Stands for the text you want to compare
|
|
7998
|
-
// * @param _fontProperties - Text CSS properties (font-size & font-family)
|
|
7999
|
-
// * @param _divId - divId you want to compare
|
|
8000
|
-
// * @param _isEllipsed - is it Ellipsed? (optional)
|
|
8001
|
-
// */
|
|
8002
|
-
// public static calculate( _textField: string, _fontProperties: string, _divId: string, _isEllipsed: boolean = false, _whiteSpaceNoWrap = true): boolean
|
|
8003
|
-
// {
|
|
8004
|
-
// if (_isEllipsed)
|
|
8005
|
-
// {
|
|
8006
|
-
// return true;
|
|
8007
|
-
// }
|
|
8008
|
-
// const textDiv = document.getElementById(_divId);
|
|
8009
|
-
// if (textDiv)
|
|
8010
|
-
// {
|
|
8011
|
-
// const widthText = this.textWidthCalc(_textField, _fontProperties, _whiteSpaceNoWrap);
|
|
8012
|
-
// return widthText > textDiv.clientWidth;
|
|
8013
|
-
// }
|
|
8014
|
-
// return false
|
|
8015
|
-
// }
|
|
8016
|
-
// public static textWidthCalc(_text: string, _fontProperties: string, _whiteSpaceNoWrap: boolean): number
|
|
8017
|
-
// {
|
|
8018
|
-
// let tag = document.createElement('div');
|
|
8019
|
-
// tag.style.position = 'absolute';
|
|
8020
|
-
// tag.style.left = '-99in';
|
|
8021
|
-
// tag.style.font = _fontProperties;
|
|
8022
|
-
// tag.innerHTML = _text;
|
|
8023
|
-
// if (_whiteSpaceNoWrap)
|
|
8024
|
-
// {
|
|
8025
|
-
// tag.style.whiteSpace = 'nowrap';
|
|
8026
|
-
// }
|
|
8027
|
-
// document.body.appendChild(tag);
|
|
8028
|
-
// const result = tag.clientWidth;
|
|
8029
|
-
// document.body.removeChild(tag);
|
|
8030
|
-
// return result;
|
|
8031
|
-
// }
|
|
8032
|
-
// }
|
|
8033
|
-
|
|
8034
8066
|
class TcRevMultiInputComponent {
|
|
8035
8067
|
constructor() {
|
|
8036
8068
|
this.autoFocus = false;
|