@dev-tcloud/tcloud-ui 5.1.8 → 5.1.9
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 +151 -14
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/revitalizacao/components/tc-rev-components.module.d.ts +24 -23
- package/lib/revitalizacao/components/tc-rev-dropdown/tc-rev-dropdown.component.d.ts +2 -2
- package/lib/revitalizacao/components/tc-rev-dropdown-grouped/tc-rev-dropdown-grouped.component.d.ts +2 -2
- package/lib/revitalizacao/components/tc-rev-dropdown-multi/tc-rev-dropdown-multi.component.d.ts +43 -0
- package/lib/revitalizacao/components/tc-rev-dropdown-multi-level/tc-rev-dropdown-multi-level.component.d.ts +2 -2
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -7273,7 +7273,7 @@ class TcRevDropdownGroupedComponent {
|
|
|
7273
7273
|
this.label = input(''); // Label que será exibida
|
|
7274
7274
|
this.disabled = input(false); // Desabilita o dropdown
|
|
7275
7275
|
this.options = input.required(); // Lista de opções agrupadas
|
|
7276
|
-
this.
|
|
7276
|
+
this.initialValue = input(null); // Valor pré-selecionado
|
|
7277
7277
|
this.size = input(DropdownGroupedSize.sm);
|
|
7278
7278
|
this.placeholder = input('Selecione');
|
|
7279
7279
|
this.searchPlaceholder = input('Buscar...');
|
|
@@ -7287,12 +7287,12 @@ class TcRevDropdownGroupedComponent {
|
|
|
7287
7287
|
}
|
|
7288
7288
|
ngOnChanges(_simpleChanges) {
|
|
7289
7289
|
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
7290
|
-
if (_simpleChanges['
|
|
7291
|
-
this.selectedOption.set(this.options().find(option => option.value === this.
|
|
7290
|
+
if (_simpleChanges['initialValue'] || _simpleChanges['options']) {
|
|
7291
|
+
this.selectedOption.set(this.options().find(option => option.value === this.initialValue()) || null);
|
|
7292
7292
|
}
|
|
7293
7293
|
}
|
|
7294
7294
|
ngOnInit() {
|
|
7295
|
-
this.selectedOption.set(this.options().find(option => option.value === this.
|
|
7295
|
+
this.selectedOption.set(this.options().find(option => option.value === this.initialValue()) || null);
|
|
7296
7296
|
}
|
|
7297
7297
|
toggleDropdown() {
|
|
7298
7298
|
if (!this.disabled()) {
|
|
@@ -7352,7 +7352,7 @@ class TcRevDropdownGroupedComponent {
|
|
|
7352
7352
|
return this.getFilteredOptions().length > 0;
|
|
7353
7353
|
}
|
|
7354
7354
|
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 }); }
|
|
7355
|
-
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 }, preselectedValue: { classPropertyName: "preselectedValue", publicName: "preselectedValue", 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: { 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"], outputs: ["onSearch"] }] }); }
|
|
7355
|
+
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 }, 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: { 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"], outputs: ["onSearch"] }] }); }
|
|
7356
7356
|
}
|
|
7357
7357
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownGroupedComponent, decorators: [{
|
|
7358
7358
|
type: Component,
|
|
@@ -7402,7 +7402,7 @@ class TcRevDropdownMultiLevelComponent {
|
|
|
7402
7402
|
this.subMenuPosition = input('right');
|
|
7403
7403
|
this.disabled = input(false);
|
|
7404
7404
|
this.size = input(MultiLevelDropdownSize.sm);
|
|
7405
|
-
this.
|
|
7405
|
+
this.initialValue = input(null); // Valor pré-selecionado
|
|
7406
7406
|
this.optionSelected = output();
|
|
7407
7407
|
this.selectedOption = signal(null);
|
|
7408
7408
|
this.selectedParentOption = signal(null);
|
|
@@ -7411,7 +7411,7 @@ class TcRevDropdownMultiLevelComponent {
|
|
|
7411
7411
|
}
|
|
7412
7412
|
ngOnChanges(_simpleChanges) {
|
|
7413
7413
|
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
7414
|
-
if (_simpleChanges['
|
|
7414
|
+
if (_simpleChanges['initialValue'] || _simpleChanges['menu']) {
|
|
7415
7415
|
this.selectedOption.set(null);
|
|
7416
7416
|
this.selectedParentOption.set(null);
|
|
7417
7417
|
}
|
|
@@ -7442,7 +7442,7 @@ class TcRevDropdownMultiLevelComponent {
|
|
|
7442
7442
|
this.selectOption(option, parentOption);
|
|
7443
7443
|
}
|
|
7444
7444
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownMultiLevelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7445
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevDropdownMultiLevelComponent, isStandalone: true, selector: "tc-rev-dropdown-multi-level", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, subMenuPosition: { classPropertyName: "subMenuPosition", publicName: "subMenuPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null },
|
|
7445
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevDropdownMultiLevelComponent, isStandalone: true, selector: "tc-rev-dropdown-multi-level", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, subMenuPosition: { classPropertyName: "subMenuPosition", publicName: "subMenuPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuRoot", first: true, predicate: ["menuRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tc-rev-dropdown-multi-level\">\n <button\n class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--dark-outline tc-rev-dropdown-toggle\"\n [class.tc-rev-btn--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-btn--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-btn--lg]=\"this.size() === dropdownSize.lg\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tc-rev-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li \n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"hoveredIndex = i\"\n (mouseleave)=\"hoveredIndex = null\"\n (click)=\"this.selectParentItem($event, item, item)\">\n {{ item.displayValue }}\n @if (this.selectedParentOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n }\n @if (item?.children?.length && hoveredIndex === i)\n {\n <tc-rev-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"subMenuPosition()\"\n [parentOffsetTop]=\"getItemOffsetTop(i)\"\n [selectedOption]=\"this.selectedOption()\"\n (onOptionSelected)=\"this.selectOption($event, item)\">\n </tc-rev-dropdown-sub-menu>\n }\n </li>\n }\n }\n\t</ul>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-multi-level{position:relative;display:inline-block}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle{align-items:center;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tc-rev-dropdown-multi-level__menu-list{background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);box-shadow:var(--shadow-md);color:var(--c-neutral-700);left:0;list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;position:absolute;top:110%;width:100%;z-index:1000}.tc-rev-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);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-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-multi-level__menu-list .menu-item.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-multi-level__menu-list .menu-item: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: "component", type: TcRevDropdownSubMenuComponent, selector: "tc-rev-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }] }); }
|
|
7446
7446
|
}
|
|
7447
7447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownMultiLevelComponent, decorators: [{
|
|
7448
7448
|
type: Component,
|
|
@@ -7458,6 +7458,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7458
7458
|
args: ['menuRoot', { static: false }]
|
|
7459
7459
|
}] } });
|
|
7460
7460
|
|
|
7461
|
+
var DropdownMultiSize;
|
|
7462
|
+
(function (DropdownMultiSize) {
|
|
7463
|
+
DropdownMultiSize["sm"] = "sm";
|
|
7464
|
+
DropdownMultiSize["md"] = "md";
|
|
7465
|
+
DropdownMultiSize["lg"] = "lg";
|
|
7466
|
+
})(DropdownMultiSize || (DropdownMultiSize = {}));
|
|
7467
|
+
class TcRevDropdownMultiComponent {
|
|
7468
|
+
onDocumentClick(event) {
|
|
7469
|
+
if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
|
|
7470
|
+
this.isOpen = false;
|
|
7471
|
+
}
|
|
7472
|
+
}
|
|
7473
|
+
constructor(elementRef) {
|
|
7474
|
+
this.elementRef = elementRef;
|
|
7475
|
+
this.label = input(''); // Label que será exibida
|
|
7476
|
+
this.disabled = input(false); // Desabilita o dropdown
|
|
7477
|
+
this.options = input.required(); // Lista de opções no novo formato
|
|
7478
|
+
this.initialValues = input([]); // Valores pré-selecionados
|
|
7479
|
+
this.size = input(DropdownMultiSize.sm);
|
|
7480
|
+
this.width = input(''); // Largura do dropdown
|
|
7481
|
+
this.placeholder = input('Selecione'); // Placeholder quando nenhum item estiver selecionado
|
|
7482
|
+
this.maxDisplayItems = input(2); // Máximo de itens a serem exibidos no botão
|
|
7483
|
+
this.optionsSelected = output(); // Emissor para os valores selecionados
|
|
7484
|
+
this.selectedOptions = signal([]); // Opções selecionadas
|
|
7485
|
+
this.isOpen = false; // Controla se o dropdown está aberto
|
|
7486
|
+
this.dropdownSize = DropdownMultiSize;
|
|
7487
|
+
}
|
|
7488
|
+
ngOnChanges(_simpleChanges) {
|
|
7489
|
+
// Atualiza as opções selecionadas quando os valores pré-selecionados mudam
|
|
7490
|
+
if (_simpleChanges['initialValues'] || _simpleChanges['options']) {
|
|
7491
|
+
const preselected = this.initialValues();
|
|
7492
|
+
const selected = this.options().filter(option => preselected.includes(option.value));
|
|
7493
|
+
this.selectedOptions.set(selected);
|
|
7494
|
+
}
|
|
7495
|
+
}
|
|
7496
|
+
ngOnInit() {
|
|
7497
|
+
const preselected = this.initialValues();
|
|
7498
|
+
const selected = this.options().filter(option => preselected.includes(option.value));
|
|
7499
|
+
this.selectedOptions.set(selected);
|
|
7500
|
+
}
|
|
7501
|
+
toggleDropdown() {
|
|
7502
|
+
if (!this.disabled()) {
|
|
7503
|
+
this.isOpen = !this.isOpen;
|
|
7504
|
+
}
|
|
7505
|
+
}
|
|
7506
|
+
toggleOption(option, event) {
|
|
7507
|
+
event.stopPropagation();
|
|
7508
|
+
if (option.disabled)
|
|
7509
|
+
return;
|
|
7510
|
+
const currentSelected = this.selectedOptions();
|
|
7511
|
+
const isSelected = currentSelected.some(selected => selected.value === option.value);
|
|
7512
|
+
let newSelected;
|
|
7513
|
+
if (isSelected) {
|
|
7514
|
+
// Remove a opção se já estiver selecionada
|
|
7515
|
+
newSelected = currentSelected.filter(selected => selected.value !== option.value);
|
|
7516
|
+
}
|
|
7517
|
+
else {
|
|
7518
|
+
// Adiciona a opção se não estiver selecionada
|
|
7519
|
+
newSelected = [...currentSelected, option];
|
|
7520
|
+
}
|
|
7521
|
+
this.selectedOptions.set(newSelected);
|
|
7522
|
+
this.optionsSelected.emit(newSelected.map(opt => opt.value));
|
|
7523
|
+
}
|
|
7524
|
+
isOptionSelected(option) {
|
|
7525
|
+
return this.selectedOptions().some(selected => selected.value === option.value);
|
|
7526
|
+
}
|
|
7527
|
+
getDisplayText() {
|
|
7528
|
+
const selected = this.selectedOptions();
|
|
7529
|
+
if (selected.length === 0) {
|
|
7530
|
+
return this.placeholder();
|
|
7531
|
+
}
|
|
7532
|
+
// Se todos os itens (não desabilitados) estão selecionados, mostra "Todos"
|
|
7533
|
+
if (this.isAllSelected()) {
|
|
7534
|
+
return 'Todos';
|
|
7535
|
+
}
|
|
7536
|
+
const maxDisplay = this.maxDisplayItems();
|
|
7537
|
+
if (selected.length <= maxDisplay) {
|
|
7538
|
+
return selected.map(opt => opt.displayValue).join(', ');
|
|
7539
|
+
}
|
|
7540
|
+
const firstItems = selected.slice(0, maxDisplay).map(opt => opt.displayValue).join(', ');
|
|
7541
|
+
const remaining = selected.length - maxDisplay;
|
|
7542
|
+
return `${firstItems} (+${remaining})`;
|
|
7543
|
+
}
|
|
7544
|
+
clearAll() {
|
|
7545
|
+
this.selectedOptions.set([]);
|
|
7546
|
+
this.optionsSelected.emit([]);
|
|
7547
|
+
}
|
|
7548
|
+
selectAll() {
|
|
7549
|
+
const enabledOptions = this.options().filter(option => !option.disabled);
|
|
7550
|
+
this.selectedOptions.set(enabledOptions);
|
|
7551
|
+
this.optionsSelected.emit(enabledOptions.map(opt => opt.value));
|
|
7552
|
+
}
|
|
7553
|
+
isAllSelected() {
|
|
7554
|
+
const enabledOptions = this.options().filter(option => !option.disabled);
|
|
7555
|
+
const selectedOptions = this.selectedOptions();
|
|
7556
|
+
if (enabledOptions.length === 0)
|
|
7557
|
+
return false;
|
|
7558
|
+
return enabledOptions.every(option => selectedOptions.some(selected => selected.value === option.value));
|
|
7559
|
+
}
|
|
7560
|
+
isSomeSelected() {
|
|
7561
|
+
const enabledOptions = this.options().filter(option => !option.disabled);
|
|
7562
|
+
const selectedOptions = this.selectedOptions();
|
|
7563
|
+
if (enabledOptions.length === 0 || selectedOptions.length === 0)
|
|
7564
|
+
return false;
|
|
7565
|
+
const selectedCount = enabledOptions.filter(option => selectedOptions.some(selected => selected.value === option.value)).length;
|
|
7566
|
+
return selectedCount > 0 && selectedCount < enabledOptions.length;
|
|
7567
|
+
}
|
|
7568
|
+
toggleSelectAll(event) {
|
|
7569
|
+
event.stopPropagation();
|
|
7570
|
+
if (this.isAllSelected()) {
|
|
7571
|
+
this.clearAll();
|
|
7572
|
+
}
|
|
7573
|
+
else {
|
|
7574
|
+
this.selectAll();
|
|
7575
|
+
}
|
|
7576
|
+
}
|
|
7577
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownMultiComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7578
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevDropdownMultiComponent, isStandalone: true, selector: "tc-rev-dropdown-multi", 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 }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tc-rev-dropdown-multi-toggle\"\n [class.tc-rev-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen\"\n class=\"tc-rev-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tc-rev-dropdown-multi-actions\">\n <label\n class=\"tc-rev-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tc-rev-dropdown-multi-select-all-text\">Todos</span>\n </label>\n </div>\n\n <ul class=\"tc-rev-dropdown-multi-options\">\n @for (option of options(); track option?.value)\n {\n <li class=\"tc-rev-dropdown-multi-menu-item\">\n <label\n class=\"tc-rev-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tc-rev-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: ["input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{position:initial;margin:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:after,input[type=checkbox].tc-rev-checkbox:before{content:\"\";position:initial;border-radius:initial;background:initial;z-index:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{height:initial;width:initial;left:initial;top:initial;margin:initial;border:initial}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:initial;height:initial;width:initial;margin:initial;z-index:initial;left:initial;top:initial;border:initial;border-width:initial;transform:initial}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{border-color:initial}input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--c-neutral-700);border-radius:2px;background:#fff;cursor:pointer;position:relative;outline:none;transition:border-color .2s,background .2s;display:inline-block;vertical-align:middle}input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:before{content:\"\";display:block;width:100%;height:100%;border-radius:2px;background:var(--c-neutral-50);transition:background .2s,border-color .2s;position:absolute;top:0;left:0;z-index:1}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{content:\"\";display:block;position:absolute;top:4px;left:2px;width:14px;height:10px;background:none;mask:none;-webkit-mask:none;pointer-events:none;z-index:2;transition:background .2s}input[type=checkbox].tc-rev-input-checkbox:checked,input[type=checkbox].tc-rev-checkbox:checked{border-color:var(--c-primary-500);background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{background:#fff;mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain;-webkit-mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain}:host{display:inline-block}.tc-rev-dropdown-multi{position:relative;display:inline-block}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-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:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--md{height:var(--size-44)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-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:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label{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;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.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-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label .tc-rev-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label{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;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.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-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label .tc-rev-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item:last-child .tc-rev-dropdown-multi-menu-item-label{border-bottom:none;margin-bottom:var(--size-8)}.tc-rev-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\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: TcRevCheckboxDirective, selector: "input[type=\"checkbox\"][tcRevCheckbox]" }] }); }
|
|
7579
|
+
}
|
|
7580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownMultiComponent, decorators: [{
|
|
7581
|
+
type: Component,
|
|
7582
|
+
args: [{ selector: 'tc-rev-dropdown-multi', imports: [
|
|
7583
|
+
CommonModule,
|
|
7584
|
+
FormsModule,
|
|
7585
|
+
ReactiveFormsModule,
|
|
7586
|
+
TcRevCheckboxDirective
|
|
7587
|
+
], template: "<div\n class=\"tc-rev-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tc-rev-dropdown-multi-toggle\"\n [class.tc-rev-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n <div\n *ngIf=\"isOpen\"\n class=\"tc-rev-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tc-rev-dropdown-multi-actions\">\n <label\n class=\"tc-rev-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tc-rev-dropdown-multi-select-all-text\">Todos</span>\n </label>\n </div>\n\n <ul class=\"tc-rev-dropdown-multi-options\">\n @for (option of options(); track option?.value)\n {\n <li class=\"tc-rev-dropdown-multi-menu-item\">\n <label\n class=\"tc-rev-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcRevCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tc-rev-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: ["input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{position:initial;margin:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:after,input[type=checkbox].tc-rev-checkbox:before{content:\"\";position:initial;border-radius:initial;background:initial;z-index:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{height:initial;width:initial;left:initial;top:initial;margin:initial;border:initial}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:initial;height:initial;width:initial;margin:initial;z-index:initial;left:initial;top:initial;border:initial;border-width:initial;transform:initial}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{border-color:initial}input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--c-neutral-700);border-radius:2px;background:#fff;cursor:pointer;position:relative;outline:none;transition:border-color .2s,background .2s;display:inline-block;vertical-align:middle}input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:before{content:\"\";display:block;width:100%;height:100%;border-radius:2px;background:var(--c-neutral-50);transition:background .2s,border-color .2s;position:absolute;top:0;left:0;z-index:1}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{content:\"\";display:block;position:absolute;top:4px;left:2px;width:14px;height:10px;background:none;mask:none;-webkit-mask:none;pointer-events:none;z-index:2;transition:background .2s}input[type=checkbox].tc-rev-input-checkbox:checked,input[type=checkbox].tc-rev-checkbox:checked{border-color:var(--c-primary-500);background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{background:#fff;mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain;-webkit-mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain}:host{display:inline-block}.tc-rev-dropdown-multi{position:relative;display:inline-block}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-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:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--md{height:var(--size-44)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-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:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label{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;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.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-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label .tc-rev-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label{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;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.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-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label .tc-rev-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item:last-child .tc-rev-dropdown-multi-menu-item-label{border-bottom:none;margin-bottom:var(--size-8)}.tc-rev-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
7588
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
7589
|
+
type: HostListener,
|
|
7590
|
+
args: ['document:click', ['$event']]
|
|
7591
|
+
}] } });
|
|
7592
|
+
|
|
7461
7593
|
var DropdownSize;
|
|
7462
7594
|
(function (DropdownSize) {
|
|
7463
7595
|
DropdownSize["sm"] = "sm";
|
|
@@ -7475,7 +7607,7 @@ class TcRevDropdownComponent {
|
|
|
7475
7607
|
this.label = input(''); // Label que será exibida
|
|
7476
7608
|
this.disabled = input(false); // Desabilita o dropdown
|
|
7477
7609
|
this.options = input.required(); // Lista de opções no novo formato
|
|
7478
|
-
this.
|
|
7610
|
+
this.initialValue = input(null); // Valor pré-selecionado
|
|
7479
7611
|
this.size = input(DropdownSize.sm);
|
|
7480
7612
|
this.width = input(''); // Largura do dropdown
|
|
7481
7613
|
this.optionSelected = output(); // Emissor para o valor selecionado
|
|
@@ -7485,12 +7617,12 @@ class TcRevDropdownComponent {
|
|
|
7485
7617
|
}
|
|
7486
7618
|
ngOnChanges(_simpleChanges) {
|
|
7487
7619
|
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
7488
|
-
if (_simpleChanges['
|
|
7489
|
-
this.selectedOption.set(this.options().find(option => option.value === this.
|
|
7620
|
+
if (_simpleChanges['initialValue'] || _simpleChanges['options']) {
|
|
7621
|
+
this.selectedOption.set(this.options().find(option => option.value === this.initialValue()) || null);
|
|
7490
7622
|
}
|
|
7491
7623
|
}
|
|
7492
7624
|
ngOnInit() {
|
|
7493
|
-
this.selectedOption.set(this.options().find(option => option.value === this.
|
|
7625
|
+
this.selectedOption.set(this.options().find(option => option.value === this.initialValue()) || null);
|
|
7494
7626
|
}
|
|
7495
7627
|
toggleDropdown() {
|
|
7496
7628
|
this.isOpen = !this.isOpen;
|
|
@@ -7501,7 +7633,7 @@ class TcRevDropdownComponent {
|
|
|
7501
7633
|
this.isOpen = false; // Fecha o dropdown
|
|
7502
7634
|
}
|
|
7503
7635
|
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 }); }
|
|
7504
|
-
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 },
|
|
7636
|
+
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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { 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()\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n {{ selectedOption() ? selectedOption()?.displayValue : 'Selecione' }}\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n <ul\n *ngIf=\"isOpen\" class=\"tc-rev-dropdown-menu\"\n [style.width]=\"this.width()\">\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 {{ option?.displayValue }}\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: [":host{display:inline-block}.tc-rev-dropdown{position:relative;display:inline-block}.tc-rev-dropdown .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-block;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)}.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: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 }] }); }
|
|
7505
7637
|
}
|
|
7506
7638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
|
|
7507
7639
|
type: Component,
|
|
@@ -8238,6 +8370,7 @@ class TcRevComponentsLibModule {
|
|
|
8238
8370
|
TcRevCheckboxDirective,
|
|
8239
8371
|
TcRevDropdownComponent,
|
|
8240
8372
|
TcRevDropdownGroupedComponent,
|
|
8373
|
+
TcRevDropdownMultiComponent,
|
|
8241
8374
|
TcRevDropdownMultiLevelComponent,
|
|
8242
8375
|
TcRevEmptyContentComponent,
|
|
8243
8376
|
TcRevFaqComponent,
|
|
@@ -8269,6 +8402,7 @@ class TcRevComponentsLibModule {
|
|
|
8269
8402
|
TcRevCheckboxDirective,
|
|
8270
8403
|
TcRevDropdownComponent,
|
|
8271
8404
|
TcRevDropdownGroupedComponent,
|
|
8405
|
+
TcRevDropdownMultiComponent,
|
|
8272
8406
|
TcRevDropdownMultiLevelComponent,
|
|
8273
8407
|
TcRevEmptyContentComponent,
|
|
8274
8408
|
TcRevFaqComponent,
|
|
@@ -8297,6 +8431,7 @@ class TcRevComponentsLibModule {
|
|
|
8297
8431
|
TcRevCardAccordionComponent,
|
|
8298
8432
|
TcRevDropdownComponent,
|
|
8299
8433
|
TcRevDropdownGroupedComponent,
|
|
8434
|
+
TcRevDropdownMultiComponent,
|
|
8300
8435
|
TcRevDropdownMultiLevelComponent,
|
|
8301
8436
|
TcRevFaqComponent,
|
|
8302
8437
|
TcRevInputContainerComponent,
|
|
@@ -8326,6 +8461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
8326
8461
|
TcRevCheckboxDirective,
|
|
8327
8462
|
TcRevDropdownComponent,
|
|
8328
8463
|
TcRevDropdownGroupedComponent,
|
|
8464
|
+
TcRevDropdownMultiComponent,
|
|
8329
8465
|
TcRevDropdownMultiLevelComponent,
|
|
8330
8466
|
TcRevEmptyContentComponent,
|
|
8331
8467
|
TcRevFaqComponent,
|
|
@@ -8359,6 +8495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
8359
8495
|
TcRevCheckboxDirective,
|
|
8360
8496
|
TcRevDropdownComponent,
|
|
8361
8497
|
TcRevDropdownGroupedComponent,
|
|
8498
|
+
TcRevDropdownMultiComponent,
|
|
8362
8499
|
TcRevDropdownMultiLevelComponent,
|
|
8363
8500
|
TcRevEmptyContentComponent,
|
|
8364
8501
|
TcRevFaqComponent,
|
|
@@ -8395,5 +8532,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
8395
8532
|
* Generated bundle index. Do not edit.
|
|
8396
8533
|
*/
|
|
8397
8534
|
|
|
8398
|
-
export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionModule, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerModule, TCloudUiDatepickerTimeComponent, TCloudUiDatepickerTimeModule, TCloudUiDigitOnlyDirective, TCloudUiDirectiveModule, TCloudUiElCopyDirective, TCloudUiFiltersComponent, TCloudUiFiltersModule, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputPasswordComponent, TCloudUiInputPasswordModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLabelTokenModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLineStepTitleComponent, TCloudUiLineStepTitleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingComponent, TCloudUiLoadingModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiMultiplesValuesComponent, TCloudUiMultiplesValuesModule, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiNumberStepComponent, TCloudUiNumberStepModule, TCloudUiPipesModule, TCloudUiProgressBarComponent, TCloudUiProgressBarModule, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiReorderItemsModule, TCloudUiScrollBoxComponent, TCloudUiScrollBoxModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTableModule, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TCloudUiWelcomeModule, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSlideToggleDirective, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevWizardStepsComponent, ToTextPipe };
|
|
8535
|
+
export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize, DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionModule, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerModule, TCloudUiDatepickerTimeComponent, TCloudUiDatepickerTimeModule, TCloudUiDigitOnlyDirective, TCloudUiDirectiveModule, TCloudUiElCopyDirective, TCloudUiFiltersComponent, TCloudUiFiltersModule, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputPasswordComponent, TCloudUiInputPasswordModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLabelTokenModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLineStepTitleComponent, TCloudUiLineStepTitleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingComponent, TCloudUiLoadingModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiMultiplesValuesComponent, TCloudUiMultiplesValuesModule, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiNumberStepComponent, TCloudUiNumberStepModule, TCloudUiPipesModule, TCloudUiProgressBarComponent, TCloudUiProgressBarModule, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiReorderItemsModule, TCloudUiScrollBoxComponent, TCloudUiScrollBoxModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTableModule, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TCloudUiWelcomeModule, 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, TcRevSlideToggleDirective, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevWizardStepsComponent, ToTextPipe };
|
|
8399
8536
|
//# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map
|