@dev-tcloud/tcloud-ui 6.12.3 → 6.12.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +59 -10
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-dropdown/tcloud-ui-dropdown.component.d.ts +7 -1
- package/lib/_modules/tcloud-ui-dropdown-multi/tcloud-ui-dropdown-multi.component.d.ts +7 -1
- package/package.json +1 -1
|
@@ -7992,12 +7992,23 @@ class TCloudUiDropdownComponent {
|
|
|
7992
7992
|
this.value = model(null); // Two-way binding para o valor selecionado
|
|
7993
7993
|
this.size = input(DropdownSize$1.sm);
|
|
7994
7994
|
this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
|
|
7995
|
+
this.searchable = input(false); // Habilita campo de busca
|
|
7996
|
+
this.searchPlaceholder = input('Buscar...'); // Placeholder do campo de busca
|
|
7995
7997
|
this.optionSelected = output(); // Emissor para o valor selecionado
|
|
7996
7998
|
this.selectedOption = signal(null); // Opção selecionada
|
|
7997
7999
|
this.isOpen = false; // Controla se o dropdown está aberto
|
|
7998
8000
|
this.dropdownSize = DropdownSize$1;
|
|
7999
8001
|
this.isDesktop = this._deviceService.isDesktop;
|
|
8000
8002
|
this.isMobile = this._deviceService.isMobile;
|
|
8003
|
+
this.searchText = signal(''); // Texto de busca
|
|
8004
|
+
// Opções filtradas baseadas na busca
|
|
8005
|
+
this.filteredOptions = computed(() => {
|
|
8006
|
+
const search = this.searchText().toLowerCase().trim();
|
|
8007
|
+
if (!search) {
|
|
8008
|
+
return this.options();
|
|
8009
|
+
}
|
|
8010
|
+
return this.options().filter(option => option.displayValue.toLowerCase().includes(search));
|
|
8011
|
+
});
|
|
8001
8012
|
}
|
|
8002
8013
|
ngOnChanges(_simpleChanges) {
|
|
8003
8014
|
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
@@ -8032,6 +8043,10 @@ class TCloudUiDropdownComponent {
|
|
|
8032
8043
|
return;
|
|
8033
8044
|
}
|
|
8034
8045
|
this.isOpen = !this.isOpen;
|
|
8046
|
+
// Limpa o texto de busca quando abrir o dropdown
|
|
8047
|
+
if (this.isOpen) {
|
|
8048
|
+
this.searchText.set('');
|
|
8049
|
+
}
|
|
8035
8050
|
}
|
|
8036
8051
|
selectOption(option) {
|
|
8037
8052
|
this.selectedOption.set(option);
|
|
@@ -8072,8 +8087,15 @@ class TCloudUiDropdownComponent {
|
|
|
8072
8087
|
const availableWidth = Math.max(50, menuWidth - padding - iconSpace);
|
|
8073
8088
|
return isTextEllipsed(text, availableWidth);
|
|
8074
8089
|
}
|
|
8090
|
+
onSearchChange(event) {
|
|
8091
|
+
const target = event.target;
|
|
8092
|
+
this.searchText.set(target.value);
|
|
8093
|
+
}
|
|
8094
|
+
clearSearch() {
|
|
8095
|
+
this.searchText.set('');
|
|
8096
|
+
}
|
|
8075
8097
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8076
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TCloudUiDropdownComponent, isStandalone: true, selector: "tcloud-ui-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"label()\"></b>\n }\n <span class=\"tcloud-ui-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n @for (option of options(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tcloud-ui-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n <div class=\"tcloud-ui-dropdown-menu-section\">\n <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n @for (option of options(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\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: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
|
|
8098
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TCloudUiDropdownComponent, isStandalone: true, selector: "tcloud-ui-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"label()\"></b>\n }\n <span class=\"tcloud-ui-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n <!-- Campo de busca -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tcloud-ui-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n <div class=\"tcloud-ui-dropdown-menu-section\">\n <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n <!-- Campo de busca mobile -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search tcloud-ui-dropdown-search--mobile\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca mobile -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results tcloud-ui-dropdown-no-results--mobile\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-12) 0;margin-bottom:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{height:var(--size-40);font-size:var(--f-size-14);padding:var(--size-12) var(--size-40) var(--size-12) var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{left:var(--size-12);font-size:var(--f-size-14)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{right:var(--size-12);padding:var(--size-4)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-no-results--mobile{padding:var(--size-16) var(--size-12);font-size:var(--f-size-14);color:var(--c-neutral-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
|
|
8077
8099
|
}
|
|
8078
8100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDropdownComponent, decorators: [{
|
|
8079
8101
|
type: Component,
|
|
@@ -8083,7 +8105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
8083
8105
|
ReactiveFormsModule,
|
|
8084
8106
|
TcRevTooltipDirective,
|
|
8085
8107
|
TcRevIconButtonDirective
|
|
8086
|
-
], template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"label()\"></b>\n }\n <span class=\"tcloud-ui-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n @for (option of options(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tcloud-ui-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n <div class=\"tcloud-ui-dropdown-menu-section\">\n <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n @for (option of options(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
|
|
8108
|
+
], template: "<div\n class=\"tcloud-ui-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\"\n>\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n >\n @if (label()) {\n <b [innerHTML]=\"label()\"></b>\n }\n <span class=\"tcloud-ui-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n <!-- Campo de busca -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n <span\n class=\"tcloud-ui-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [tcRevTooltip]=\"\n isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n \"\n position=\"top\"\n >\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n <div class=\"tcloud-ui-dropdown-menu-section\">\n <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n {{ label() }}\n </h3>\n <button\n tcRevIconButton=\"outline\"\n color=\"dark\"\n size=\"sm\"\n (click)=\"_deviceService.closeDropdownDevice()\"\n >\n <i class=\"fa-light fa-times f-size-16\"></i>\n </button>\n </div>\n <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n <!-- Campo de busca mobile -->\n @if (searchable()) {\n <li class=\"tcloud-ui-dropdown-search tcloud-ui-dropdown-search--mobile\">\n <div class=\"tcloud-ui-dropdown-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </li>\n }\n @for (option of filteredOptions(); track option?.value) {\n <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n <button\n class=\"tcloud-ui-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\"\n >\n {{ option?.displayValue }}\n\n @if (selectedOption()?.value === option?.value) {\n <i class=\"fa-light fa-circle-check f-size-16\"></i>\n }\n </button>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca mobile -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-no-results tcloud-ui-dropdown-no-results--mobile\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-search .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-12) 0;margin-bottom:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-input{height:var(--size-40);font-size:var(--f-size-14);padding:var(--size-12) var(--size-40) var(--size-12) var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-icon{left:var(--size-12);font-size:var(--f-size-14)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-search--mobile .tcloud-ui-dropdown-search-container .tcloud-ui-dropdown-search-clear{right:var(--size-12);padding:var(--size-4)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-no-results--mobile{padding:var(--size-16) var(--size-12);font-size:var(--f-size-14);color:var(--c-neutral-600)}\n"] }]
|
|
8087
8109
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
|
|
8088
8110
|
type: ViewChild,
|
|
8089
8111
|
args: ['menuTemplate']
|
|
@@ -8115,10 +8137,21 @@ class TCloudUiDropdownMultiComponent {
|
|
|
8115
8137
|
this.width = input(''); // Largura do dropdown
|
|
8116
8138
|
this.placeholder = input('Selecione'); // Placeholder quando nenhum item estiver selecionado
|
|
8117
8139
|
this.maxDisplayItems = input(2); // Máximo de itens a serem exibidos no botão
|
|
8140
|
+
this.searchable = input(false); // Habilita campo de busca
|
|
8141
|
+
this.searchPlaceholder = input('Buscar...'); // Placeholder do campo de busca
|
|
8118
8142
|
this.optionsSelected = output(); // Emissor para os valores selecionados
|
|
8119
8143
|
this.selectedOptions = signal([]); // Opções selecionadas
|
|
8120
8144
|
this.isOpen = false; // Controla se o dropdown está aberto
|
|
8121
8145
|
this.dropdownSize = DropdownMultiSize$1;
|
|
8146
|
+
this.searchText = signal(''); // Texto de busca
|
|
8147
|
+
// Opções filtradas baseadas na busca
|
|
8148
|
+
this.filteredOptions = computed(() => {
|
|
8149
|
+
const search = this.searchText().toLowerCase().trim();
|
|
8150
|
+
if (!search) {
|
|
8151
|
+
return this.options();
|
|
8152
|
+
}
|
|
8153
|
+
return this.options().filter(option => option.displayValue.toLowerCase().includes(search));
|
|
8154
|
+
});
|
|
8122
8155
|
}
|
|
8123
8156
|
ngOnChanges(_simpleChanges) {
|
|
8124
8157
|
// Atualiza as opções selecionadas quando os valores pré-selecionados mudam
|
|
@@ -8151,6 +8184,10 @@ class TCloudUiDropdownMultiComponent {
|
|
|
8151
8184
|
toggleDropdown() {
|
|
8152
8185
|
if (!this.disabled()) {
|
|
8153
8186
|
this.isOpen = !this.isOpen;
|
|
8187
|
+
// Limpa o texto de busca quando abrir o dropdown
|
|
8188
|
+
if (this.isOpen) {
|
|
8189
|
+
this.searchText.set('');
|
|
8190
|
+
}
|
|
8154
8191
|
}
|
|
8155
8192
|
}
|
|
8156
8193
|
toggleOption(option, event) {
|
|
@@ -8199,21 +8236,26 @@ class TCloudUiDropdownMultiComponent {
|
|
|
8199
8236
|
this.optionsSelected.emit([]);
|
|
8200
8237
|
}
|
|
8201
8238
|
selectAll() {
|
|
8202
|
-
const enabledOptions = this.
|
|
8203
|
-
const
|
|
8204
|
-
this.selectedOptions.
|
|
8205
|
-
|
|
8239
|
+
const enabledOptions = this.filteredOptions().filter(option => !option.disabled);
|
|
8240
|
+
const allCurrentSelectedFromFiltered = this.selectedOptions().filter(selected => enabledOptions.some(option => option.value === selected.value));
|
|
8241
|
+
const newOptionsToAdd = enabledOptions.filter(option => !this.selectedOptions().some(selected => selected.value === option.value));
|
|
8242
|
+
// Une as opções já selecionadas (que não estão no filtro) com as novas
|
|
8243
|
+
const currentSelectedNotInFilter = this.selectedOptions().filter(selected => !enabledOptions.some(option => option.value === selected.value));
|
|
8244
|
+
const allSelected = [...currentSelectedNotInFilter, ...allCurrentSelectedFromFiltered, ...newOptionsToAdd];
|
|
8245
|
+
const allValues = allSelected.map(opt => opt.value);
|
|
8246
|
+
this.selectedOptions.set(allSelected);
|
|
8247
|
+
this.values.set(allValues);
|
|
8206
8248
|
this.optionsSelected.emit(allValues);
|
|
8207
8249
|
}
|
|
8208
8250
|
isAllSelected() {
|
|
8209
|
-
const enabledOptions = this.
|
|
8251
|
+
const enabledOptions = this.filteredOptions().filter(option => !option.disabled);
|
|
8210
8252
|
const selectedOptions = this.selectedOptions();
|
|
8211
8253
|
if (enabledOptions.length === 0)
|
|
8212
8254
|
return false;
|
|
8213
8255
|
return enabledOptions.every(option => selectedOptions.some(selected => selected.value === option.value));
|
|
8214
8256
|
}
|
|
8215
8257
|
isSomeSelected() {
|
|
8216
|
-
const enabledOptions = this.
|
|
8258
|
+
const enabledOptions = this.filteredOptions().filter(option => !option.disabled);
|
|
8217
8259
|
const selectedOptions = this.selectedOptions();
|
|
8218
8260
|
if (enabledOptions.length === 0 || selectedOptions.length === 0)
|
|
8219
8261
|
return false;
|
|
@@ -8229,8 +8271,15 @@ class TCloudUiDropdownMultiComponent {
|
|
|
8229
8271
|
this.selectAll();
|
|
8230
8272
|
}
|
|
8231
8273
|
}
|
|
8274
|
+
onSearchChange(event) {
|
|
8275
|
+
const target = event.target;
|
|
8276
|
+
this.searchText.set(target.value);
|
|
8277
|
+
}
|
|
8278
|
+
clearSearch() {
|
|
8279
|
+
this.searchText.set('');
|
|
8280
|
+
}
|
|
8232
8281
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDropdownMultiComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TCloudUiDropdownMultiComponent, isStandalone: true, selector: "tcloud-ui-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 }, values: { classPropertyName: "values", publicName: "values", 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: { values: "valuesChange", optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tcloud-ui-dropdown-multi-toggle\"\n [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-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=\"tcloud-ui-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tcloud-ui-dropdown-multi-actions\">\n <label\n class=\"tcloud-ui-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tcloud-ui-dropdown-multi-select-all-text\">Todos</span>\n </label>\n </div>\n\n <ul class=\"tcloud-ui-dropdown-multi-options\">\n @for (option of options(); track option?.value)\n {\n <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n <label\n class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tcloud-ui-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display: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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-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%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-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%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-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: TCloudUiCheckboxDirective, selector: "input[type=\"checkbox\"][tcloudUiCheckbox]" }] }); }
|
|
8282
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TCloudUiDropdownMultiComponent, isStandalone: true, selector: "tcloud-ui-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 }, values: { classPropertyName: "values", publicName: "values", 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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tcloud-ui-dropdown-multi-toggle\"\n [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-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=\"tcloud-ui-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Campo de busca -->\n @if (searchable()) {\n <div class=\"tcloud-ui-dropdown-multi-search\">\n <div class=\"tcloud-ui-dropdown-multi-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-multi-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-multi-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-multi-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tcloud-ui-dropdown-multi-actions\">\n <label\n class=\"tcloud-ui-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tcloud-ui-dropdown-multi-select-all-text\">\n @if (searchable() && searchText()) {\n Todos (filtrados)\n } @else {\n Todos\n }\n </span>\n </label>\n </div>\n\n <ul class=\"tcloud-ui-dropdown-multi-options\">\n @for (option of filteredOptions(); track option?.value)\n {\n <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n <label\n class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tcloud-ui-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-multi-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display: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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-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%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-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%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic;border:1px solid var(--c-neutral-50)}.tcloud-ui-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: TCloudUiCheckboxDirective, selector: "input[type=\"checkbox\"][tcloudUiCheckbox]" }] }); }
|
|
8234
8283
|
}
|
|
8235
8284
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiDropdownMultiComponent, decorators: [{
|
|
8236
8285
|
type: Component,
|
|
@@ -8239,7 +8288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
8239
8288
|
FormsModule,
|
|
8240
8289
|
ReactiveFormsModule,
|
|
8241
8290
|
TCloudUiCheckboxDirective
|
|
8242
|
-
], template: "<div\n class=\"tcloud-ui-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tcloud-ui-dropdown-multi-toggle\"\n [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-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=\"tcloud-ui-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tcloud-ui-dropdown-multi-actions\">\n <label\n class=\"tcloud-ui-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tcloud-ui-dropdown-multi-select-all-text\">Todos</span>\n </label>\n </div>\n\n <ul class=\"tcloud-ui-dropdown-multi-options\">\n @for (option of options(); track option?.value)\n {\n <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n <label\n class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tcloud-ui-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display: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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-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%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-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%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
8291
|
+
], template: "<div\n class=\"tcloud-ui-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tcloud-ui-dropdown-multi-toggle\"\n [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-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=\"tcloud-ui-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n\n <!-- Campo de busca -->\n @if (searchable()) {\n <div class=\"tcloud-ui-dropdown-multi-search\">\n <div class=\"tcloud-ui-dropdown-multi-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-multi-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-multi-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-multi-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tcloud-ui-dropdown-multi-actions\">\n <label\n class=\"tcloud-ui-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tcloud-ui-dropdown-multi-select-all-text\">\n @if (searchable() && searchText()) {\n Todos (filtrados)\n } @else {\n Todos\n }\n </span>\n </label>\n </div>\n\n <ul class=\"tcloud-ui-dropdown-multi-options\">\n @for (option of filteredOptions(); track option?.value)\n {\n <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n <label\n class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n\n <span class=\"tcloud-ui-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-multi-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display: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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-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%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-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%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-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)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic;border:1px solid var(--c-neutral-50)}.tcloud-ui-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
8243
8292
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
8244
8293
|
type: HostListener,
|
|
8245
8294
|
args: ['document:click', ['$event']]
|