@dev-tcloud/tcloud-ui 5.4.6-beta.2 → 5.4.6
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter, Input, Output, Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, forwardRef, ViewChild, Pipe, ViewEncapsulation, Directive, HostListener, Optional, Inject, signal, computed, inject, ApplicationRef, input, effect, output, model, ChangeDetectionStrategy, ContentChildren } from '@angular/core';
|
|
2
|
+
import { Injectable, EventEmitter, Input, Output, Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, forwardRef, ViewChild, Pipe, ViewEncapsulation, Directive, HostListener, Optional, Inject, signal, computed, inject, ApplicationRef, input, effect, output, model, viewChild, ChangeDetectionStrategy, ContentChildren } 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, debounceTime, distinctUntilChanged, map, BehaviorSubject } from 'rxjs';
|
|
@@ -7343,9 +7343,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
7343
7343
|
class TcRevSearchInputComponent {
|
|
7344
7344
|
constructor() {
|
|
7345
7345
|
this.searchTextChange = new EventEmitter();
|
|
7346
|
+
this.searchInput = viewChild('searchInput');
|
|
7346
7347
|
this.searchTextForm = new FormControl('');
|
|
7347
7348
|
this.placeholder = input('');
|
|
7348
7349
|
this.onSearch = output();
|
|
7350
|
+
this.autoFocus = input(false);
|
|
7349
7351
|
}
|
|
7350
7352
|
ngOnChanges(_simpleChanges) {
|
|
7351
7353
|
if (_simpleChanges['searchText']) {
|
|
@@ -7362,12 +7364,17 @@ class TcRevSearchInputComponent {
|
|
|
7362
7364
|
this.onSearch.emit(text);
|
|
7363
7365
|
});
|
|
7364
7366
|
}
|
|
7367
|
+
ngAfterViewInit() {
|
|
7368
|
+
if (this.autoFocus() && this.searchInput) {
|
|
7369
|
+
this.searchInput().nativeElement.focus();
|
|
7370
|
+
}
|
|
7371
|
+
}
|
|
7365
7372
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7366
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
7373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.17", 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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTextChange: "searchTextChange", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], 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 #searchInput\n />\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"] }] }); }
|
|
7367
7374
|
}
|
|
7368
7375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevSearchInputComponent, decorators: [{
|
|
7369
7376
|
type: Component,
|
|
7370
|
-
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()\"
|
|
7377
|
+
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 #searchInput\n />\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"] }]
|
|
7371
7378
|
}], propDecorators: { searchText: [{
|
|
7372
7379
|
type: Input
|
|
7373
7380
|
}], searchTextChange: [{
|
|
@@ -7487,7 +7494,7 @@ class TcRevDropdownGroupedComponent {
|
|
|
7487
7494
|
return this.getFilteredOptions().length > 0;
|
|
7488
7495
|
}
|
|
7489
7496
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevDropdownGroupedComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7490
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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"] }] }); }
|
|
7497
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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", "autoFocus"], outputs: ["searchTextChange", "onSearch"] }] }); }
|
|
7491
7498
|
}
|
|
7492
7499
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevDropdownGroupedComponent, decorators: [{
|
|
7493
7500
|
type: Component,
|